-
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.
-
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 #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.
-
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 #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.
-
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 #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 #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.