Most digital products don’t fail because of missing features. They fail because the first ten seconds feel like paperwork. Hierarchy is the fix — not another illustration pass.
We start with what must be true before anything can be beautiful. Grid, type, and contrast are not aesthetics — they are decisions you can defend in a review. Decoration arrives last, and only when it has a job: tempo, emphasis, or relief.
What users actually notice
In moderated sessions we ask people to describe the product after thirty seconds — before they explore. The answers cluster around structure, not color. When the map is clear, the mood can be quiet.
- 73% — name hierarchy first (n = 48 sessions)
- 2.1× — faster task find (after type-scale pass)
- 0 — extra gradients shipped (last three releases)
A type scale you can defend
We keep the scale short on purpose. Every step needs a use — display, section, body, meta. If a size only exists “because Figma had space”, it doesn’t ship.
Working type roles (excerpt)
| Role | Use | Line length |
|---|---|---|
| Display | Hero / brand signal | ≤ 18 ch |
| Heading | Section titles | ≤ 28 ch |
| Body | Reading copy | 52–68 ch |
| Meta | Indexes, captions | any |
Tokens that match the CSS
Clarity dies in the handoff if names drift. We map roles to CSS variables once — then both Figma and the codebase speak the same language.
// globals.css
:root {
--type-display: clamp(2.5rem, 5vw, 4rem);
--type-heading: clamp(1.5rem, 2.4vw, 2rem);
--type-body: 1rem;
--type-meta: 0.75rem;
--tracking-display: -0.03em;
--leading-body: 1.55;
}
The test is simple. Remove the flourishes. If the product still holds, you built structure. If it collapses, you built a mood board.
“Pretty without purpose is noise.”