The site uses three faces, each with one job: Cabinet Grotesk for body, Migra for display headings, Geist Mono for code.

The faces

Hierarchy

Heading 1: the headline of a post

Heading 2: a major section

Heading 3: a sub-section

Heading 4: a labelled subsection

Heading 5: small running header

Heading 6: caption header

Body

This is body copy in Cabinet Grotesk at 16 px / 1 rem with a relaxed line-height. Bold reads as emphasis. Italic reads as a turn of phrase. Inline code reads as a token. And a link reads as a link.

A second paragraph: short paragraphs make the eye breathe. Cabinet Grotesk has a tall x-height and confident grotesk shapes that hold the rhythm of body text without competing with the Migra display headings above. The pairing reads as “newspaper editorial meets engineering log.”

A pull quote

For the moments worth pausing on:

Code

1
2

just clean && just build
hugo server --buildDrafts --navigateToChanged

1
2
3
4

func fib(n int) int {
    if n < 2 { return n }
    return fib(n-1) + fib(n-2)
}

Type scale

A Major Third (1.25) modular scale, defined as CSS custom properties in assets/css/extended/00-tokens.css. Display sizes use clamp() so headings scale with viewport width.

Weights

Cabinet Grotesk runs at three weights, each with a semantic role:

• 400 Regular for body copy.
• 500 Medium for nav links and form labels.
• 700 Bold for in-prose emphasis (**bold**).

Migra runs at one weight here, 700 Extrabold, used only for display headings. The free Migra package also includes 200 Extralight (regular and italic) and the italic Extrabold; those cuts are loaded but currently unused, kept for future editorial flourishes.

Geist Mono runs as a variable font at default weight. Only one cut is used so code reads as a single voice.

A note on color

Headings sit in --primary. Body copy sits in --content. Captions and meta sit in --secondary. Inactive state sits in --tertiary. All four come from the Catppuccin palette: Mocha for dark mode, Latte for light mode.