Skip to main content

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.

ColoursPalettes to create custom UIs using functional or tokenised branded colours
TypographyPre-defined typography styles for headings etc.
Border RadiusTokenised border radii to ensure consistency between design and code
Box ShadowTokenised box shadow options for consistency between design and code
SpacingSpacing tokens to help when converting design to code
Grid(opens in new window)Grid system to help make responsive UIs