Skip to content
Site volume
Colourway

Get started

Principles

Five rules every Overprint decision comes back to, from the colour of a key to the volume of a launch.

  • Experimental
On this page

Overprint is loud on purpose and legible by construction. When two good ideas pull in different directions, these five decide which one wins. Each one is enforced somewhere: a component's API, a lint rule or a test in the press check.

1. Personality is the bar, legibility is the floor#

The system exists to make MAKR Labs look like nobody else: poster type, process inks, comic lettering, wooden blocks. It never trades that away for a safe, grey look. It also never ships something a reader struggles with. Every pair of inks that carries text passes WCAG 2.2 AA and the APCA target, every target is big enough to hit, and every page works with a keyboard and a screen reader.

Checked by

The token pipeline proves every colour pair in every look before a component exists; the press check walks every component in every look against the fifteen legibility rules.

2. The words always win#

Everything Overprint prints sits on one of two layers. The reading layer (words, controls, data) prints on flat, opaque plates. The expressive layer (halftone, stickers, SFX, the ink field, the blocks) sits beside, above, below or around a plate, and never under its words (D-B1). Section builds this into every page: children go on the plate, art goes in the art slot.

3. Colour is meaning#

Each Process ink stands for a line of work: key for Websites, red for Growth, aqua for Software, magenta for Custom apps, yellow for the one action (D-C1, D-C2). So no ink is used as decoration where it could be read as meaning, there is no red error and no green success, and every ink travels with its letter and its shape, so the meaning survives colour blindness and print.

4. One dial for the volume#

How loud a page prints is one setting, from Quiet to Rave (D-B2). Turning it up adds ink, texture, motion and comic energy to the art; the reading layer stays exactly the same. A page picks its volume, a hero may step one louder, and a visitor can turn the whole site down or up with the dial in the header.

5. Caused, then calm#

Motion answers something: a page arriving, a press, a scroll. It plays, then settles, within five seconds at the default volume (D-E3). Anything that loops has a pause key on the page, reduced motion is always honoured, and sound stays off until a visitor turns it on (D-H4). Words never move once they are on the page.

Where to go next#