Styles
Shared foundations for layout, colour, typography, text case, spacing and form fields.
Start with semantic tokens and shared rules before choosing individual values. Each foundation page pairs the design principle with implementation details.
Tokens
The custom properties for colour, type, spacing and radii that every component is built on.
View tokensColour
The palette: semantic colour tokens and the primitive ramp they resolve to, with hex values.
View colourLayout
How to structure a page with the width container, main wrapper and grid.
View layoutSpacing
The spacing scale and how to apply it with tokens instead of hard-coded values.
View spacingTypography
The Figtree typeface, the type scale and the text utility classes.
View typographyText case
Use sentence case for all interface text, and keep capitals for the words that need them.
View text caseForm fields
Shared anatomy, content, states and validation rules for every form control.
View form fields