A designer building
a design system.
Design to Code — A designer's journey building a design system. Insights on design tokens, components, Tailwind, AI, and the full stack of building 7onic.
Design to Code
A designer's journey building a design system — from Figma tokens to production components, Tailwind, AI tooling, and CLI.
Read the series →Recent Posts
-
Design to Code #8: The Cosmetics of Modularity
How a generateCode() function in our docs told users to import from a subpath that was never in the package — and why we still ship one entry point.
-
Design to Code #7: How CVA Scaffolding Turned Into Dead Code
Every 7onic component starts with CVA. A pre-publish lint sweep deleted it from five of them — including one where the cva call itself had no variants at all.
-
Design to Code #6: When @theme inline Killed My Dark Mode
7onic handles dark mode purely in CSS. One word from the Tailwind v4 migration guide silently broke it for every v4 user. The fix was removing that word.
-
Design to Code #5: Using AI to Build a Design System
I use Claude for almost everything in 7onic. I also wrote three shell scripts whose job is to catch it reporting things as done when they aren't.
-
Build & Release #2: Five Patches for One Line of CSS
I shipped `html body { color }` with four different values across five releases. Each one fixed a different way of being wrong — until I found the generator.
-
Build & Release #1: How Apple's rsync Update Nuked My Repo
A macOS update silently swapped rsync. My public repo's git history vanished. My first fix made it worse. Then I merged a bad commit without checking the diff.
-
Component Anatomy #1: Perfect on Paper, Wrong in Production
I designed buttons at 5 sizes. Deleted one before shipping, discovered a gap, added a different size back. Ended up with 5 again — just not the same 5.
-
Token Deep Dive #1: The /50 That Did Nothing
I converted design tokens to CSS var() for cleaner SSOT. Every /50 modifier stopped working. Tailwind v3 didn't warn me once. Here's the three-tier fix.
-
Design to Code #4: Why I Chose Radix Over Custom Primitives
I tried to build a dialog focus trap from scratch. Got it wrong in an afternoon. Here is what Radix actually handles — and what it still gets wrong.
-
Design to Code #3: Copy-Paste vs npm Install
Five days after publishing @7onic-ui/react@0.1.0, I started building a CLI that copies files instead. The npm package still ships. Here's the trade-off.
-
Tailwind Guides #1: What Actually Broke Migrating to v4
Migrating from Tailwind CSS v3 to v4 while supporting both — the silent dark mode bug, reversed variant stacking, and the outline flash nobody warned about.
-
Solo Builder #1: What Nobody Tells You
Building a design system alone sounds like a shortcut. No meetings, no politics, full ownership. Here's what that actually looks like.
-
Design to Code #2: One JSON, Eleven Outputs
How a single JSON file generates 11 distribution formats — and the three problems I ran into building the sync-tokens pipeline for 7onic.
-
Design to Code #1: Why I Built 7onic
I spent 10 years watching pixels drift between Figma and production. Here's why I stopped filing tickets and started building a design system from scratch.