Component tokens
Component tokens are scoped values used by specific components — buttons, inputs, cards, and others. They sit at the top of the token hierarchy, often aliasing Mode or Primitive tokens, and give components a stable, named contract that can be adjusted independently.
Platform tokens define values that differ by platform (desktop vs. native), such as touch targets and interaction density.
Component tokens
Tokens scoped to specific components (border, button, spacing, size).
26 tokens
| Name | Type | Value | Description |
|---|---|---|---|
| border | |||
border/radius/full | FLOAT | 96px | — |
border/radius/lg | FLOAT | 16px | — |
border/radius/md | FLOAT | 8px | — |
border/radius/none | FLOAT | 0px | — |
border/radius/placeholder | STRING | var(--border-radius-lg) | — |
border/radius/sm | FLOAT | 4px | — |
border/size/lg | FLOAT | 2px | — |
border/size/none | FLOAT | 0px | — |
border/size/sm | FLOAT | 1px | — |
| button | |||
button/border/radius | STRING | var(--border-radius-sm) | — |
button/border/size/secondary | FLOAT | 1px | — |
| size | |||
size/lg | FLOAT | 32px | — |
size/md | FLOAT | 24px | — |
size/sm | FLOAT | 20px | — |
size/xl | FLOAT | 40px | — |
size/xs | FLOAT | 16px | — |
size/xxl | FLOAT | 48px | — |
| spacing | |||
spacing/0 | FLOAT | 0px | — |
spacing/1 | FLOAT | 2px | — |
spacing/2 | FLOAT | 4px | — |
spacing/3 | FLOAT | 8px | — |
spacing/4 | FLOAT | 12px | — |
spacing/5 | FLOAT | 16px | — |
spacing/6 | FLOAT | 24px | — |
spacing/7 | FLOAT | 32px | — |
spacing/8 | FLOAT | 40px | — |
Platform tokens
Values that vary between desktop and native platforms.
18 tokens
| Name | Type | Value | Description |
|---|---|---|---|
| desktop | |||
desktop/interactive/height/lg | FLOAT | 40px | — |
desktop/interactive/height/md | FLOAT | 32px | — |
desktop/interactive/height/sm | FLOAT | 24px | — |
desktop/interactive/padding/lg/x | STRING | var(--padding-2xl) | — |
desktop/interactive/padding/lg/y | STRING | var(--padding-lg) | — |
desktop/interactive/padding/md/x | STRING | var(--padding-lg) | — |
desktop/interactive/padding/md/y | STRING | var(--padding-md) | — |
desktop/interactive/padding/sm/x | STRING | var(--padding-md) | — |
desktop/interactive/padding/sm/y | STRING | var(--padding-sm) | — |
| native | |||
native/interactive/height/lg | FLOAT | 52px | — |
native/interactive/height/md | FLOAT | 48px | — |
native/interactive/height/sm | FLOAT | 44px | — |
native/interactive/padding/lg/x | STRING | var(--padding-2xl) | — |
native/interactive/padding/lg/y | STRING | var(--padding-3xl) | — |
native/interactive/padding/md/x | STRING | var(--padding-lg) | — |
native/interactive/padding/md/y | STRING | var(--padding-2xl) | — |
native/interactive/padding/sm/x | STRING | var(--padding-md) | — |
native/interactive/padding/sm/y | STRING | var(--padding-xl) | — |