A design system ten products actually use

The flagship file had 490 layers in a single frame. Thirty-seven of them sat at the top level. Thirteen were untracked groups with names like Group 12 and Rectangle 4 Copy 85. Eleven things were components; everything else was a copy of something that used to be a component.

Nobody had done anything wrong. This is what a file looks like after three years of shipping under deadline — every rush leaves a copy behind, and copies don't inherit changes.

The cost showed up as time. Changing a color across the scoreboard cards took twenty seconds of hunting. Adjusting a layout took a minute and a half. Small numbers, until you multiply them by every edit, every designer, every sprint — and until you notice that the fear of touching anything had quietly become a design constraint of its own.

I audited how fifteen mature systems handle the same problems — Stripe, Shopify, Airbnb, Meta, Netflix, Spotify, Dropbox and others — looking specifically at naming conventions and nesting depth rather than at visual style. Style is the easy part. Conventions are what survive a team.

Then I rebuilt one screen end to end as a pilot before touching anything else, working through five layers in order. Each one had to hold before the next made sense.

Layout

Flatten the frame, name every layer to a convention, and make the panel legible top to bottom. If you can't read the file, you can't govern it.

Hierarchy

Group by meaning rather than by proximity. A card's contents belong to the card, not to whatever happened to be selected when someone hit ⌘G.

Components

Fix dimensions, define variants, and make the naming predictive — if you can guess the name, you can find the component without searching.

Spacing

One scale, applied everywhere. Odd values were the tell for where something had been nudged by hand.

Architecture

Nested components and a single color scheme, so a change at the library level propagates instead of requiring a sweep.

Component count went up, on purpose

Components in the pilot frame rose from 11 to 16 — a 45% increase, in a project otherwise reported as reductions. That was the goal. Loose layers became governed components. The number that mattered was total layers falling by 26% at the same time: fewer things, more of them under control.

I've since learned to lead with that when presenting to engineering, because "we added components" and "we simplified the file" sound contradictory until you show both numbers together.

I measured the edits, not the file

File size dropped 9%, which is the kind of metric that sounds like progress and changes nothing. So I timed the four edits designers actually perform all day — resize, retype, recolor, relayout — before and after, with a stopwatch.

That reframed the conversation. Nobody approves a refactor to save 200 kilobytes. They approve one that gives a designer back most of an afternoon.

I built the system before I built the case for it. The pilot was finished before anyone outside design saw a number, which meant I spent the first month proving something I could have gotten agreement on in a week. Now I time the edits first and present that, then ask for the room to fix it.

I under-documented the conventions. The naming scheme is legible once you've seen it and invisible until then. A one-page rulesheet would have saved every conversation that started with "which component do I use here."

The thing I'd keep: rebuilding a single real screen end to end before proposing anything. Every argument I needed later came from that one file.