Style guide

This page documents the design tokens used across the site. All components and pages should use these variables.

Colors

Theme-dependent; switch with the theme toggle in the header.

• --color-bg – page background
• --color-surface – cards, header
• --color-text – primary text (RGB triple)
• --color-text-muted – secondary text (RGB triple)
• --color-accent – links, buttons, active states
• --color-accent-hover – hover state
• --color-code-bg – code block background (RGB triple)
• --color-border – borders (RGB triple)

Typography

• --font-sans – body font stack
• --font-mono – code font stack
• --text-body-size – 1.125rem (18px)
• --line-height-body – 1.5
• --prose-width – 65ch (article measure)
• --code-width – 80ch (code blocks)

Breakpoints

• --breakpoint-mobile – 720px
• --breakpoint-toc – 1100px (TOC sidebar visible)

Spacing

• --space-1 through --space-6