Design System
Live preview of the tokens in app/globals.css. Use these as utilities (bg-primary-300, p-m, rounded-xl) or CSS variables.
Color
Primary — Space Indigo
100#90a2e0
200#5874d1
300#314fb0
400#213679
500#121d41
Secondary — Turquoise Surf
100#b7e4f0
200#6fc9e0
300#2caccc
400#22859e
500#185f70
Tertiary — Light Blue
100#bce6f1
200#84d1e5
300#4dbcda
400#279dbc
500#1c6f84
Neutral
100#ffffff
200#e3e3e3
300#c6c6c6
400#aaaaaa
500#8e8e8e
600#717171
700#555555
800#393939
900#1c1c1c
1000#000000
Feedback
red-100#fb3748
red-200#d00416
yellow-100#ffdb43
yellow-200#dfb400
green-100#84ebb4
green-200#1fc16b
Spacing
3xs4px
2xs8px
xs16px
s24px
m32px
l40px
xl48px
2xl64px
3xl80px
4xl96px
5xl112px
Radius
2xs
xs
s
m
l
xl
2xl
full
Elevation (Effect)
e0
e1
e2
e3
Stroke
#0
#1
#2
#3