What Foundations governs
Everything below the component line: the 244 named values that components are built from, and the rules for reaching them. If you are choosing a color, a size, a duration, or a shadow, the answer is a token, and this section says which one.Where the decisions are, and are not
Not every foundation carries the same weight of decision behind it. Knowing which is which tells you how much a change costs to propose.
A value with a decision behind it has a reason on its page and changing it is a
conversation. A value without one is still what renders, and still what to build to — but
proposing a change to it is a smaller conversation, because nothing is being overturned.
The token census
Two surfaces, two counts. Naming which one you mean matters.
The 244 on
theme.tokens, grouped by what they name:
Every value on this page and throughout Foundations is the light color scheme at
comfortable density. Titan ships a dark scheme and a compact density; neither carries a
design decision yet, and this documentation does not define them — see
TITAN-GAP-01.
The naming grammar
Token names are composed, not arbitrary. Six axes, in fixed order. Learning them means you can usually derive the name you need rather than search for it.background-error-alt is attribute + purpose + state. spacing-5 is attribute + level.
This grammar comes from Invoca’s design-token naming specification, not from reading
the shipped names. It is the baseline the design language is being built on.
- Primitive ramps —
color.blue.50. Attribute is the ramp name and level is the step. These are Tier 1 and never appear in component code. - Component tokens —
chip-success-tint,modal-width-lg. Prefixed by component rather than by attribute, and they sit outside this grammar by design. - Data visualisation —
categorical,sequential,divergingreuse the axes with their own vocabulary (compare,threshold,trendline).
Reaching a token
Three surfaces, one token — but they are not equal, and one of them is closed.Choosing where to look
Color
Surfaces, text, borders, icons, and the four statuses.
Typography
Eleven variant names, and why
h5 is smaller than body1.Space
The spacing scale, and choosing a step by role.
Elevation
Directional shadows and the z-index ladder.
Radius
Five corner values and when each applies.
Motion
Durations and easings, and what each is for.
Iconography
154 icons, four sizes, and the color tokens that pair with them.
Layout & grid
Breakpoints and page structure.
Accessibility
Which token pairings meet AA, measured.
Divergences
Where intent and code disagree, and which to follow.
Constraints
Retired
Known issues
Foundations overview: open issues
Divergences, open decisions, and undocumented gaps for Foundations overview.
Related
A generated map of which components consume which foundation does not exist yet.Why it works this way
Tokens are named for intent, not appearance.background-selected, not
background-light-blue. Appearance names become lies the moment a second mode exists —
and they were already lying to the person reading the code, who wants to know why the
surface is that color.
Decision effort went where identity lives. Color and type carry Invoca’s identity and
got the most attention: every value chosen, both modes resolved, contrast considered.
Motion and layout got the least. That is a defensible allocation, but it means the pages in
this section are not equally authoritative — and each one says which kind it is.