Design Systems

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 shared responsive framework sat underneath seven publication brands and six responsive web products, with a separate design system for each product built on top of it.

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.

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.

This site

The library behind the page you are reading.

Tokens, components and patterns for stevendesignco.com, with the contrast ratios computed live in the browser and a theme switch in the toolbar.

Its stylesheet is not a copy. A sync step pulls the CSS this site actually ships and writes it into the Storybook at build time, so the library cannot quietly drift from production. That is the same problem the Pattern Labs above were built to solve, handled with the tooling I have now.

Alongside it, written documentation answers how, when and where to use every component, for designers, engineers, writers and testers. A library tells you what exists. Documentation is what lets someone use it correctly without asking.

The Figma library is the same system again, in the place designers work: two tiers of tokens, both themes, the components, and the screens built from them. Every value in it is read from the stylesheet this site ships, so it cannot drift either.

Keeping it correct

A library is the easy half. The hard half is the day after.

Every design system I have worked on was correct the week it shipped. The interesting question is what happens eighteen months later, when four people have touched it, the person who wrote the rule has left, and nobody can tell a decision from an accident.

So this site is gated. Seven automated checks run on every change: reflow and target size across eleven pages and eleven widths, accessibility on every page and inside the dialog that opens a case study in place, text contrast in both themes, High Contrast Mode, text-spacing overrides, and inline link distinction. A change that fails any of them cannot reach the live site. Documentation that falls out of step with the code fails the build.

The checks are not theoretical. Each one exists because something got through. A stylesheet that quietly started applying to three pages nobody was editing. A caption sitting at 3.31 to 1 on black, hidden behind a one-letter typo in a token name, in a theme no visitor could reach. A High Contrast rule that had never once applied, because a media query adds no specificity and a later rule won. An inline link measuring 1.02 to 1 against the paragraph around it, which the scanner called clean.

That last one is the part worth saying out loud. Automated tools pass things that are plainly broken. The link was invisible to everybody, not only to people with a colour vision deficiency, and axe reported the page as fine. So the rule here is that a new check has to be proven: break the thing on purpose, watch the check name it, then put it back. A check that has only ever passed is not evidence.

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.