The Design Stack · Free Starter
A token foundation.
Ready to use.
Drop a single CSS file into any project and start building with a consistent, well-structured design token system.
No framework required · Plain CSS · Yours to adapt
--ink: #0d0d0d;
--paper: #f4f0e8;
--teal: #1ab5a3;
--purple: #534AB7;
--accent: #ff4d1c;
--font-serif: 'Bungee', Georgia, serif;
--font-sans: 'Space Grotesk', system-ui;
--spacing-04: 16px;
What's in the download
Everything you need to start
✓
Color tokens
A complete semantic color system — surface, text, border, and accent roles — using CSS custom properties. Swap values to match any brand.
✓
Type scale
A fluid, clamp-based type scale from xs to display. Covers font families, sizes, weights, and line heights as named tokens.
✓
Spacing scale
A consistent spacing system built on a base unit. Use the same scale for padding, margins, and gaps across every component.
✓
Border radius & shadow tokens
Named radius steps (sm → full) and a layered shadow scale. Enough to define a complete elevation system.
✓
Font stack reference
Recommended font pairings, where to get them, and how to load them — so you can start with good typography from day one.
Works with Claude · AI-ready
Drop it into Claude. It speaks token.
The token file is structured so AI can read it immediately. Paste tokens.css into a Claude conversation and ask it to build components, write documentation, or generate design decisions — it already understands your system.
Example prompt
"Here's my tokens.css. Build me a card component that uses these tokens for color, spacing, and type — and explain the choices."
Get the free download
Drop your email and we'll send you straight to the file. No spam — just the occasional design system update.
Want everything?
The tokens are the foundation.
Membership is the system.
Lifetime members get the full component library, design system deep-dives, private blog posts, and every future drop — for a single payment of $99.
Get Lifetime Access →$99 · One-time · No subscription ever
