Foundations Overview

Foundational styles to use which will adapt to the brand being used, where necessary, and help designers and developers to work with the same base ingredients.

info

Chroma contains hundreds of tokens, many of which are available as matching variables in Figma and code. For a full index, see Utility styles/classes.

Colours	Palettes to create custom UIs using functional or tokenised branded colours
Typography	Pre-defined typography styles for headings etc.
Border Radius	Tokenised border radii to ensure consistency between design and code
Box Shadow	Tokenised box shadow options for consistency between design and code
Spacing	Spacing tokens to help when converting design to code
Layout	Grid system to help make responsive UIs