frontend // stack
A design system that ships only the CSS each page uses.
Utilities compile to per-page CSS measured in kilobytes, not megabytes. Design tokens for spacing, type, and color keep hundred-page estates visually consistent.
Use for every Astro build; pair with tokens so marketing pages stay on brand.
why we use it
(01) No dead CSS
Purge-at-build means each template ships only the classes it renders. Redesigns never accumulate the ghost stylesheets of theme stacks.
(02) Tokens, not hex soup
Base and accent scales live in one theme file. A rebrand touches tokens, not three hundred scattered declarations.
(03) Editors cannot break it
CMS rich text maps to allow-listed components. Content teams publish freely without injecting off-brand markup.
scope
(01) Per-page CSS budgets in single-digit kilobytes
(02) Single token file for color, type, and spacing
(03) CMS portable text mapped to approved components
(04) Dark mode variants designed alongside light mode
tradeoffs
Our default versus the common alternative, stated honestly.
| dimension | 2sh | traditional |
|---|---|---|
| Payload | Only rendered utilities ship to the browser | Framework CSS plus theme overrides on every page |
| Consistency | Tokens enforce spacing and type rhythm | One-off classes drifting per template |
| Maintenance | Delete a component and its styles vanish with it | Dead selectors nobody dares remove |
| When not utilities | Complex animations and prose get extracted components | Utility classes pasted into every CMS text field |
Not sure Tailwind CSS fits your estate?
In the audit we map your estate, model the cost of staying versus moving, and document the recommendation in writing.