Context
When I joined The Graph, I was told I'd take over design system efforts within a few months while continuing to ship product work. There was no dedicated team. The existing system had components but they weren't built with design system principles. A select component in Figma might have completely different states than the one engineers were working with. Designers and engineers were essentially working from different sources of truth, and handoffs reflected that.
The Work
I started by auditing what existed and understanding why it wasn't working. Components had been built as one-offs, solving immediate needs without considering how they'd scale or connect to each other. Fixing this meant rebuilding from the ground up while keeping the system usable for teams who depended on it.
The work happened incrementally over months. I rebuilt form controls, buttons, navigation patterns, feedback components, and data display elements. I also added crypto-specific components that didn't exist anywhere else because no off-the-shelf library covers things like wallet selectors or token inputs.
Component Library
Form controls, buttons, navigation patterns, feedback components, and crypto-specific elements like wallet selectors and token inputs. 60+ components rebuilt from the ground up.
Token Architecture
A complete token system for color, spacing, and typography. Every value has a semantic name and documented usage.
Design-Dev Parity
What you see in Figma matches the code exactly: styling, functionality, prop names, prop values, defaults. Engineers don't have to guess or translate.
<Button
variant="primary"
size="medium"
disabled={false}
loading={false}
>Button</Button>Custom Tooling
Some problems didn't have existing solutions, so I built them.
Figma plugin that analyzes usage of colors, spacing, stroke widths, radii, gaps, and padding across files. Identifies redundancies and informs token consolidation decisions.
Library Update NotifierSlack service that posts to a channel whenever the Figma library gets updated. Figma doesn't notify subscribers about library changes, so teams had no way of knowing when new components or fixes were available.
| Value | Count | Suggestion |
|---|---|---|
#6366f1 | 47 | accent |
#6366f0 | 3 | Merge with #6366f1 |
#fafafa | 156 | fg |
#a1a1aa | 89 | fg-muted |
#18181b | 234 | surface |
#181819 | 2 | Merge with #18181b |
#27272a | 67 | border |
Outcome
Teams across the organization now use GDS to build interfaces without needing a designer involved in every screen. Data science builds dashboards with it. Product teams move faster because engineers trust that what they see in Figma will match what they ship. Design reviews focus on product decisions instead of catching implementation inconsistencies.