Typography test

Wed, 12 Aug 2026 09:00:00 -0600

This post exists to exercise the stylesheet. Every element the theme styles appears below at least once. Delete it once you trust the CSS.

Headings and prose#

A paragraph of body copy set in Space Grotesk at 300 weight. It carries bold text, italic text, inline code, an internal link , an external link that should pick up an arrow, and a Ctrl+C key hint.

A third-level heading#

Headings get a › prompt from CSS and a # anchor on hover.

Lists#

En-dash bullets, not dots
A second item to check the spacing
A third, with code inside it

Ordered lists keep their numbers
Set in the faint ink
Third item

Quotes and rules#

A blockquote sits behind a hairline rule in the muted ink, set in italic. It runs to a second line so the left border has something to measure.

Code#

// Chroma classes, coloured from the same tokens as the rest of the page.
import { test, expect } from '@playwright/test'

test('the grain does not intercept clicks', async ({ page }) => {
 await page.goto('/')
 const overlay = page.locator('body')
 await expect(overlay).toHaveCSS('background-color', 'rgb(10, 10, 10)')
})

hugo server --buildDrafts --navigateToChanged

Tables#

Token	Value	Used for
`--paper`	`#0a0a0a`	Page background
`--bone`	`#cdc4ba`	Ink, buttons, selection
`--headings`	`#D05353`	h1–h3, keywords
`--ink-faint`	`#7a756e`	Marks, captions, rules

A wide table scrolls inside its own box rather than widening the page.