Hey, I'm 7onic.

Designer who ships code. I design components in Figma and ship them in React — because waiting for someone else to get the padding right wasn't working out.

10+ years of doing both design and frontend development taught me one thing: the gap between a Figma file and production code is where good UI goes to die. Spacing gets rounded. Colors shift. That 8px gap becomes 10px because "it looked off." I got tired of filing tickets about pixels, so I started writing the code myself.

What is 7onic?

7onic is an open-source design system with one rule: if it's not in the design token, it doesn't exist in code.

Figma tokens are the single source of truth. One sync-tokens command generates CSS variables, Tailwind presets (v3 + v4), TypeScript types, and JSON — all from the same source. No copy-pasting hex values. No "I think the border radius was 8."

The component library is built on Radix UI primitives with full TypeScript support, CVA variants, and a CLI that adds components to your project in one command. It's everything I wished existed when I was handing off Figma files and hoping for the best.

Why a blog?

Building a design system solo means making hundreds of decisions with no one to argue with. This blog is where I document those decisions — the trade-offs, the mistakes, and the occasional "why didn't I do this from the start" moments.

Expect posts about design tokens, component architecture, Tailwind CSS, AI-assisted development, and what it actually takes to ship a design system as a one-person team. No fluff. Just the real stuff.

Connect