Accepted
Colour
Why the palette looks the way it does
The Aleris colour palette is warm-shifted. Even the greys lean towards brown rather than blue. This is a deliberate choice. The brand promise — the present expert — requires everything we do to feel human and present, not institutional. Petrol gives medical credibility without becoming cold corporate blue. Orange is warm and action-oriented without becoming alarming red. Sand is calm and natural — not clinical white.
Three colour families, three roles. The palette communicates before a single letter is written.
The palette
Petrol — structure and trust
Petrol carries text, headings, navigation, and structural surfaces. It is the colour that says: we know what we are doing.
| Step | HEX | Role |
|---|---|---|
| petrol-500 | #004851 | Primary text, headings, navigation, header backgrounds |
| petrol-400 | #4F868E | Structure and accents. Large text only, from 18 pt or 14 pt bold. Not for body text — 4.09:1 on white |
| petrol-300 | #7FA9AE | Borders, dividers, decoration. Never text — 2.56:1 on white, 2.19:1 on sand-100 |
| petrol-200 | #ABC7C9 | Borders, inactive states |
| petrol-100 | #D9E1E2 | Tinted backgrounds, highlighted rows, tags |
Orange
Orange represents the warm, approachable and active side of Aleris.
While Petrol is the informational and rational frame for our brand, Orange is our emotional layer that drives attention and action.
Brand orange – making Aleris come alive
The orange gives our brand a vibrant, warm character, and its brightness serves as our highlighting feature. It's decorative as well as functional. Used in its softer tints, it can create calm and soothing spaces. At full brightness, it's an accent that commands attention and drives action.
Interactive orange – action and warmth
Interactive orange is used for primary actions in digital interfaces. It marks priority actions that can be taken right now, on primary buttons and controls. The deeper shade of our warm coral brand orange makes it easy to spot, even in the presence of Brand orange.
The ramp holds both roles. The boundary inside it runs two ways: brand against interactive, and print-and-digital against digital-only.
| Step | HEX | Role |
|---|---|---|
| orange-700 | #B23C0E | Interactive – hover/active on the primary interactive surface (the darker step). Digital only |
| orange-600 | #D14811 | Interactive – primary interactive surface (CTA fill), active states. Digital only |
| orange-500 | #F58C61 | Brand – accent, decorative, print. The brand orange |
| orange-400 | #FAAA8D | Brand – accent tint, backgrounds and surfaces. Print and digital. Never an interactive state |
| orange-300 | #FFBE9F | Brand – light accent backgrounds. Print and digital |
| orange-200 | #FBD1C0 | Brand – soft tint. Print and digital |
| orange-100 | #FDE8DF | Brand – lightest orange tone. Print and digital |
Sand — the surrounding layer
Sand is the page background. It creates the calm that everything else rests against. White is reserved for cards and surfaces — what is lifted up from the background.
| Step | HEX | Role |
|---|---|---|
| sand-100 | #F2ECE4 | Page background — pages someone reads |
| sand-50 | #FAF8F6 | Page background — surfaces someone works in |
| sand-300 | #E7CEB5 | Mid-sand |
| sand-500 | #D9B48F | Warm amber. Also = warning colour (context decides) |
Neutral tones
| Name | HEX | Role |
|---|---|---|
| gray-100 | #D7D2CB | Borders, dividers, inactive elements |
| gray-300 | #9E9281 | Mid-tone, warm grey |
| gray-500 | #585044 | Dark warm grey. Secondary text |
| White | #FFFFFF | Card and surface background. Never page background |
The renumber merged two older names into the scale: Slate is now gray-100, and Sand dark is now sand-500.
Physical environment: the domain's everyday language "warm white" and "light grey" are material descriptions, not new palette members — they map to sand-50 and gray-100 above. See workspace/decisions/decision-record-physical-interior-2026-08-06.md §3.
Pantone and CMYK
The print values are constant — the same values regardless of printer or substrate. Physical documents how to specify for different materials.
Primary colours:
| Colour | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| Petrol | 316 C/U | C98 M48 Y49 K46 | 0, 72, 81 | #004851 |
| Orange | 2024 C/U | C0 M56 Y62 K0 | 245, 140, 97 | #F58C61 |
| Sand | N/A | C6 M7 Y11 K0 | 242, 236, 228 | #F2ECE4 |
Secondary colours — petrol:
| Step | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| petrol-400 | 5483 C/U | C70 M31 Y37 K12 | 79, 134, 142 | #4F868E |
| petrol-300 | 5493 C/U | C54 M21 Y30 K3 | 127, 169, 174 | #7FA9AE |
| petrol-200 | 5513 C/U | C38 M12 Y21 K0 | 171, 199, 201 | #ABC7C9 |
Secondary colours — orange:
| Step | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| orange-700 | Digital only | Digital only | 178, 60, 14 | #B23C0E |
| orange-600 | Digital only | Digital only | 209, 72, 17 | #D14811 |
| orange-400 | 2022 C/U | C0 M38 Y40 K0 | 250, 170, 141 | #FAAA8D |
| orange-300 | – | not yet built | 255, 190, 159 | #FFBE9F |
| orange-200 | – | C0 M24 Y23 K0 | 251, 209, 192 | #FBD1C0 |
Not every step has print values. Interactive orange – orange-600 and orange-700 – exists to hold contrast on screen, so it has no print counterpart by design. Where a Pantone cell is empty, no Pantone match exists at that tint. In print, the brand orange is orange-500.
Two utility notes, drafted by Claude 2026-07-30, correct on sight. The empty Pantone cells above are marked differently from the legacy teal further down this page: teal has a Pantone match that is simply unconfirmed and awaiting a press check, while orange-300 and orange-200 have no match to find. And orange-300's CMYK reads "not yet built" rather than "–", because unlike a Pantone match a CMYK breakdown is derivable from the hex and validated at press: it is a value to produce, not an absence to record. It has not been computed here, because producing a print value is a press decision rather than an arithmetic one.
Secondary colours — sand:
| Step | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| sand-500 | 727 C/U | C0 M18 Y36 K15 | 217, 180, 143 | #D9B48F |
| sand-300 | 2309 C/U | C0 M11 Y22 K9 | 231, 206, 181 | #E7CEB5 |
Neutral:
| Colour | Pantone | CMYK | sRGB | HEX |
|---|---|---|---|---|
| gray-100 | Warm Gray 1 C/U | C0 M2 Y5 K16 | 215, 210, 203 | #D7D2CB |
Gradients
Gradients carry vibrancy and character where solid petrol or orange would feel heavy. They belong on background surfaces and in visual elements — and the petrol gradient may also fill display type.
| Gradient | Dark stop | Light stop | Use |
|---|---|---|---|
| Petrol | --color-petrol-500 |
--color-petrol-400 |
Linear or radial, max two steps |
| Orange | --color-orange-500 |
--color-orange-300 |
Linear or radial, max two steps |
(Stops named rather than restated, 2026-09-05, per constitutional/tokens-are-canonical.md § 1. They were hex here, which is the shape that rule forbids in a reference table.)
Rules: low-contrast transitions; avoid in charts where flat colours give better clarity; WCAG contrast against text must be met; never distract or dominate.
The petrol gradient on display type
(Ruled 2026-09-05, Torfinn. Prose below drafted by Claude — the rule is his, the wording is a draft.)
The petrol gradient may fill h1 and h2. No other gradient may fill text, and no smaller type may carry one.
Why h1 and h2 and not further down. Two limits, and they are not the same limit. The outer one is measured: a gradient's lightest stop is what has to clear contrast, and petrol's light stop is --color-petrol-400, which reads 3.49:1 on sand-100, 3.86:1 on sand-50 and 4.09:1 on white. That clears the 3:1 floor WCAG sets for large text and clears nothing below it, so no gradient can ever fill body text, a label, or a caption. WCAG counts anything from 24px as large, which would admit h3 at 27px. The rule stops at h2 by choice, not by measurement — a gradient is a device for the one line that carries the page, and it stops meaning that as soon as it appears three times.
Gradients are never used on icons. An icon carries meaning by its shape at small size, and a gradient across it costs contrast where there is least room for it — an icon is a non-text graphic and clears the same 3:1 floor a display heading does, on a form a tenth the size. Icons take a single colour, and --color-petrol-400 is not one of the colours available to them. Reopen this only with a rendered measurement at the sizes icons are actually used.
No cap on how many things carry a gradient. Consistency within a surface is a design judgement, not a counted rule; the corpus does not set a number and should not be read as implying one.
The orange gradient is never text. Its light stop is --color-orange-300, at 1.36:1 on sand-100. It fails the large-text floor by a wide margin on every Aleris ground, so the restriction is arithmetic rather than preference.
Both stops of a gradient are the foreground. Read a gradient by its worst stop, never its average and never its darkest — a reading that passes on the first stop and fails on the last has not passed. The same applies to a gradient used as a ground: what sits on it is measured against the stop that gives the least contrast, not against the colour the block appears to be.
Status colours
Status colours communicate state — never decoration. They are used only when something has happened, is happening, or needs attention.
| Status | HEX | Role |
|---|---|---|
| Error | #C14444 | Validation errors, destructive actions |
| Warning | #D9B48F | Attention states (= sand-500 – context distinguishes them) |
| Confirmation | #4F866E | Completed, approved. Large text or icon only — 4.23:1 on white, and never carry the state by colour alone |
| Information | #004851 | Informative messages (= petrol — info is neutral brand communication) |
The warning colour shares its HEX value with sand-500. This is deliberate – in a status context it reads as warning, in a background context as warm sand. The ambiguity is resolved by context, not by adding another colour.
Hard rules
Page background is sand, never white. White is surfaces lifted off the background — cards, modals, input fields. The difference creates the visual hierarchy that lets the page breathe. Sand for the ground, white for content surfaces.
One primary button per surface. Primary buttons can have two visual designs depending on context. They are either orange on light surfaces or white on dark surfaces. We never have two primary buttons on the same surface, because that forces the user to choose between two equally strong signals. Use secondary buttons or text links for other options.
Colour never carries meaning alone. The rule is constitutional – see constitutional/accessibility-is-foundational.md. It matters more for this palette than for most, because our colours are all warm: under red-green colour blindness they collapse onto a single yellow-khaki band, and hue stops distinguishing anything. Error red and success green become near-identical, so two states that mean opposite things look the same. Colour blindness is not the only case. Hue is also lost in ordinary reading conditions, for people with full colour vision – a phone in sunlight, a dimmed screen, a greyscale printout, an ageing lens. And colour has to be matched against a legend, which a worried or unwell reader has the least capacity to do. Text and icons carry their meaning with them.
(Retired 2026-08-11. This rule used to read "No dark mode" — light interfaces only, on the grounds that care products need trust conventions light environments carry. It's retired because it can't stand: respecting a user's local/personal display settings — dark mode, high contrast, dynamic text size — is a legal requirement, the same class of obligation as the WCAG floors elsewhere on this page, not a brand preference to override. A positive rule covering how Aleris presents in dark mode is pending and will replace this note; until then, no hard constraint governs this.)
Teal is legacy, not retired. Teal (formerly called "turquoise") is a named palette colour at legacy tier. Petrol is the primary in every market, including Norway. Teal is acknowledged as Aleris history and kept in the palette because it remains strongly present in Norway — where the move to petrol has been slow and teal still appears in ways that don't match the current profile. See Legacy colours below.
Cream does not exist. Replaced by sand-50 (#FAF8F6). Use sand-50 for surfaces someone works in (workspaces, tools) and sand-100 (#F2ECE4) for pages someone reads (landing pages, patient material).
Never use arbitrary HEX values. Every colour in the palette has a purpose and a name. Introducing your own shades — "almost petrol", "a slightly lighter orange" — breaks the consistency. The palette is the brand. (The legacy tier below is the one named exception: teal is part of the palette, not an arbitrary colour.)
Legacy colours
Teal (formerly called "turquoise") is the former Aleris primary colour. It is not retired — it sits at a legacy tier: petrol is now the primary across every market, and teal is kept in the palette for a transitional period, acknowledged as part of Aleris's visual history.
Teal's status is the same everywhere — legacy, not primary. What differs by market is how strongly it lingers in the real world:
| Market | Teal in practice |
|---|---|
| Norway | Strong lingering presence — heavy in physical environments (signage, interiors) and still used in ways that contradict the current profile. The move to petrol has been slow; teal is kept largely to respect this attachment while the transition continues. |
| Sweden | Faint legacy trace; new work uses the core palette. |
| Denmark | Faint legacy trace; new work uses the core palette. |
| Colour | HEX | sRGB | CMYK | Pantone | Tier |
|---|---|---|---|---|---|
| Teal | #00C6B2 | 0, 198, 178 | C100 M0 Y10 K22 (computed — validate at press) | To match at press (unconfirmed; a teal in this range sits near Pantone 326 / 3262 C) | Legacy |
Handling — replace on touch. New work in every market uses petrol, sand, and orange; teal is not specified for new work. Existing teal is replaced with the core palette when a surface, asset, or template is next updated — there is no campaign to remove it ahead of that, and in the meantime it is treated as heritage, not scrubbed reactively. Most of what remains is in Norway.
Physical environment: "on touch" is read narrowly — only the surface actually being renovated counts as touched. Signage is the deliberate exception: the whole signage programme is the unit of touch, not the individual sign, so a single sign replaced spontaneously reuses the existing design rather than introducing petrol in isolation and creating an unplanned mixed style. See workspace/decisions/decision-record-physical-interior-2026-08-06.md §4.
Accessibility
WCAG AA requires 4.5:1 contrast for normal text and 3.0:1 for large text (≥18pt or ≥14pt bold) and UI components.
Strong pairs
| Pair | Contrast | AA text | AA large text |
|---|---|---|---|
| petrol-500 on sand-100 | 8.75:1 | ✅ | ✅ |
| petrol-500 on sand-50 | 9.69:1 | ✅ | ✅ |
| petrol-500 on white | 10.27:1 | ✅ | ✅ |
| White on petrol-500 | 10.27:1 | ✅ | ✅ |
| gray-500 on sand-100 | 6.76:1 | ✅ | ✅ |
| gray-500 on white | 7.94:1 | ✅ | ✅ |
| White on orange-600 | 4.52:1 | ✅ | ✅ |
| White on orange-700 | 5.92:1 | ✅ | ✅ |
| petrol-500 on petrol-100 | 7.73:1 | ✅ | ✅ |
petrol-500 on sand or white is the standard pair. It clears every threshold with a good margin.
Pairs that require judgement
| Pair | Contrast | AA text | AA large text | Guidance |
|---|---|---|---|---|
| petrol-500 on orange-500 | 4.30:1 | ❌ | ✅ | Works for large text and UI components. No longer the recommended button |
| gray-300 on white | 3.05:1 | ❌ | ✅ | Large text only. Not for body text |
| gray-300 on sand-100 | 2.60:1 | ❌ | ❌ | Decoration only |
| petrol-300 on sand-100 | 2.19:1 | ❌ | ❌ | Decoration only |
| Confirmation (#4F866E) on white | 4.23:1 | ❌ | ✅ | Close to AA — always complement with an icon |
| Warning (#D9B48F) on white | 1.93:1 | ❌ | ❌ | Never as a text colour. Use as border or background with petrol text |
Figure-ground: a fill against its surface
WCAG 1.4.11 requires 3:1 between a component and the surface behind it.
| Pair | Contrast | |
|---|---|---|
| orange-600 on sand-100 | 3.85:1 | ✅ figure-ground fine |
| orange-600 on petrol-500 | 2.27:1 | ❌ never – this is why the primary button inverts on petrol |
Retired
| Pair | Contrast | |
|---|---|---|
| White on orange-500 | 2.38:1 | the production failure this supersede removes |
The interactive orange
White text on the interactive orange meets accessibility requirements. Interactive orange (#D14811) with white text gives 4.52:1. The minimum-size workaround this page previously described is no longer needed, and petrol text on orange is no longer the recommended button.
An orange fill is never placed on a petrol surface. Interactive orange on petrol gives 2.27:1, below the 3:1 that WCAG 1.4.11 requires between a component and its background.
The colour is constant. The treatment follows the surface. On light surfaces – sand, sand 50, white – the primary button is an interactive orange fill with white text. On petrol it inverts to a white fill with petrol text.
Both variants darken on hover. On a light surface the primary button darkens to #B23C0E and white text rises to 5.92:1. The inverted button already sits at the palette's highest contrast, so darkening lowers it: the fill moves to a petrol tint (#D9E1E2) at 7.73:1, a visible change that stays well above the floor. This replaces the earlier rule that hover always lightens, which could not hold – under white text a lighter fill always reduces contrast.
Why colour cannot carry meaning on its own
Using colour as the only carrier of information fails WCAG 1.4.1. That is a Level A criterion – the lowest conformance bar, below everything else on this page.
For this palette the problem is specific. Every Aleris colour is warm, and warm colours converge under red-green colour blindness. An independent simulation of deuteranopia and protanopia (Machado 2009) puts the whole palette onto a single yellow-khaki band, where hue no longer distinguishes anything. The status pair is the worst case: error red (#C14444) and success green (#4F866E) sit ΔE 76.9 apart in normal vision and ΔE 14.6 apart under protanopia, and success stops reading as green at all. Two states that mean opposite things become near-identical.
Around 8% of men have red-green colour blindness, but the reasons colour fails are wider than that. Hue is also lost in ordinary reading conditions, by people with full colour vision: a phone screen in sunlight, a device dimmed for battery or for night, a page printed or photocopied in greyscale, an older reader whose lens has yellowed. Most of our traffic is mobile, so these are the normal conditions rather than the edge cases. And colour has to be matched against a legend held in memory, which is what a worried, tired or unwell reader has least of.
This is a requirement about difference. Pairing colour with an icon is not enough on its own if the icons do not tell the states apart – seeing that something has a state is not the same as knowing which state it is. Error and success must be distinguishable from each other without colour.
Contextual: how the palette adapts
The palette is constant. The composition is contextual.
A landing page for patients uses sand generously, petrol as the text colour, and orange as an occasional accent. The feel is calm and accessible. A clinical interface for staff compresses the palette — petrol takes more space, sand recedes, information density increases. A printed patient brochure can give sand a dominant role to create the calm the format allows.
Same colours, different composition. What governs the composition is the recipient's emotional mode, the conditions of the channel, and the nature of the content. See Emotional Mode as a Design Entry Point and Constant and Contextual for the framework.
Baseline (digital), Communication, and Physical document how the composition is applied in their context.
Quick test
Before you make a colour decision:
- Is the colour in the palette? If not — don't use it. Never introduce your own shades.
- Are you using the colour in the right role? Petrol for structure, orange for action, sand for background, status only for state.
- Does the combination meet the accessibility requirements? Check the contrast table above, and check the second carrier – the colour-alone rule is constitutional, see
constitutional/accessibility-is-foundational.md.
The palette communicates before a single letter is written. Petrol, sand, and orange — in the right composition, in the right context — are Aleris. Swapping them out, mixing in your own shades, or ignoring their roles doesn't make the material more creative. It makes it less recognisable.