Foundations
Typography
Everything is set in Buena Mono, the
studio's own variable monospace. Every glyph sits on one fixed 618-unit cell;
two axes — weight 100–800 and slant 0 to −10° — cover every voice the system
needs. Fallback stack:
"Buena Mono", ui-monospace, monospace.
Weights
Where writing and code meet
Where writing and code meet
Where writing and code meet
Where writing and code meet
Where writing and code meet
Where writing and code meet
Where writing and code meet
Where writing and code meet
Type scale
Every style the docs and the editor need, set in the same mono. One column, real copy — the caption on each row names the style.
h1
Where writing and code meet
h2
Notes are the unit of publishing
h3
mrkdwn in, pages out
h4
One glyph cell, two axes
paragraph
A note starts as plain mrkdwn in the editor and ships as a page without leaving the file. The type never changes voice along the way — drafts, diffs, and the published article all sit on the same 618-unit cell.
lead
Buena mono is the only typeface in the system, so hierarchy comes from size, weight, and slant — never from switching families.
large
Publishing is a save, not a ceremony.
small
Last synced 2 minutes ago
muted
Draft — visible only to you until published.
blockquote
“The letterform disambiguation isn't a feature you turn on — 1, l, and I were drawn to never be mistaken for each other.”
inline code
Enable calt and
liga before
rendering arrows in the preview pane.
list
- Draft the note in mrkdwn
- Set the type in buena mono
- Publish — the file is the page
table
| Note | Status |
|---|---|
| ligatures-deep-dive.md | published |
| slant-axis-notes.md | draft |
Slant
The slant axis runs 0 (upright) to −10° — a true italic voice, not a mechanical oblique. Use it for emphasis and comments.
Recommended sizes
| Context | Size | Line height |
|---|---|---|
| Editor / terminal | 14 px | 1.5 |
| Long-form prose (markdown) | 16–18 px | 1.6–1.7 |
| Code, dense | 13 px | 1.4 |
| Headings / display | ≥ 24 px | 1.1–1.2 |
On the web
@font-face {
font-family: "Buena Mono";
src: url("/fonts/BuenaMono-VF.woff2") format("woff2");
font-weight: 100 800;
font-style: oblique 0deg 10deg;
}
Turn on calt/liga for code;
disambiguation (1 l I, dotted 0 vs
O) is drawn into the letterforms, not optional. Full typeface spec:
buena-mono.buenalabs.io/design.md.
Markdown for agents: /design/typography.md · spec: /design.md