Grid Nine

Nine Studio ships tools for small teams: four products maintained by six designers with no full-time systems lead. Their component library had grown past 240 entries, most of them near duplicates nobody felt safe deleting. We reduced it to nine geometric primitives and rebuilt every screen from that grid.

The brief

Four products had drifted into four visual dialects. The system needed one grammar, strict enough to unify the range and loose enough to keep each tool’s character. There was a commercial constraint too: nothing could go dark for a rewrite, so whatever we built had to be adopted screen by screen while the team kept shipping.

So the first fortnight was spent counting. Every button, card, table and panel across the four products went into one sheet, described by what it actually did rather than what it had been named. We finished with 243 components doing roughly nine jobs.

Finding the nine

The nine are shapes before they are components: frame, stack, field, tile, rail, sheet, marker, divider and pill. Each is defined by geometry and behaviour rather than by a use case, which is what stops a system growing a fifty-third variant of a card. A pricing table and a settings panel are the same tile at different densities. Naming them for form instead of function was the decision that made the rest hold together.

The first attempt went the other way and failed. We drafted a token layer to sit under the existing library, unifying colour and spacing without touching structure. It made the four products look related and behave nothing alike, and the drift came back inside a month because nothing stopped anyone drawing a new component. Rebuilding from primitives was slower and it removed the option. We also cut the spacing scale from eight steps to four, since much of the inconsistency turned out to be people choosing between 12 and 16 pixels with no reason to prefer either.

What shipped

Nine primitives in the design file and in code, a token set covering colour, spacing, type and elevation, and 62 patterns assembled from those primitives, each documented with the cases where it should not be used. Around them: a migration guide per product, a deprecation schedule, and a contribution rule that any proposed tenth primitive must first be built, badly, from the existing nine.

What we took away

All four products were migrated in eleven weeks without a feature freeze. The library went from 243 components to 71, and the team’s own tracking put design-to-shipped time down by about a third. The lesson was smaller than the system: a constraint people can hold in their heads beats documentation nobody opens. Six designers can recite nine primitives. Nobody could recite 243.