Appearance
Token format reference
Tokens are strict DTCG 2025.10 JSON in *.tokens.json files, compiled to CSS custom properties in @layer tessera.tokens. See Tokens for how they are organized and themed.
Supported types
$type | $value | Becomes |
|---|---|---|
color | { "colorSpace": "srgb", "components": [0.145, 0.388, 0.922] } | a color |
dimension | { "value": 16, "unit": "px" } | 16px (units px and rem) |
duration | { "value": 150, "unit": "ms" } | 150ms (units ms and s) |
number | 0.5 | a number |
fontFamily | ["Inter", "system-ui", "sans-serif"] | a font-family list |
fontWeight | 600 | a number from 1 to 1000, or a name such as "bold" |
cubicBezier | [0.2, 0, 0, 1] | cubic-bezier(0.2, 0, 0, 1) |
strokeStyle | "dashed" | the string form |
shadow | { "color": "{color.shadow}", "offsetX": ..., "offsetY": ..., "blur": ..., "spread": ... } | a box-shadow |
border | { "color": "...", "width": "...", "style": "solid" } | a border shorthand |
transition | { "duration": "...", "delay": "...", "timingFunction": "..." } | a transition shorthand |
Anything else (a gradient, a typography composite) is reported as T1004 rather than ignored. Unsupported DTCG features such as group $extends and $ref are T1009.
Names
A token path becomes a custom property: space.4 is --t-space-4, color.action.primary.bg is --t-color-action-primary-bg. Names use letters, numbers, - and _ (T1002).
Tiers
Each token is a primitive, semantic or component token ($extensions.tessera.tier, inheritable from a group). Components should use semantic tokens; using a primitive is T2105.
Theme files
A file in themes/ overrides values of existing tokens. "$extends" names the base, "$attribute" the HTML attribute (default theme) and "$auto" an optional media feature. A theme cannot add a token or change a type (T1011, T1012).
This repository's tokens
The design system in system/tokens, as tessera tokens build reports it.
| Token | Type | Tier |
|---|---|---|
color.neutral.0 | color | primitive |
color.neutral.100 | color | primitive |
color.neutral.200 | color | primitive |
color.neutral.600 | color | primitive |
color.neutral.700 | color | primitive |
color.neutral.800 | color | primitive |
color.neutral.900 | color | primitive |
color.blue.300 | color | primitive |
color.blue.400 | color | primitive |
color.blue.600 | color | primitive |
color.blue.700 | color | primitive |
color.red.400 | color | primitive |
color.red.500 | color | primitive |
color.red.700 | color | primitive |
color.red.800 | color | primitive |
color.surface.default | color | semantic |
color.surface.raised | color | semantic |
color.surface.hover | color | semantic |
color.surface.inverse | color | semantic |
color.text.default | color | semantic |
color.text.muted | color | semantic |
color.action.primary.bg | color | semantic |
color.action.primary.bg-hover | color | semantic |
color.action.primary.fg | color | semantic |
color.action.primary.text | color | semantic |
color.action.danger.bg | color | semantic |
color.action.danger.bg-hover | color | semantic |
color.action.danger.fg | color | semantic |
color.action.danger.text | color | semantic |
color.focus.ring | color | semantic |
color.border.default | color | semantic |
color.border.strong | color | semantic |
space.1 | dimension | semantic |
space.2 | dimension | semantic |
space.3 | dimension | semantic |
space.4 | dimension | semantic |
space.5 | dimension | semantic |
space.6 | dimension | semantic |
space.8 | dimension | semantic |
space.0-5 | dimension | semantic |
radius.sm | dimension | semantic |
radius.md | dimension | semantic |
radius.lg | dimension | semantic |
radius.full | dimension | semantic |
font.family.sans | fontFamily | semantic |
font.weight.regular | fontWeight | semantic |
font.weight.bold | fontWeight | semantic |
font.size.sm | dimension | semantic |
font.size.base | dimension | semantic |
font.size.lg | dimension | semantic |
opacity.disabled | number | semantic |
motion.duration.fast | duration | semantic |
motion.easing.standard | cubicBezier | semantic |
shadow.md | shadow | semantic |