13 / Mapu brand system
Download centre and next steps
The supplied logo files, plus everything else the system defines as text you can copy. What is finished is marked finished, and what is still a proposed direction is marked as such — including the logo.
Logo files
The three SVGs supplied for the current proposed direction. Use them as delivered — no redraw, recolour or crop.
Full colour. White, cool neutral and Light Blue grounds.
SVG · 480 KB · mapu-logo-primary.svg
Download SVGSupplied on its own deep-blue plate. Dark grounds.
SVG · 480 KB · mapu-logo-reversed.svg
Download SVGSingle-process print, fax, engraving, documents.
SVG · 480 KB · mapu-logo-grayscale.svg
Download SVGDesign tokens
Copy directly into a stylesheet. Names match the ones used throughout this document.
:root {
/* Core */
--brand-primary: #404B80; /* Mapu Deep Blue */
--brand-secondary: #7B88B7; /* Mapu Mid Blue */
--brand-light: #B4C1E3; /* Mapu Light Blue */
/* Neutrals */
--brand-tint: #E4EAF7;
--paper: #F6F8FC;
--pure-white: #FFFFFF;
/* Semantic roles */
--page: var(--paper);
--surface: var(--pure-white);
--ink: var(--brand-primary);
--ink-muted: #525C93;
--action: var(--brand-primary);
--brand-on-primary: var(--pure-white);
--hairline: rgb(64 75 128 / 0.18);
}Palette as text
| Name | HEX | RGB | OKLCH |
|---|---|---|---|
| Mapu Deep Blue | #404B80 | 64, 75, 128 | 0.406 0.079 275 |
| Mapu Mid Blue | #7B88B7 | 123, 136, 183 | 0.615 0.066 275 |
| Mapu Light Blue | #B4C1E3 | 180, 193, 227 | 0.799 0.045 273 |
| Muted Blue Ink | #525C93 | 82, 92, 147 | 0.472 0.079 277 |
| Pure White | #FFFFFF | 255, 255, 255 | 1 0 0 |
| Cool Neutral | #F6F8FC | 246, 248, 252 | 0.977 0.005 270 |
| Light Blue Tint | #E4EAF7 | 228, 234, 247 | 0.930 0.019 272 |
Asset status
Honest status, so nothing unfinished is presented as final.
Logo — primary SVG
Proposed direction
Supplied artwork, used as delivered. Optical corrections still pending.
Logo — reversed SVG
Proposed direction
Carries its own deep-blue plate; place it as a panel on dark grounds.
Logo — grayscale SVG
Proposed direction
For single-process print and scanned documents.
Symbol-only file
Missing
Needed for favicons, avatars and anything below 96 px. Not yet drawn.
Horizontal lockup
Missing
Only the square stacked artwork exists. Needed for wide headers.
Colour tokens
Ready
Values fixed and contrast-verified.
Type scale
Ready
Newsreader and Manrope, both licensed for web use.
Contour system
Ready
Drawn as code; no static files required.
Photography
Reference only
Direction images. Not licensed for publication.
Localisation
The system is built so Romanian can be layered in without redrawing anything.
Built in already
- All copy lives in content modules, separate from layout.
- Newsreader and Manrope both cover ă â î ș ț in every weight used.
- Headings allow up to 25% expansion without reflowing a section.
- No text is set inside an image or an SVG path.
- Dates and times are formatted, never hard-coded into sentences.
To resolve for Romanian
- Choose the register for addressing a parent (tu / dumneavoastră) and hold it everywhere.
- “Mapu” keeps its spelling and pronunciation; it is never translated.
- Foundation, Hearth and Navigator need agreed Romanian names, decided once.
- Re-test line lengths on the two longest headings after translation.
Open questions for stage two
- 01Draw a symbol-only file and a horizontal lockup, then re-test both at small sizes.
- 02Test the logo at 29 px, embroidered, and as a single-colour stencil before sign-off.
- 03Confirm the Light Blue tint used for large panels, so it stays clearly part of the same blue family.
- 04Run the voice principles against real product copy with a parent and a teenager present.
- 05Define the data and consent policy in the same detail as the visual system.
Closing
Stage one
Built to become unnecessary.
This document defines the strategy, the identity and the behaviour of the Mapu system as it stands at the end of stage one. It is complete enough to design and build against, and explicit about what still needs deciding.