Overprint is the MAKR Labs design system: poster type on Anybody's width axis, process inks, comic lettering, a pile of wooden blocks and a press check that refuses to let any of it sit behind your words. It grew out of the poster look of MAX//OS and now prints makrlabs.dev. This site is built with it, so every page you read is also a test.
The one rule
Art never sits behind words. Everything else, the colour, the halftone, the SFX, the blocks, is allowed as long as that holds.
Five packages#
| Package | What it carries |
|---|---|
@maxgrits/overprint-tokens | Every --mk-* token as CSS, TS, JSON, DTCG and Tailwind's @theme inline; the colour maths |
@maxgrits/overprint-fonts | The four families, self-hosted, with the Next.js module |
@maxgrits/overprint-react | The CSS foundation in cascade layers, the reading-layer components, the print and comic kits, motion and sound |
@maxgrits/overprint-three | The block model, its SVG and CSS fidelities and the GL pile behind a gate |
@maxgrits/overprint-generators | OG cards, case-study covers, photo plates and print sheets, built at build time |
The two layers#
The reading layer is the words, the controls and the data. It prints on flat, opaque plates in sanctioned colour pairs, and it looks the same at every volume: a form never gets louder than its labels.
The expressive layer is the art: halftone, grain, stickers, stamps, tape, comic SFX, the ink field and the blocks. It sits beside, above or around the reading layer, never under it. The press check walks every text box on every look and fails the build if a halftone dot sneaks underneath.
The volume dial#
One dial runs from Quiet to Rave and moves only the expressive layer: how much saturated ink a screen may hold, how many hues, how much texture, how big the display type gets, how much things tilt and move.
| Volume | Used for | Colour budget | Chroma cap | Ink hues | Texture | Second ink | Motion | Tilt |
|---|---|---|---|---|---|---|---|---|
| Quiet | docs, forms, legal, long-form, app work views | 10 % | 0.05 | 1 | 0 of 3 | off | calm | 0° |
| Studio | site pages, MAX//OS default | 35 % | 0.14 | 2 | 1 of 3 | display | balanced | 3° |
| Press | hero moments (up to Press), covers, campaigns, OG | 50 % | 0.18 | 4 | 2 of 3 | display-and-heads | arcade | 6° |
| Rave | 404, easter eggs, launches, posters, the dial's top | 75 % | gamut max | 7 | 3 of 3 | display-and-heads | overdrive | 12° |
The site prints at Studio. A hero may go one step louder, covers and launches louder still, and every visitor gets a dial of their own in the header and the footer. Try it: the frames below hold their volume, the rest of the page follows you.
Where next#
- Install the packages from GitHub Packages.
- Follow the Next.js recipe, every excerpt pulled from a consumer app that has to build.
- Read the fifteen legibility rules and what the press check measured last.
- Browse the foundations, the tokens and the components.