All work
Design Systems
2023
Tessel
A token-based design system shared by four product teams across web and mobile.
Client
Northbeam Energy
Role
Design Systems Lead
Timeline
9 months
Services
Design Tokens, Components, Documentation
320 → 84
components
30%
faster design-to-dev handoff
100%
WCAG AA colour pairs
01
The problem
02
Research
I audited every screen in production and interviewed designers and engineers from all four teams.
Teams didn’t lack components; they lacked trust in them.
Naming was the biggest source of confusion.
Accessibility checks happened at the end, if at all.
03
Process
We started with tokens, not components. Colour, type, space and motion were defined once and shipped to Figma, iOS and React from a single source.
Each component went through a public RFC, so teams shaped the system instead of receiving it.
04
The solution
Tessel ships 84 components, each with usage notes, do-and-don’t examples and accessibility guidance written in plain English.
Contribution as a habit
A monthly “system hour” lets any designer propose changes, which keeps the library alive without a dedicated team of ten.
05
Outcomes
Handoff time dropped by roughly a third, every colour pair now passes WCAG AA, and new hires ship their first feature in their second week.
Tessel is now maintained by a rotating group of four designers, which is exactly how a system should live.
Next case study →
Northbeam Ops
An operations dashboard that helps grid teams see, and trust, renewable forecasts.
