Semantics
How the semantic layer works — the model every platform shares. For the actual token values, see Tokens.
Semantic tokens describe intent, not appearance (background.action.primary, not “purple”). They reference primitives and carry the system’s meaning across themes and platforms. Always build from these.
Source: Tellus UI Kit (Figma). This page is the model— it’s the same for everyone. The platform-specific identifiers and values live in Tokens.
Every semantic token aliases a primitive — the primitive holds the raw value, the semantic carries the intent. Product code builds from semantics, never from a primitive directly, so themes and platforms stay swappable. That’s why each row below shows its primitive (the value it points at), not a loose hex.
In the spine, that link is a one-line alias — the primitive holds the value, the semantic points at it:
// tokens/core.json — primitive holds the raw value
"color": { "brand": { "500": { "$value": "#4B56C7" } } }
// tokens/semantic.json — semantic aliases the primitive
"background": { "action": { "primary": {
"default": { "$value": "{color.brand.500}" }
} } }Anatomy of a token name
Every token name reads left to right, from the broad category down to the specific state. The same slots, always in the same order — that’s what makes a name predictable to read and to extend.
Read left to right, generic → specific. Parts always appear in this fixed order; omit a part when it doesn’t apply — never use a placeholder.
Categories
The category is the first part of every name — the broad design decision being tokenised. These stay stable across mobile, web, and Figma. Roles, intents, states, and component names are not categories.
Browse the tokens
The actual values — colors, type, radius, spacing, stroke, elevation — with per-platform identifiers and downloads.