Colour
Accepted
Three families, three roles: petrol carries structure and trust, orange draws attention and action, and sand is the calm everything rests on.
- Sand · the ground under everything
- Petrol · text and structure
- Orange · the action you can take now
Why it looks like this
The palette is warm on purpose. The Present Expert has to feel human and present, not institutional, so even the greys lean towards brown rather than blue. Petrol gives medical credibility without turning into cold corporate blue, orange is warm and active without becoming an alarming red, and sand is calm and natural rather than clinical white.
The colours stay the same; how they are composed changes. A landing page for patients uses sand generously, petrol for text and orange as an occasional accent. A clinical interface for staff gives petrol more room and lets sand recede. A printed brochure can let sand dominate, because the format allows the calm.
What never changes
The background is a light sand that everything lives on top of
Cards and sections can have different colours, but they are all situated on sand.
Cards are white, not sand
Sand on a card inverts the hierarchy. On a white section, a white card is separated by its border and shadow.
One primary action per screen, in interactive orange
Two primary buttons force the reader to choose between two equally strong signals; everything else is a secondary button or a text link.
Colour never carries meaning on its own
Every Aleris colour is warm, and under red–green colour blindness they collapse onto one yellow-khaki band, so error and success can look the same. A word or an icon carries the meaning.
Only the named palette colours are used
"Almost petrol" is not a colour; the palette is the brand.
How to apply it
Digital
Pages someone reads sit on sand-100, and surfaces someone works in sit on sand-50. A section on top of the sand can be white, light petrol, light orange or, once on a page, petrol.
The primary action is interactive orange with white text on light surfaces. On petrol it turns white with petrol text. Both darken on hover.
The print values are the same whatever the printer or the paper. In print, the brand orange is orange-500: interactive orange exists to hold contrast on screen and has no print value. Where the table has no Pantone match, there is none to find.
The values
petrol
- petrol-100#d9e1e2
- petrol-200#abc7c9
- petrol-300#7fa9ae
- petrol-400#4f868e
- petrol-450#0f6b73
- petrol-500#004851
- petrol-700#003238
sand
- sand-50#faf8f6
- sand-100#f2ece4
- sand-300#e7ceb5
- sand-500#d9b48f
orange
- orange-100#fde8df
- orange-200#fbd1c0
- orange-300#ffbe9f
- orange-400#faaa8d
- orange-500#f58c61
- orange-600#d14811
- orange-700#b23c0e
gray
- gray-100#d7d2cb
- gray-300#9e9281
- gray-500#585044
white
- white#ffffff
legacy
- legacy-teal#00c6b2
| Token | Value | Used for |
|---|---|---|
--surface-page | #f2ece4 | Communicative page background |
--surface-page-instrumental | #faf8f6 | Instrumental page background |
--surface-card | #ffffff | Card and panel backgrounds |
--surface-elevated | #ffffff | Dropdowns, popovers, tooltips |
--surface-overlay | #ffffff | Modal and dialog backgrounds |
--surface-subtle-warm | #fde8df | Warm tint under content that carries its own contrast (table row hover) |
--surface-section-white | #ffffff | Full-width content section on a communicative page |
--surface-section-cold | #d9e1e2 | Full-width light petrol section |
--surface-section-warm | #ffbe9f | Full-width light orange section |
--surface-section-strong | #004851 | The one strong section on a page |
--text-error | #c14444 | Error text — field validation, destructive-action warnings |
What good looks like
Do
White action on petrol
The primary action inverts on a petrol surface: white fill, petrol text, 10.27:1.
Don't
Orange action on petrol
Orange on petrol reads 2.27:1, below the 3:1 a component needs against its surface.
Do
Sand page, white card
The ground recedes and the content comes forward.
Don't
White page, sand card
Ground and layer swap places, and the hierarchy turns over.
Do
Error and success told apart by word and icon
A reader with red–green colour blindness, or a phone in sunlight, still sees which is which.
Don't
A red and a green dot, and nothing else
Under protanopia the two sit so close that they read as the same state.
Asked about colour
- Can I put an orange button on a petrol background?
- Can the page be white?
- How many orange buttons can a screen have?
- Can I use the old teal?
- Can I use gradients?
Creating with colour
How it is checked
- Button text meets AA against its own fill
- Button fills are perceivable against the surfaces they sit on
- Token conformance: no hex outside the token set
- Filled button variants declare their own active fill
- The focus ring is perceivable on both its grounds
- Form input tokens are perceivable against their surfaces
- Error text clears AA on every ground the rule permits
- Status and goal colours are perceivable as boundary indicators
- Page surfaces carry readable text
- Chart-pair tokens are distinguishable from each other
- Gradient stops carry the rule about what a gradient may fill
- Surface temperature does not reach the type scale
- A colour documented for text use is readable as text (accessibility-is-foundational)
- Colour.md and the token file agree about what may carry text
- Semantic text aliases resolve to a colour that may carry text
- The corpus's own surfaces use the breakpoints they declare
- Gradient grounds hold their text at every stop
Read from data-products/tokens/tokens.test.ts, lib/gradient-contrast.test.ts at build.
Source and status
Acceptedv1
- Last verified
- 2026-08-11
- Owner
- Not recorded
- Depends on
- constitutional/accessibility-is-foundational
- Read by agents as
- /explore/colour.md
principles/colour.mdAcceptedconstitutional/colour-is-the-aleris-palette.mdAccepteddata-products/tokens/aleris-tokens.cssbaseline/BASELINE.mdAccepted