Design System

Internal kitchen sink. Every token and component in one place. Not indexed.

Colours

Semantic tokens — adapt automatically in dark mode.

--color-bg Page background
--color-surface Elevated surface
--color-text Body text
--color-muted Secondary text
--color-link Links
--color-border Borders

Typography

Display — post title

The craft of good writing

H2 — section heading

Why this matters

H3

A closer look

H4

Detail

Heading label — section and subsection marker

Section title

Lead — first paragraph

Every piece of writing starts with a question. The answer isn't always obvious, and that's the point. You follow the question wherever it leads.

Body

Good writing is precise without being cold, direct without being blunt. It earns the reader's time by saying something worth reading. The links look like this, understated and clearly marked. Bold is used sparingly, for emphasis that actually needs it.

Muted

Published 9 May 2026 · 5 min read

Blockquote

The enemy of art is the absence of limitations. — Orson Welles

Inline code

Use npm run check before committing.

Monospace / code block

function greet(name: string): string {
  return `Hello, ${name}`;
}

Spacing

4 px grid. 1 unit = 4 px = 0.25 rem.

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-10 40px
--space-12 48px
--space-16 64px

Components

PageHeader

Section title

A short description of what this page is about.

FormattedDate

Tags

Meta block

Published
Updated

Code block

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}