Design system · 04
Three voices, and two in reserve.
A serif for what a page says, a sans for what it explains, and a mono for what it labels. Two Japanese faces stand behind them: one for text, one for a handful of brush-written characters.
Families
Asar
Headings
font-serif
Built once, properly.
One weight. A wide, warm text serif, pulled in tight at display sizes.
Geist
Body and interface
font-sans
Measured, readable, and quiet enough to stay out of the way.
Variable. Regular for reading, medium for labels and emphasis.
Geist Mono
Metadata
font-mono
Volume III · Platform build
Eyebrows, token names and figures. Never a paragraph.
Display scale
Three heading sizes in a fixed ratio. A page has one title, at the first; sections open at the second; blocks inside them at the third. There is no fourth.
Digital systems that work better
display-1 36 → 48px leading 1.08 The one page title
Four chapters, one studio
display-2 30 → 36px leading 1.12 Opens a section
What a first month looks like
display-3 24px leading 1.16 Opens a block inside a section
Running text
Body copy is 16px on a 28px line, in quiet ink, at a measure of 42 to 48rem. Full ink is for headings and for the few words in a paragraph that carry it.
Eyebrow · the one mono treatment
We design and build custom websites, web applications and commerce platforms for businesses that have outgrown templates — then grow the traffic and conversion to match.
Captions and supporting notes step down to 14px on a 24px line.
A quiet linkImplementation
| Utility | Sets | Use |
|---|---|---|
| 16 / 28px | Body copy | |
| 14 / 24px | Captions, card copy, notes | |
| Mono 10.9px · 0.14em · caps | A label above a heading; metadata | |
| Mono 12px | A secondary link, with an arrow that slides in | |
| — | On every paragraph: no orphaned last word |
<p class="eyebrow mb-5">Full-stack digital studio</p> <h1 class="display-1"> Start a <AccentUnderline>conversation.</AccentUnderline> </h1> <p class="mt-5 max-w-lg text-base/7 text-pretty text-muted-foreground">…</p>
The pencil underline
A hand-drawn stroke in tan under the phrase a heading turns on. It is drawn left to right after the line it marks has settled, so it reads as a mark made on finished text.
Start a conversation.
One per heading at most, and only on headings. It is emphasis; two of them is none.
Japanese
IBM Plex Sans JP sets Japanese text, and sits in every font stack as the fallback so mixed-language lines hold together. Klee One, a textbook-brush face, is reserved for the tagline and for single kanji used as marks — the watermark on each volume’s cover.
人とビジネスを調和させる。
戦略・デザイン・開発・継続的な改善までを一貫して手がけるデジタルスタジオです。
Rules
Do
- Use one title per page, and let it be the largest thing on it.
- Set body copy in quiet ink at the reading measure.
- Use mono for labels, token names and figures.
- Keep Klee One for the tagline and single-character marks.
Don’t
- Set a paragraph in mono, or a heading in the sans.
- Embolden Asar; it has one weight and a faked bold shows.
- Underline more than one phrase in a heading.
- Use Klee One for English, or for running Japanese text.