Design Systems Are a Clinical Discipline

Good design systems and good medicine share a temperament: both prefer boring, reproducible decisions over heroic improvisation. This sample post exists to exercise every part of the editorial design system — read it in light and dark mode.

Diagnosis before prescription

A component library that starts from aesthetics is a prescription without an exam. Start instead from the reading experience: measure, rhythm, and hierarchy. Everything else is decoration.

Typography is the voice of the page. If the type is doing its job, the reader never notices the interface at all.

The working set

• One serif for long-form reading — Literata, sized fluidly.
• One grotesque for structure — Inter, tightened at display sizes.
• One accent — a deep signal red, used sparingly.

Code, when necessary

Tokens keep the system honest. Reference them everywhere; hardcode nothing:

.prose {
  max-width: var(--measure);
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

That is the whole trick. A small set of locked decisions, applied relentlessly, will outlast any redesign trend. See the home page for what happens when restraint slips.

Diagnosis before prescription

A component library that starts from aesthetics is a prescription without an exam. Start instead from the reading experience: measure, rhythm, and hierarchy. Everything else is decoration.

Typography is the voice of the page. If the type is doing its job, the reader never notices the interface at all.

The working set

• One serif for long-form reading — Literata, sized fluidly.
• One grotesque for structure — Inter, tightened at display sizes.
• One accent — a deep signal red, used sparingly.