Token patterns

Each pattern below links to a small example project in the repository. A test runs dta lint and dta build on each one, so the examples stay correct as DTA changes. Open a folder to see the token files and config.

Pattern	The idea	In DTA	Example
Tiers	Primitives hold raw values; semantic tokens name roles (action.background); component tokens name parts (button.background). Each tier aliases the one below.	One collection per tier; semantic-must-alias keeps the upper tiers free of raw values	tiers
Multiple brands	One shared palette; the semantic tier has the same names in every brand, with different aliases.	A mode per brand, listed in brands; one themes/<brand>.css each	multi-brand
Light and dark	The same mechanism, with role names for surfaces and text.	Modes Light and Dark, listed in brands	themes
Breakpoint overrides	Sizes that change with the screen.	A mode per breakpoint; read, linted and diffed, but not built yet (TICKET-091)	responsive
Component overrides	One brand changes one component without touching the semantic tier.	A component collection with the brand modes; the brand points one token elsewhere	component-overrides

Brands and themes together (brand × theme) need one mode per combination for now; see Brands and themes.

A component tier with several brands

A component tier with one mode works with brands: its tokens that alias brand tokens are repeated in each theme file, so a nested data-brand section changes them too (Brands and themes). Give the component tier the brand modes when a brand should point a component token somewhere else, as in the component-overrides example.

How large design systems do it

The tier names differ, but the structure is the same. Their own documentation is the source for the details:

System	Tiers, from raw values up	Source
Material Design 3	reference → system → component	Material Web: theming
GitHub Primer	base → functional → component/pattern	Primer: token names, color
Adobe Spectrum	primitive (global) → semantic → component-specific	Spectrum: design tokens
Atlassian	palette → tokens named foundation.property.modifier	Atlassian: design tokens, color
Salesforce Lightning	global styling hooks → component styling hooks	Salesforce: styling hooks

What they share: code uses the decision tier, not raw values, and themes change the decision tier while the palette stays the same.