Design system · built from 78 answered questions

Content first

Large, calm type and generous space, for people who come to read.

Explore the foundations

36components

175primitives

2themes

Saved guidesSave for laterKeep reading

Guide	Section	Minutes	Status
Planting a winter garden	Home and garden	12	Saved
Bread without a mixer	Food	9	Finished
Fixing a dripping tap	Home and garden	6	Out of date
A weekend in Lisbon	Travel	14	Saved
Starting to run at 40	Health	11	Finished
Keeping basil alive	Home and garden	5	Finished

Why it looks like this

Every decision follows from an answer. These are the answers its components and rules cite most. Follow them all in the Decision reference.

How do people recall the interface?

They see it fresh each time

Visitors see the interface fresh each time.

human.q2

How does it sound?

Conversational

Talk to one reader, like a good editor.

voice.values

How many signals carry each meaning?

Two: color and word

Status is rare; color and a word are enough.

accessibility.count

Explore the system

PrimitivesAll 175 raw values, and the tokens that point to each.

Aa

FoundationsColor, type, spacing, shape and motion, each with the answer behind it.

Keep readingOut of date

Components36 components, each with when to use it and how Content first decided.

Write to one person: "you", not "users".

Voice and toneConversational and warm. Talk to one reader, like a good editor would.

Themes2 themes. Only semantic tokens change; components never do.

open-ds why content-first button

For agentsAGENTS.md, the skill and the MCP: an AI builds the way the system would.

Who it is for

• Use it for: Publications, documentation, blogs, guides and help centers.
• Not for: Data-heavy tools or screens with many actions.
• Products like: Magazine, Documentation site, Help center, Long-form guide
• Themes: light, dark

Use scenarios

• A reader arrives from search on a phone and reads a long guide in one sitting.
• A returning reader saves an article to finish on the train.

Every answer

All 78 answers, and the design decisions each one made: Decision reference.