Practice
Design Systems
One library underneath seven brands, a Figma library for a rebuild that never launched, and the Storybook conversion I went back and finished. The tools changed. The problem did not.
Where it started
I got here through Brad Frost, before "design system" was the phrase everybody used.
Atomic design and Pattern Lab, two workshops, and more talks than I can count. I brought both into MTG Media Group, a print publisher that had not built a responsive site yet. Plate came first, then Alt-Meat. Hotels and Meatingplace were in progress when the company was acquired and the sites were sunsetted.
Changing how a team works is a persuasion problem before it is a craft problem. Nobody asked for any of this.
Pattern Lab
One component library sat underneath seven publication brands and six responsive web products.
Both instances below still run. Plate carries eleven brand colors with a semantic layer aliased on top, so a section reads food or chefs and a state reads error or warning rather than a hex or a hue name. In the Sass, $error points at $red rather than at a value, so the brand color changes in one place and everything naming it follows. Sixty four documented patterns climb from color and type through buttons, bylines and comment threads out to the assembled page templates. Alt-Meat runs its own palette and typeface on the same structure.
Drag the viewport control. The whole library was built mobile first, which was not a settled argument in B2B publishing at the time.
Figma
Meatingplace was the flagship daily news site and the last thing I worked on there. The rebuild was finished. It never launched.
The library runs to roughly 600 component variants with desktop and mobile across the whole product: multi step registration with processing states, the supplier directory, the equipment exchange with its own ad creation and checkout, and the paywall and sponsorship states that paid for the place. Forty two tokens underneath it, covering color, type, border, spacing and the eight column grid.
Private equity acquired MTG, brought their own site, and the rebuild was shelved. The library is the only part of it that survived.
The eleven brand color styles are original. I added the variable layer recently, generated from those styles, since Figma variables did not exist when this was built.
Password protected. Ask me and I will send it.
Storybook
I had started moving all of these libraries to Storybook by hand before the acquisition. I never finished.
I went back recently and finished the Plate and Alt-Meat conversions with Cursor, generated from the Pattern Labs. The buttons and form fields are real stories with working controls, so the states are something you change rather than something you read about.
Same components, same decisions, a decade of tooling apart. That is the part worth noticing.
At PayPal
Three versions of the design library were live at the same time, with a fourth coming, and checkout was locked to the oldest one.
Engineering could not move off it. So a real part of that job was telling product managers which ideas were presentable now and which ones were years from shipping. Every merchant proposal I built came out of that constrained library.
I also built content tokens that connected the engineering Storybook to Figma so content designers worked from the same source, and a Figma plugin that assembles a merchant's full set of checkout flows out of the published library components. That took setup from most of a day to ten or fifteen minutes across a 38 merchant program.
What I actually think
A component library is the easy half. The hard half is the version nobody can upgrade off, the pattern two teams named differently, and the argument about whether a new component is a new component. Most of what I have learned about design systems came from the things that could not be built.
Naming is the part that decides whether anybody else can use it.