Foundation tokens
Foundation tokens define our global design language — spacing, sizing, radii, typography styles, and more. They provide the base values used to build components and layouts.
Sizing
|
Name |
Formula |
Value |
Example |
|---|---|---|---|
|
sizing.50 |
{sizing-base}*0.5 |
4px |
|
|
sizing.100 |
{sizing-base}*1 |
8px |
|
|
sizing.200 |
{sizing-base}*2 |
16px |
|
|
sizing.300 |
{sizing-base}*3 |
24px |
|
|
sizing.400 |
{sizing-base}*4 |
32px |
|
|
sizing.500 |
{sizing-base}*5 |
40px |
|
|
sizing.550 |
{sizing-base}*5.5 |
44px |
|
|
sizing.600 |
{sizing-base}*6 |
48px |
|
|
sizing.700 |
{sizing-base}*7 |
56px |
|
|
sizing.800 |
{sizing-base}*8 |
64px |
|
|
sizing.900 |
{sizing-base}*9 |
72px |
|
|
sizing.1000 |
{sizing-base}*10 |
80px |
|
|
sizing.1200 |
{sizing-base}*12 |
96px |
|
|
sizing.1300 |
{sizing-base}*13 |
104px |
|
Spacing
|
Name |
Formula |
Value |
Example |
|---|---|---|---|
|
spacing.0 |
{spacing-base}*0 |
0px |
|
|
spacing.25 |
{spacing-base}*0.25 |
2px |
|
|
spacing.50 |
{spacing-base}*0.5 |
4px |
|
|
spacing.100 |
{spacing-base}*1 |
8px |
|
|
spacing.150 |
{spacing-base}*1.5 |
12px |
|
|
spacing.200 |
{spacing-base}*2 |
16px |
|
|
spacing.250 |
{spacing-base}*2.5 |
20px |
|
|
spacing.300 |
{spacing-base}*3 |
24px |
|
|
spacing.400 |
{spacing-base}*4 |
32px |
|
|
spacing.450 |
{spacing-base}*4.5 |
36px |
|
|
spacing.500 |
{spacing-base}*5 |
40px |
|
|
spacing.600 |
{spacing-base}*6 |
48px |
|
|
spacing.700 |
{spacing-base}*7 |
56px |
|
|
spacing.800 |
{spacing-base}*8 |
64px |
|
|
spacing.900 |
{spacing-base}*9 |
72px |
|
|
spacing.1000 |
{spacing-base}*10 |
80px |
|
|
spacing.1200 |
{spacing-base}*12 |
96px |
|
Border radius
|
Name |
Formula |
Value |
Example |
|---|---|---|---|
|
border-radius.0 |
{border-radius-base}*0 |
0px |
|
|
border-radius.25 |
{border-radius-base}*0.25 |
2px |
|
|
border-radius.50 |
{border-radius-base}*0.5 |
4px |
|
|
border-radius.100 |
{border-radius-base}*1 |
8px |
|
|
border-radius.150 |
{border-radius-base}*1.5 |
12px |
|
|
border-radius.200 |
{border-radius-base}*2 |
16px |
|
|
border-radius.300 |
{border-radius-base}*3 |
24px |
|
|
border-radius.round |
|
32px |
|
Border width
|
Name |
Value |
Example |
|---|---|---|
|
border-width.0 |
0px |
|
|
border-width.100 |
1px |
|
|
border-width.200 |
2px |
|
|
border-width.300 |
3px |
|
|
border-width.800 |
8px |
|
Opacity
|
Name |
Value |
Example |
|---|---|---|
|
opacity.0 |
0% |
|
|
opacity.100 |
8% |
|
|
opacity.150 |
12% |
|
|
opacity.200 |
16% |
|
|
opacity.400 |
32% |
|
|
opacity.600 |
48% |
|
|
opacity.800 |
64% |
|
|
opacity.1000 |
100% |
|
Shadow
|
Name |
Value |
Example |
|---|---|---|
|
shadow.0 |
No visible elevation. Suitable for when no visual separation indicator is intended (e.g. ghost buttons). Used with background.static.flat. |
|
|
shadow.100 |
Soft resting levation for nested cards and other surfaces to help distinguish a component from its parent without strong depth. Used with background.static.raised. |
|
|
shadow.200 |
Medium elevation for floating components appearing directly on the current UI (e.g. dropdowns, tooltips, notifications, and popovers). Also used on the “drag” interaction for components already using elevation.100. |
|
|
shadow.300 |
High elevation used with background.static.floating, typically on dialogs and top-level containers that appear above a darkened overlay. |
|
Typography
Theme tokens
Theme tokens assign visual meaning to design elements, such as background, text, or borders, adapting across brands and modes. They should be used in every design.
Background
Text