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-1through--space-6