Foundations / ColourOpen in Figma
Colour
Three colours carry the brand. Every other colour has one job. Click a colour to copy its hex.
House colours
Text and lines
Page and surfaces
Accents and alerts
Text on colour
How readable each pairing is. 4.5 or more works for body text; 3 or more for large text and icons.
Main button2.5 · large text only
Navy button9.4
Record header10.4
Positive6.5
Pending3.1 · add an icon
Negative3.8
Using colour
| Rule | Detail |
|---|---|
| The page colour changes by screen | Page, Page light, Pale green or Disabled, chosen to break a run of identical screens |
| The main button is Antz green | Teal ink is allowed on the main button to vary a run of screens |
| Selected means Teal ink | Selected chips, pills and choice tiles |
| Colour is never the only signal | States change shape or icon as well |
| No raw colours | Every colour on screen is one of the colours on this page |