A kitchen sink that can't drift

Every design-system reference page I've seen has the same disease: it's written once, by hand, and starts lying the day someone changes a token. The swatch says one thing, the stylesheet says another, and now the reference page needs maintaining like any other page — which means it doesn't get maintained.

Garp now generates its kitchen sink instead. This site's own /kitchen-sink is synthesized on every build from static/style.css: every custom property in the stylesheet's @layer config block, rendered as color swatches, spacing bars, type specimens, and radius boxes, plus a fixed section of semantic HTML elements — headings through a complete form — styled by the site's own CSS at view time.

The load-bearing decision: Go never computes a CSS value. The generator only extracts token names from the config block; every preview is a live var(--token) reference the browser resolves against the real stylesheet. Rename a token and the list regenerates. Change a value and the browser shows the new one. Drift is impossible by construction — and the parser stays a ~40-line name-extractor instead of growing into a half-baked CSS engine that would need to evaluate light-dark() and relative color syntax to tell the truth.

Credit where due: the idea sharpened while reading the kitchen sink in Adam Stoddard's Grease starter. Its element snippets were already drift-proof — real markup styled by the real stylesheet. Only its token list, hardcoded in a data file, could lie. Garp's version automates exactly the half that needed it and leaves the half that didn't alone.

It comes in two tiers sharing one generator: the dev server serves /_garp/sink re-parsed on every request, so it updates as you edit tokens; and sink: true in config.yaml makes every build emit a noindex kitchen-sink.html — author-overridable, exactly like garp's synthesized sitemap.xml. It's off by default, so a client deliverable doesn't carry a kitchen sink unless someone chose that.