NorthQuad x 120Water · Design System
The 120Water Design System.
Two product lines, one token architecture, built and maintained solo alongside engineering.
38%Faster Design-to-Engineering Handoff
2 of 2Products Shipped Reusing It, Zero Redefinitions
32Components Built WCAG 2.1 AA
100%Token-Strict, Zero Hardcoded Hex
The Stakes
No legacy mess to inherit. A harder problem: staying consistent while shipping fast.
- Sample Manager and Verification Planner, built a workflow apart. Zero token redefinitions between them.
- Figma already defines more than either product ships: a 3-color alert, a 3-tier button hierarchy, form controls sitting unused.
9 color tokens inherited from the existing system. Same hand, every product.
Verification Planner build notes, on reusing Sample Manager's tokens
The Structural Strategy · Foundation
Six families. Four stops each. Zero exceptions.
24
Primitive tokens across 6 families
2
Products drawing from the same set, no redefinitions
0
Hardcoded hex values in shipped component CSS
Primary · Cyan
#2ECCFF
Brand accent, progress fills, timeline dots
Secondary · Navy
#294088
Primary buttons, table links, active nav
Tertiary · Gold
#FFBF00
Defined in the token set, not yet drawn on by either shipped product
Alert · Amber
#AE6400
Needs-attention states, admin-disabled
Warning · Magenta
#D70049
Overdue, flagged, destructive actions
Success · Green
#007F4A
Completed, verified, passed checks
A Second System, Same Client
- A second, semantic system lives in the same workspace: Text, Surface, Border, Status, Action, Icon.
- Different hex values even where names sound alike. Action/Primary here is the primitive set's Secondary navy.
Action/Primary #294088
Action/Brand #2ECCFF
Status/Info #258ABA
Status/Danger #D53956
Surface/Inverted #1F2430
A brand refresh, and a caption problem it happened to fix.
- Classic ran Bebas Neue down to the smallest text in the system. Current is Proxima Nova, one face, every size.
- A brand call, not an accessibility one, but it fixed a real legibility risk anyway.
Classic
VERIFICATION PLANNER
Sample results pending lab confirmation
Current
Verification Planner
Sample results pending lab confirmation
The Structural Strategy · Engineering Alignment
No Storybook bridge. Tokens as the shared language instead.
- Dev Connect with engineering, before the build locked, reshaped the architecture, not just the visuals.
- Tokens ship as CSS custom properties, the same primitive their React library reads its theme from.
38%
Faster design-to-engineering handoff once the system existed
1
Dev Connect that changed the architecture, not just the visuals
The Structural Strategy · Components
What Figma defines. What actually shipped.
Alerts
3 semantic colors, 2 states each
6 defined1 shipped
This is the alert text
Primary / Cyan, outline state
This is the alert text
Primary / Cyan, filled state
This is the alert text
Alert / Amber, outline state
This is the alert text
Alert / Amber, filled state, closest to what shipped
This is the alert text
Warning / Magenta, outline state
This is the alert text
Warning / Magenta, filled state
Badges
Status pills, gradient fills between the 600 and 700 stops
5 defined5 shipped
Success
In Progress
Pending / Sent
Inactive
Warning
4 of 5 map to shipped classes. Inactive is Figma-only, the gray here is a placeholder, not a spec.
Buttons
A 3-tier hierarchy, defined once
3 defined1 shipped
Shipped as .button-primary
Defined, shipped only as a borderless text link
Defined, not shipped in either product
Form Controls
Search, checkbox, slider, toggle
4 defined1 shipped
🔍 Search
Shipped as .search-input✓
Defined, not in the build doc
Defined, not in the build doc
Modals & Cards
One modal shell, reused everywhere it's needed
9 card variants1 shell, shipped
This is a form modal title
This is a modal subtitle
SELECT AN OPTION
Sub header default
SELECT AN OPTION
Sub header default
Stat card title
142
Caption
This is an alert modal title
XX XX
Caption
Number card title
142
Governance · How This Gets Extended
One person, tracking the whole vocabulary.
- No multi-designer review queue. One person owns definition-to-shipped fidelity across both products, tracked below, not guessed.
Family
Defined in Figma
Shipped in Product
Gap
Alert
3 semantic colors, 2 states each
1, warning only, inline
5 of 6 states unshipped
Badge
5 states
5 states, 1 name mismatch
Inactive undocumented in code
Button
3 tiers
1 tier, plus a text-style link
Secondary and Brand undocumented
Form Controls
Search, checkbox, slider, toggle
Search only
3 of 4 controls undocumented
Modal & Cards
9 card variants, 2 modal shells
1 generic shell, reused everywhere
Purpose-built cards undocumented
Not a failure. The gap staying visible is the point.
Nothing overwrites prior work. No wiki tool, just a doc that stays current.
- Every build increments a version number. Nothing gets silently replaced, tokens included.
- No zeroheight. A maintained reference doc per product, read by whoever builds next, same job, fewer places to go stale.
Outcomes & Retrospective · ROI
Portable, not just internally consistent.
Proven by reuse, not by looking finished alone.
2
Products live on one primitive token set, zero redefinitions
15
Utility organizations running on a system built WCAG 2.1 AA from day one
0
Hardcoded hex values in shipped component CSS, across both products
Honestly: two products exist. Both use it. Not enterprise scale, real scale, and nobody had to be told to reuse it.
Outcomes & Retrospective · Critical Takeaways
The real test is the second time someone reaches for it.
- The Figma MCP connector was meant to be the live source of truth. It didn't reliably surface tools mid-session, so screenshots became the actual working method, the system still shipped, just through a plainer pipe.
- Looking finished and being tested are different things. A second product is the test.
- Defined versus shipped isn't a bug. It's the honest state of anything alive.