Typography
display-lg
Inter
Size: 84px / Weight: 700 / Lead: 90px
headline-lg
Inter
Size: 32px / Weight: 600 / Lead: 40px
headline-md
Inter
Size: 24px / Weight: 500 / Lead: 32px
body-lg
Inter
Size: 18px / Weight: 400 / Lead: 28px
body-md
Inter
Size: 16px / Weight: 400 / Lead: 24px
label-sm
Inter
Size: 12px / Weight: 600 / Lead: 16px
Components
glass-card-standard
Preview
backgroundColor
rgba(255, 255, 255, 0.1)
textColor
#ffffff
rounded
1rem
padding
20px
glass-card-elevated
Preview
backgroundColor
rgba(255, 255, 255, 0.2)
textColor
#ffffff
rounded
1.5rem
padding
20px
button-primary
Preview
backgroundColor
#ffffff
textColor
#2f3131
typography
12px Inter
rounded
1.5rem
height
48px
padding
0 24px
button-primary-hover
Preview
backgroundColor
#c6c6c7
button-ghost
Preview
backgroundColor
rgba(255, 255, 255, 0.05)
textColor
#ffffff
typography
12px Inter
rounded
1.5rem
input-field
Preview
backgroundColor
rgba(255, 255, 255, 0.1)
textColor
#ffffff
typography
16px Inter
rounded
1.5rem
padding
20px
height
48px
weather-display-large
Preview
textColor
#ffffff
typography
84px Inter
metric-label
Preview
textColor
#c4c7c8
typography
12px Inter
list-item-interactive
Preview
backgroundColor
transparent
rounded
0.75rem
padding
12px
list-item-interactive-hover
Preview
backgroundColor
rgba(255, 255, 255, 0.1)
Spacing
unit
8px
container-padding
24px
card-gap
16px
section-margin
40px
glass-padding
20px
Rounding
sm
0.25rem
DEFAULT
0.5rem
md
0.75rem
lg
1rem
xl
1.5rem
full
9999px