duply
Blog
5 min read

Notes on the design system

duply ยท journal

A starter is only useful if you can make it look like yours without a rewrite. The kit gets there with a strict rule: no color, font, or radius lives in a component. Every visual value comes from DESIGN.md and compiles into CSS variables that the utility classes read.

In practice you never type a hex code. You reach for tokens: bg-canvas and bg-surface for backgrounds, text-ink and text-body and text-muted for type, border-hairline for the thin lines that hold cards together. To change any of them you edit the design file and run the token build, and the change lands everywhere at once.

The accent is deliberately rationed. There is a single brand accent, and it is reserved for primary actions: the one button on a screen you most want pressed. Keeping the accent scarce is what makes it read as a signal instead of decoration.

Type does most of the work. Headings are set in a display face, big and tight, so a page announces itself before you read a word. Body copy stays calm and readable. Small labels stay sans and quiet, a muted supporting line rather than a shouting kicker.

Restraint is the motif. No little label above a heading, no decimal-index markers numbering the rows, no all-caps mono shouting for attention. The heading carries the section, and what is left reads precise and considered because nothing competes.

Shape is consistent too. Radii are tight, borders are hairline thin, and cards favor a single surface color over heavy shadows. The result is flat, structured, and quiet, which leaves room for your content and your one accent button to carry the page.

When you build a new screen, lean on the same vocabulary. Token utilities only, a display heading in sentence case, calm sans labels, hairline cards, and the accent saved for the action that matters. Match the homepage and the app, and a new page will feel like it belonged from the start.