35 sheets — open any of them
Designsystems
A library I designed and published on Figma, and the systems I set up inside client products. The point of both is the same: fewer decisions made twice, and a build that matches the design.
A component is a matrix, not a picture
Every state crossed with every size, drawn rather than described. If a developer has to ask what the disabled state looks like at the medium size, the sheet has failed.
Tokens carry meaning, not appearance
Colour is published as Brand, Neutral, Error, Warning and Success on a numeric scale — so a rebrand is a token change, and nobody has to remember which blue was the right blue.
The system ends at the handoff
Sheets are only half of it. The other half is written documentation — interaction specs, empty and error states, responsive behaviour — so what ships is what was designed.
Foundations
The decisions everything else inherits. Colour is a ramp with semantic roles rather than a set of favourites; type, elevation and iconography are documented so two designers reach the same answer without asking each other.
Components
Each component is documented as a matrix, not a picture: every state crossed with every size. A developer should be able to build from these without asking what the disabled state looks like at the medium size.
Systems in production
A library only earns its keep once a real product is built on it. These are the systems I set up inside client work — where the constraints were someone else's brand, someone else's engineers and someone else's deadline.
See it in the products
These systems exist because products needed them. The case studies show what they were built for.