01 The system
Generated from the seed. Every number here is derived, not typed.
Colour
Type
Elevation
Texture & shape
Gradient
Motion
02 On something real
A swatch grid tells you nothing. Here is the system on an actual interface — and in every context it has to survive.
Every context at once
03 Avatars
Deterministic from a name, so a person's face never changes. Twenty styles — pencil people, characters defined entirely by their glasses, a capybara — and the contrast is checked against the page behind it, which is the bit that makes them actually usable.
Remix
Nudge one thing instead of rerolling the whole person. The face underneath never changes — that is the point.
04 Personas
A face is not a presence. A presence is a face, a name, a way of talking and a colour that is yours — and those four agreeing is what makes something feel like somebody. So all of it comes from one seed.
Their social card
1200×630 — the size every platform crops to. No webfonts, no images, nothing that can 404 in someone else's preview crawler.
A whole cast
Generate a team one at a time and you get four people who are all teal. These are picked to be as far from each other as possible.
05 Judgement
Four things every other generator leaves to you: whether it survives colour blindness, whether it survives a printer, what the newer contrast model thinks, and how to fix the pairing you already picked.
Fix a pairing
The nearest passing colour to the one you chose. Same hue, same chroma.
Colour vision
Real cone-response matrices, not a hue-rotate. A filter chain moves colours roughly the right way and gets the actual confusions wrong.
On paper
Which of these do not exist in CMYK.
The roast
Paste some colours. Be told off, specifically.
Which do you prefer?
Two systems, no labels. Pick one and it keeps the winner's traits and rerolls the rest — twenty clicks and it has found what you like.
06 Taking it into a room
Everything above makes a design. This makes the documents about a design — which is a different job, for the people who have to explain it, print it, or defend it in a meeting.
From a picture
Drop in a screenshot, a photo, or four images for a mood board. It is pixel arithmetic — nothing is uploaded and no model is called.
Name the colours
Nobody has ever said "can we make it less #4f76b6". You can argue about Hydrangea.
The decision log
Every reroll recorded. In six months somebody will ask why it looks like this, and this is the answer.
The one-pager
What passes, what does not, and what it costs — on one printable sheet.
Things you print
All three are true-size SVG, pulled into the CMYK gamut first — so what you pin up is what came out of the printer.
The same design, four decades
Every one of these was, at the time, what modern looked like. So is the last one.
07 The chaos test
Design systems are demonstrated with three words of Latin and a square photograph. Real content is not like that. Here is the same system handling the things that actually break layouts.
08 Take it
Thirteen formats — from a loadable Figma plugin to an Xcode asset catalog, a Compose theme and an email template. The byte count is next to each one, because nobody else will tell you.
09 Seeds worth stealing
Every design here is a link. Click one and the page becomes it.