Logo
Kleuren
Color ScalesPrimary - Forest Green
Secondary - Navy Blue
Tertiary - Amber Orange
Danger - Red
Neutral - Warm Gray
Semantic TokensSurface
Text
Border
States
successwarningerrorinfoneutral
Typografie
Headings
TokenMinPreferredMaxWeightLine heightPreview
heading-h122px18px + 3vw40px7001.2Aa
heading-h218px16px + 1.6vw32px7001.25Aa
heading-h316px14px + 1vw24px6001.3Aa
heading-h415px14px + 0.35vw18px6001.4Aa
Body
TokenMinPreferredMaxWeightLine heightPreview
body-lg15px14px + 0.2vw18px4001.6Aa
body-md14px14px (fixed)14px4001.6Aa
body-sm12px12px (fixed)12px4001.6Aa
Label
TokenMinPreferredMaxWeightLine heightPreview
label-lg14px14px (fixed)14px5001.4Aa
label-md12px12px (fixed)12px5001.4Aa
label-sm11px11px (fixed, uppercase)11px5001.4Aa
Metric
TokenMinPreferredMaxWeightLine heightPreview
metric-lg24px18px + 3vw48px7001.1Aa
metric-md18px15px + 1.5vw30px7001.15Aa
Spacing
Spacing tokens - 4px base0px · 0x
4px · 1x
8px · 2x
10px · 2.5x
12px · 3x
16px · 4x
20px · 5x
24px · 6x
32px · 8x
40px · 10x
48px · 12x
64px · 16x
80px · 20x
96px · 24x
128px · 32x
xs · 12px
sm · 16px
md · 20px
lg · 24px
xl · 32px
2xl · 40px
3xl · 48px
4xl · 80px
none · 0px
xs · 2px
sm · 4px
md · 6px
lg · 8px
xl · 12px
2xl · 16px
full · 9999px
Shadows
none
xs
sm
md
lg
xl
2xl
inner