Clutch Design System
Clutch is the platform Lyft engineers use to operate their services. It is built by dozens of teams, each shipping their own workflow into the same shell, which is exactly the condition that breeds one-off buttons.
I designed the system underneath it. The audience is engineers building internal tools with no designer attached, so the constraint was blunt: the default had to be correct, because the default is what ships.
Density was the real request
Engineers kept asking for “a tighter version” and shipping it themselves with custom CSS. Making density a first-class token, one attribute, three derived spacing values, removed most of that drift, because the sanctioned path was now faster than the workaround.
Dark mode came from the same insight. It was not a preference feature; it was on-call at 3am.
For engineers, the docs are the interface
A design system for people who do not open Figma lives or dies on its documentation. Every component page shows the tokens it consumes and the states it ships with, so “why does this look wrong” is a lookup, not a message to a designer. And there is a contribution path, a team that needs a new pattern can propose it inside the system instead of forking outside it, which is the difference between a design system and a style guide.
The bet underneath all of it: consistency is a by-product of convenience. Engineers did not adopt the system because they were told to; they adopted it because the sanctioned path was genuinely the fastest way to ship an internal tool that looks intentional.
