Typography
Two type systems: a sans/mono pairing for the interface, and a tuned
.prose layer for written content. Every specimen below renders with
its real utility classes.
Part 1 · Design typography
Interface · font-sans
Noto Sans
Headings, body, buttons. Weights in use: 400, 500, 600.
AaBbCc 0123 — æ ß ç
Meta · font-mono
Noto Sans Mono
Eyebrows, dates, Previous/Next, buttons — always uppercase, tracked normal.
AaBbCc 0123 — æ ß ç
Type scale
Hero
Post titles (PostLayout h1)
A digital garden
text-4xl font-semibold xl:text-6xl
Lede
Post descriptions (PostLayout)
Ideas, art, and research, kept in the open.
text-2xl xl:text-3xl
Section heading
Sidebar panels & author bio (h2)
Resources
text-3xl font-medium md:text-4xl
Card title
PostCard (h3)
On keeping a garden
text-2xl font-semibold leading-normal xl:text-3xl
Body
Global body (BaseLayout)
The base reading size — Noto Sans, set tight.
text-lg xl:text-xl
Mono labels
Eyebrow / meta
Dates, eyebrows (PostCard, PostLayout)
20 Jun 2026
font-mono text-xs uppercase tracking-normal
Previous / Next
Post navigation (PostLayout)
Previous
font-mono text-sm uppercase tracking-normal
Button text
Copy / action buttons
Copy
font-mono text-xs font-medium uppercase tracking-normal
Tracking
-
tracking-tightDefault for sans headings & body
Global body (BaseLayout)
-
tracking-tighterColored & dark panels, logo scrim
Author / Resources / Contact sidebars
-
tracking-normalAll mono labels — eyebrows, meta, buttons
Dates, Previous/Next, copy button
Leading
-
leading-tightBody copy & headings
Global body (BaseLayout)
-
leading-normalMulti-line titles
PostCard, prev/next titles
Part 2 · Prose typography
.prose configuration
MDX content renders inside prose prose-xl (stepping up to
2xl:prose-2xl). Overrides live in
tailwind.config.mjs via typography().
- --tw-prose-headings → zmoki-ink
- --tw-prose-body → zmoki-ink
- --tw-prose-bold → zmoki-ink
- prose-headings:font-semibold → heading weight (PostLayout)
In-prose links
Link color is driven by data attributes added by the rehypeExternalLinks plugin. Each renders with its real token.
a
zmoki-azure-500 · dotted 4px
[data-external]
zmoki-flame-500 · dotted 4px
[data-resource]
zmoki-jade-500 · dotted 4px
[data-anchor]
zmoki-ink · dashed 2px
Live specimen
The shape of a sentence
Prose body is set in Noto Sans at prose-xl, inheriting ink-colored bold and headings. This is a base internal link, an
external link, a
resource link, and an
anchor link.
Lists
- Unordered items use the prose default marker.
- Inline
codepicks up the mono face.
- Ordered items count up.
- Then carry on.
A blockquote sets quoted material apart with a left rule and italic body.
Definition list
- Digital garden
- A living, always-tended collection of notes and work in progress.
- Now page
- A snapshot of current focus, updated as things change.
Code block
Fenced blocks are highlighted with Shiki (catppuccin-latte) and get a copy
button at build time. Hand-written here, they fall back to prose code styling:
const garden = ["posts", "resources", "now"];
garden.forEach((bed) => tend(bed));