Skip to content
Site volume
Colourway

The MAKR Labs design system

Print it loud. Read it easy.

Poster type, process inks, comic lettering and a pile of wooden blocks you can throw around, all on one rule: the art never sits behind your words.

Tokens
655
Fixtures
133
Looks tested
80
Pages
157

Nine printed blocks stacked into the MAKR logo: M and A on top of K and R, with a cube, a cylinder and two flat blocks around them.

The one rule

Two layers, and the words always win

Everything Overprint prints sits on one of two layers. The art can be as loud as the volume allows; it just never gets between a reader and a sentence.

Reading layer

Flat plates, calm type, contrast that passes

Words, controls and data print on opaque plates in sanctioned pairs: WCAG 2.2 AA as the floor, the APCA lookup as the target. It looks the same at every volume, so a form never gets louder than its labels.

Expressive layer

Halftone, stickers, SFX and the ink field

The art lives beside, above or around the reading layer, never under it. The volume dial decides how much of it shows, from none at Quiet to the full poster at Rave.

The volume dial

One page, four volumes

The same card at Quiet, Studio, Press and Rave. The words do not move; only the ink does. Each frame holds its own volume, whatever your dial says.

  • Quiet

    Fernlight

    Fresh by noon

    Docs, forms, the legal bits. Flat and calm.

  • Studio

    Fernlight

    Fresh by noon

    The site default. Colour on art plates, one display moment.

  • Press

    Fernlight

    Fresh by noon

    Hero moments and covers. Halftone fields, the second ink.

  • Rave

    Fernlight

    Fresh by noon

    Launches and the 404. Everything, still legible.

Where to go

Start anywhere, it all prints the same

Start here

Get started

What Overprint is, the five principles, the install and the Next.js recipe, built from a consumer app that has to compile first.

Colour, type, space, motion

Foundations

Process inks with their letters and shapes, the papers, the type roles and voices, the dial from Quiet to Rave.

655 tokens

Tokens

Every --mk-* name with its value in the look you are reading, and its names in Tailwind, TypeScript and Swift.

133 fixtures

Components

The reading layer, live: controls, overlays, forms, layout, navigation, data, content and the brand pieces.

Expressive layer

Print, comic and 3D kits

Halftone, stickers and stamps; panels, balloons and SFX; the wooden blocks. None of it ever lands on a headline.

Built at build time

Generators

Open Graph cards, case-study covers from project data, printed photos and print-ready posters and one-pagers.

The evolved 2 × 2 in three options, at every size it prints, with its lockups, clear space and don'ts.

Turn every dial

Playground

Volume, colourway, paper, voice, second ink, contrast, motion and sound on a real page. Copy the look when you like it.

The fifteen rules

Legibility

Two layers, contrast, targets, calm motion. Each rule is a test the press check runs on every look.

Proof, not promises

Numbers you can check

The token pipeline measures every sanctioned pair in every look before a component exists; the press check then walks the rendered result.

colour pair checks across the 64 built-in looks
15,194
failures
0
looks the press check walks, a client colourway included
80
fixtures printed in each look
133

Colourways

Four sets of inks, one set of rules

Pick one in the header and this whole site reprints, the ink field beside this list included. Client colourways come from the helper and pass the same checks, no favours.

  • ProcessThe house set: magenta, aqua, red and key, with yellow for the one button.Default
  • Acid popHot pink and acid green, for when the brief says loud.
  • Electric coolElectric blue and violet, cold as a server room.
  • JewelEmerald, garnet and sapphire, polished for the fancy clients.