Black, white, grey. Then one mark that's yours.

How to use it

Set it up in Claude Code, Cursor, Codex or the Claude app, then ask for a page. Under two minutes, with captions.

The whole system on one screen

Type AaAa

Bricolage Grotesque. Headings light, with the word that matters in bold.

Colour

Black, white and greys. Ring colours from one palette, on rings and nowhere else. Five palettes

Signature mark TMv0.1 v1.0

Empty, initials or a photo inside. Dashed until it's live, solid the day it ships.

Buttons Share a launchDetails

Black pills for the main action. One per group.

Fields

A pill for one line. Soft corners on longer forms.

Errors

Add a link that starts with https://.

Black and bold, never red. Say the field and the fix.

It moves, a little

Motion only says what changed. Nothing loops, nothing lifts, and it all switches off for people who ask for less motion. Try it.

Goes live

v1.0

The day it ships, the dashed ring turns solid with one small pop.

Ship it

Draws in

Rings sweep round once when they first come into view.

Draw again

Counts up

128

Numbers count up once when seen. Press a pill and it sinks a little.

Follow

Five ring palettes

Everything stays black, white and grey. When every person or project gets a ring, give each one a colour from a single palette. Mzansi is the South African flag set Version One uses, with the meanings its builders pick from.

Signal

Bright, digital, neutral. The default.

dui-palette-signal

CobaltVermilionVioletMarigoldBlack

Mzansi

The South African flag, as Version One uses it.

dui-palette-mzansi

Red · LeapBlue · HorizonGold · ValueGreen · RootsBlack · Ubuntu

Earth

Warm, handmade, grounded.

dui-palette-earth

TerracottaOchreClayIndigoBlack

Coast

Fresh, open, outdoors.

dui-palette-coast

OceanCoralTealSandBlack

Jacaranda

Playful, loud, city.

dui-palette-jacaranda

PurpleMagentaSkySunsetBlack

Twelve rules

1. 1
   Light only. White background, black text. No dark mode, no dark sections.
2. 2
   Black, white and four greys. No blue links, red errors, green ticks or gradients.
3. 3
   Colour lives only on rings. One palette of five. If something else needs to stand out, use black, weight or space.
4. 4
   One typeface. Bricolage Grotesque for everything. Monospace only for code.
5. 5
   Light headings, one bold word. "Just shipped". Tight tracking.
6. 6
   Main actions are black pills. The second action is outlined. The third is a text link.
7. 7
   White space before borders, borders before shadows. The only shadow is on a floating menu.
8. 8
   Pills for what you press, soft corners for what you read. Cards 22px, the feature card 28px.
9. 9
   Dashed until live. The mark goes solid when the thing ships.
10. 10
    Errors are black and bold. Name the field and the fix.
11. 11
    Hover is a black edge, not a lift. No scale, no glow.
12. 12
    Write plainly. Buttons say what happens. Sentence case. No "Oops".

Whole pages built only from the skill, with invented people. Claude opens these before building something similar.

Launch page

Hero, faces row, card grid, feature card, steps.

Profile

A person in their ring, build log, help ask.

Dashboard

What needs you first, numbers, a quiet chart.