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
594
Fixtures
133
Looks tested
80
Pages
147

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, how to install it and the Next.js recipe, built from a consumer app that has to compile first.

Colour, type, volume, themes

Foundations

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

594 tokens

Tokens

Every --mk-* name with its value in the look you are reading, its Tailwind alias, TS path and Swift name.

133 fixtures

Components

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

Expressive layer

Print and comic kits

Halftone, stickers, stamps and tape; panels, balloons and SFX that never land on a headline.

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.

pair checks in the token report
15,194
failures
0
looks, every one tested
64
fixtures walked in each look
133

Colourways

Four sets of inks, one set of rules

Pick one in the header and this whole site reprints. 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.