Skip to content

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.

Primary

Full colour. White, cool neutral and Light Blue grounds.

SVG · 480 KB · mapu-logo-primary.svg

Download SVG
Reversed

Supplied on its own deep-blue plate. Dark grounds.

SVG · 480 KB · mapu-logo-reversed.svg

Download SVG
Grayscale

Single-process print, fax, engraving, documents.

SVG · 480 KB · mapu-logo-grayscale.svg

Download SVG

Design 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

All Mapu colours with hex, RGB and OKLCH values
NameHEXRGBOKLCH
Mapu Deep Blue#404B8064, 75, 1280.406 0.079 275
Mapu Mid Blue#7B88B7123, 136, 1830.615 0.066 275
Mapu Light Blue#B4C1E3180, 193, 2270.799 0.045 273
Muted Blue Ink#525C9382, 92, 1470.472 0.079 277
Pure White#FFFFFF255, 255, 2551 0 0
Cool Neutral#F6F8FC246, 248, 2520.977 0.005 270
Light Blue Tint#E4EAF7228, 234, 2470.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

  1. 01Draw a symbol-only file and a horizontal lockup, then re-test both at small sizes.
  2. 02Test the logo at 29 px, embroidered, and as a single-colour stencil before sign-off.
  3. 03Confirm the Light Blue tint used for large panels, so it stays clearly part of the same blue family.
  4. 04Run the voice principles against real product copy with a parent and a teenager present.
  5. 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.