06 / Mapu brand system
Colour system
Three blues taken directly from the logo, held against a mostly white page. Deep Blue carries trust, Mid Blue carries cooperation, Light Blue carries space. Every value below is defined once as a token, so no screen ever invents its own version of a Mapu colour.
The core palette
Three colours, three jobs. Nothing else is a Mapu colour.
Mapu Deep Blue
Trust, structure and primary communication — brand mark, primary buttons, key headings, dark sections
- HEX
- #404B80
- RGB
- 64, 75, 128
- OKLCH
- 0.406 0.079 275
- Token
- --brand-primary
Mapu Mid Blue
Cooperation, transition and supporting elements — diagrams, secondary graphics, inactive states
- HEX
- #7B88B7
- RGB
- 123, 136, 183
- OKLCH
- 0.615 0.066 275
- Token
- --brand-secondary
Mapu Light Blue
Calm, openness and shared space — cards, informational panels, large light surfaces
- HEX
- #B4C1E3
- RGB
- 180, 193, 227
- OKLCH
- 0.799 0.045 273
- Token
- --brand-light
The anchor
Deep Blue is the single fixed point of the system.
Mapu Deep Blue · primary brand colour
#404B80
Used at full strength for the mark, primary actions, important headings and dark presentation sections. Never diluted below legibility, never used as a large flat field behind long body copy.
Pure White
Primary page background, content surfaces, text on Deep Blue, negative space
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
- OKLCH
- 1 0 0
- Token
- --surface
Cool Neutral
The one permitted neutral — long page backgrounds, harmonised with Light Blue
- HEX
- #F6F8FC
- RGB
- 246, 248, 252
- OKLCH
- 0.977 0.005 270
- Token
- --page
Neutrals
White leads. One cool neutral is permitted, and it must harmonise with Light Blue.
Pure White
Primary page background, content surfaces, text on Deep Blue, negative space
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
- OKLCH
- 1 0 0
- Token
- --surface
Cool Neutral
The one permitted neutral — long page backgrounds, harmonised with Light Blue
- HEX
- #F6F8FC
- RGB
- 246, 248, 252
- OKLCH
- 0.977 0.005 270
- Token
- --page
Light Blue Tint
Softened Light Blue for large panels where secondary text must stay legible
- HEX
- #E4EAF7
- RGB
- 228, 234, 247
- OKLCH
- 0.930 0.019 272
- Token
- --brand-tint
Recommended combinations
Four pairings cover almost every screen and page.
Deep Blue on white
The default for headings, body copy and primary buttons reversed to white text.
Deep Blue on Light Blue
Informational panels and cards. Text stays Deep Blue — never white, never Mid Blue.
White on Deep Blue
Dark hero and presentation sections, primary buttons, the reversed logo plate.
Mid Blue as graphic
Diagrams, bars, decorative planes and inactive states — carrying shape, not text.
Secondary text
Grey is not in the palette. Secondary text is a Deep Blue tint.
Muted Blue Ink
Secondary text — a Deep Blue tint, never a neutral grey
- HEX
- #525C93
- RGB
- 82, 92, 147
- OKLCH
- 0.472 0.079 277
- Token
- --ink-muted
A neutral grey on a blue field fails contrast and makes the blue look dirty. Muted Blue Ink is derived from Deep Blue, so it sits correctly on white, the cool neutral and the Light Blue tint. On full-strength Light Blue, secondary text steps back up to Deep Blue.
Secondary text
Primary text
Secondary text
Primary text
Secondary text
Primary text
Secondary text
Primary text
Semantic roles
Design and code refer to the role, never to the raw colour.
| Role | Token | Value | Used for |
|---|---|---|---|
| Primary brand / action | --brand-primary | #404B80 | Buttons, links, focus, active states |
| Secondary brand | --brand-secondary | #7B88B7 | Diagrams, decorative blocks, supporting states |
| Light brand surface | --brand-light | #B4C1E3 | Cards, informational panels, highlights |
| On primary | --brand-on-primary | #FFFFFF | Text and icons on Deep Blue |
| Primary text | --ink | #404B80 | Headings and body copy |
| Secondary text | --ink-muted | #525C93 | Support copy, captions — on white or neutral only |
| Page background | --page | #F6F8FC | Long-page canvas |
| Content surface | --surface | #FFFFFF | Cards, forms, product surfaces |
| Soft panel | --brand-tint | #E4EAF7 | Large calm panels and section bands |
| Border and divider | --hairline | #404B80 @ 18% | Hairlines and soft dividers |
Accessible text pairings
Every combination below is measured, not estimated. Minimum accepted is 4.5:1.
Deep Blue on White
8.28:1 · AAA
Deep Blue on Cool Neutral
7.79:1 · AAA
Deep Blue on Light Blue
4.60:1 · AA
Deep Blue on Light Blue Tint
6.87:1 · AAA
White on Deep Blue
8.28:1 · AAA
Muted Blue Ink on White
6.34:1 · AAA (body)
Muted Blue Ink on Cool Neutral
5.97:1 · AAA (body)
Muted Blue Ink on Light Blue Tint
5.26:1 · AA
2.38:1 · fails
Blue on blue. Mid Blue is a graphic colour, not a text field.
3.47:1 · fails
Fails for body copy. White text belongs on Deep Blue only.
3.47:1 · fails
Never set small body copy in Mid Blue on white.
Proportion
Flexible guidance, not a formula: white leads, Deep Blue arrives last.
60%
White and neutral
The eye rests here
25%
Mapu Light Blue
Cards, panels, calm surfaces
10%
Mapu Mid Blue
Diagrams and supporting graphics
5%
Mapu Deep Blue
Emphasis, action and identity
Correct and incorrect use
Correct
Review your Foundation agreement
Scheduled for Sunday at 18:00.
White surface, Deep Blue text, a single Deep Blue action with white text.
Incorrect
Review your Foundation agreement
Scheduled for Sunday at 18:00.
Mid Blue used as a text field, blue-on-blue copy, and an action that fails contrast.
Do
- Let Deep Blue arrive in small, deliberate amounts
- Use Light Blue as full-width bands to separate sections
- Keep Deep Blue for text and for dark, high-contrast surfaces
- Reference tokens, never hex values, in components
Don’t
- Tint or shade the three blues to create new brand colours
- Set body copy in Mid Blue, or any text on a Mid Blue field
- Introduce a red, amber or green status colour into product screens
- Decorate every section with all three blues at once