Typography
headline-xl
Space Grotesk
Size: 72px / Weight: 700 / Lead: 80px
headline-lg
Space Grotesk
Size: 48px / Weight: 600 / Lead: 56px
headline-md
Space Grotesk
Size: 32px / Weight: 600 / Lead: 40px
body-lg
Inter
Size: 18px / Weight: 400 / Lead: 28px
body-md
Inter
Size: 16px / Weight: 400 / Lead: 24px
label-md
Space Grotesk
Size: 14px / Weight: 500 / Lead: 20px
Components
button-primary
Preview
backgroundColor
#fff6df
textColor
#3a3000
typography
14px Space Grotesk
rounded
0.5rem
padding
12px
height
48px
button-primary-hover
Preview
backgroundColor
#ffe16d
button-secondary
Preview
backgroundColor
transparent
textColor
#bdf4ff
typography
14px Space Grotesk
rounded
0.5rem
padding
12px
height
48px
button-secondary-hover
Preview
backgroundColor
rgba(0, 227, 253, 0.1)
card-glass-level-2
Preview
backgroundColor
rgba(52, 52, 58, 0.2)
rounded
0.75rem
padding
24px
card-glass-interactive-hover
Preview
backgroundColor
rgba(56, 57, 63, 0.4)
input-field
Preview
backgroundColor
#0d0e13
textColor
#e3e1e9
typography
16px Inter
rounded
0.5rem
padding
12px
list-item-hover
Preview
backgroundColor
#292a2f
textColor
#fff6df
rounded
0.375rem
padding
8px
hero-headline
Preview
textColor
#fff6df
typography
72px Space Grotesk
badge-celestial
Preview
backgroundColor
#e7d1ff
textColor
#6b5586
typography
14px Space Grotesk
rounded
9999px
padding
4px
Spacing
unit
8px
container-max
1280px
gutter
24px
margin-mobile
16px
margin-desktop
64px
Rounding
sm
0.125rem
DEFAULT
0.25rem
md
0.375rem
lg
0.5rem
xl
0.75rem
full
9999px