CM-04 / system
Design that scalesisn't drawn. It's built.
Behind every screen I ship is a system — the structure that keeps four products, a dozen teams, and one brand speaking the same language.
the problem
Without a system, every screen is a fresh argument.
Two designers ship two blues. A button drifts three pixels between screens. Accessibility gets bolted on at the last review. On one screen it's annoying — across four products and the teams who build them, it's chaos, and it slows everyone down.
how I build it
One source of truth, five moves.
I design products the way design systems are built — the same rigor from the first interview to the last pixel. Research the real problem, name a single source of truth, turn decisions into tokens, document the pattern, then test and simplify until the right choice is the obvious one.
01
Empathize
User research
02
Define
Personas · user journey
03
Ideate
User flows · information
04
Design
Wireframes · UI · prototype
05
Test
Usability testing · iterate
the proof
You're reading it.
This page runs on the exact chain below. Three tiers: raw values become named intentions become components. Change one hex at the top and every screen downstream moves with it. Hover any node to light its lineage.
Primitives
raw valuesSemantics
named intentionsComponents
what you see--deck-accent ← --q-accent — even the case decks re-map these.
try it — edit the primitive
One value at the top; the button, the link, and the card border all follow — in a single move.
what it buys
Why teams move faster on top of it.
Consistency by default
Batt Swap alone spans an app, station firmware, and web — three surfaces, one visual language, because they draw from one deck.
Change once, ripple everywhere
A token is edited in one place; every button, card, and even the case decks update together. No find-and-replace across dozens of screens.
Accessible from the start
Contrast and focus are decided once, in the tokens — not bolted on at QA. Every screen inherits it for free.
Speed to ship
New screens assemble from parts already tested — so the team argues about the product, not about which blue.
in production · under NDA
The largest one, I can't show you.
The design system I maintain keeps every 7 Solutions team consistent and accessible — live, in production, under NDA. I can walk you through it in person.
Built and run in production at 7 Solutions — research, flows, UI, and the shared system, end to end.
tokens · components · patterns — walkthrough live only
Design Tokens with FigmaDesign System with FigmaAdvance Workshop: Design System (One-to-Many)