08 / Mapu brand system
Graphic language
One geometric family, drawn from the map. Contours describe terrain, paths describe a route, milestones mark handovers, and nested zones describe what a family currently holds together. If a graphic element does none of these jobs, it does not belong.
Contours
The base texture. Always behind content, never over text.
Contours are set at 0.85–1.4 px with opacity between 22% and 52%, always in Classic Blue. They occupy the lower third of a surface and rise to the right. They never cross a column of text, and they never appear on more than one element in a viewport.
Devices
Four constructions, each with a fixed meaning.
A sequence of decisions, with the final point filled — the item leaving the system.
What is held jointly, what is being practised, what is already independent.
One row open at a time. Mapu never shows a family everything at once.
A single hairline that rises to the right, used to open a section.
Motion
Motion explains movement through the system. It never rewards or entertains.
900 ms, calm ease, once on entry
Contour draw
A contour draws in from left to right when a section first appears.
320 ms
Handover
When an item moves stage, it slides one column right — the same direction as the path.
140 ms
Reveal
Disclosure rows open with a height and opacity change only. No bounce, no spring.
Every animation in this system is disabled under prefers-reduced-motion: reduce, and each one is written so the finished state is the readable state. Nothing depends on having seen the transition.
Rules of use
Do
- Use contours to close a section, not to fill empty space
- Keep milestones on a single path — one route per view
- Let the geometry carry the meaning it was defined for
- Draw everything in Mid Blue, or in Deep Blue on light grounds
Don’t
- Rotate, mirror or repeat the contour field as a pattern fill
- Combine two devices in the same graphic
- Add blobs, gradients, glows or glassmorphic panels
- Animate anything that a family would see more than once a week