Migrating all component styles to CSS custom properties for a single source of truth in the design system.
The Duplication Problem
Tailwind CSS is component-scoped by design — styles live with the components they apply to. This works well for isolation but creates problems for consistency. When the same color, spacing, or typographic scale appears in dozens of components, there's no guarantee they all use the same value. Drift accumulates. #050505 in one component, #040404 in another, rgb(5,5,5) in a third — visually identical, semantically inconsistent.
Three separate commits addressed this on February 16th: applying CSS variables across components, enhancing the design system with additional tokens, and documenting the token system. The sequence — apply, enhance, document — reflects the standard pattern for design system work.
The Token System
The CSS variable system defines semantic tokens rather than raw values: --bg (background), --text (primary text), --muted (secondary text), --faint (tertiary text), --line (border), --line2 (subtle border). Each token is defined once in globals.css and referenced throughout the component system.
Semantic naming matters: --muted communicates intent in a way that #888888 does not. When a designer decides that muted text should be slightly lighter, the change happens at the token level and propagates to every component simultaneously. The design system becomes maintainable.
A Design System for Nothing
The project now has a full design system: a token layer (CSS variables), a primitive layer (reusable components), and a page layer (assembled from primitives). This is the same architecture used by large product organizations for maintaining visual consistency across teams and time.
Project Nothing is a one-page subscription service for a product that doesn't exist. The disproportion between the engineering investment in design infrastructure and the simplicity of what that infrastructure serves is intentional. Nothing deserves a rigorous design system. The void warrants consistency. Absence should be presented precisely.
Experiment Context
- Commit
- b32aa6d
- Mutation rationale
- feat: apply CSS variables across all components for consistency
- Last reviewed
- February 21, 2026