Section 02 · Foundations
Color.
Five layers: surfaces, foreground, brand, semantic, protocol-coded. Every value earns its place. New colours only if the system genuinely lacks one — and only after we audit whether the gap is a real need or a lazy fix.
Surfaces
A four-step grayscale, all close in luminance. The point is to nest containers without the page looking like a layer cake. Always go darker for deeper wells (code blocks, modals over modals); never a fifth tone.
Foreground
Four levels. Don't invent a fifth — if you need an in-between value, your hierarchy is wrong, not the palette.
--vp-color-fg on --vp-color-bg is ~14.8:1 (AAA). --vp-color-fg-dim on --vp-color-bg is ~7.5:1 (AAA). --vp-color-fg-mute on --vp-color-bg is ~4.6:1 (AA). Don't drop below --vp-color-fg-mute for anything a user needs to read.Brand · Neon
Three greens forming a tight family. The flat neon is the workhorse — primary buttons, key affordances, success ticks, sparkline trends. The mint and lime stops only appear in the headline gradient and on the website. Never gradient-text inside the application.
Semantic
Four. Each one carries one meaning system-wide. The protocol palette borrows from this set — that's deliberate, so colour learning compounds across surfaces.
Protocol coding
Users learn the colours by association. HTTP stays blue. SMTP stays warning-yellow. IMAP is lime. LDAP is violet. SPAMD is amber. SOCKS5 is neutral grey. Don't recolour for "balance" — these are mnemonic, not aesthetic.