Skip to content

Stack Overflow.

One design system under 150 community sites, each with its own brand.

150

Sites. One design system.

Core · Themes · Sites

Stack Exchange ran 150 Q&A communities, from Stack Overflow to Cooking to Mathematics, each with its own brand and its own copy of the CSS. I was a design engineer on the founding team of the one design system underneath them all.

Role
Design engineer
Responsible for
Design system, new features
Scope
150 sites
Date
2014–2017

Foundations

Pull what every site shares into one core.

  • Design system documentation home, with Brand, Copywriting, Community, Product, Email, Handbook and Resources sections.
  • Buttons page of the documentation: button classes with their descriptions and modifiers.
  • Color palette page of the documentation: orange and neutral colour stops.

Utility classes, core components, and the naming that held them together.

Theming

One core. Every site overrides the rest.

  • Diagram: Core, then Site theme, then Site. The same card, with a heading, an input, tags and two buttons, themed three ways: Stack Overflow in orange, a community site in blue, and another community site in dark mode.

Same structure underneath, each community's look on top. The parts underneath stopped drifting.

Implementation

Fix a bug once, not 150 times.

Every site carried its own CSS, so every site broke in its own way. Each week brought a fresh batch of one-off bugs, site by site. We moved all 150 onto the core. From then on a fix landed everywhere at once, and the time went back into building. The system outlived my time there. The team extended it and launched it as Stacks.

Impact

150 sites
On one shared core
150 → 1
Shared core, instead of 150 forks
Stacks
What the system became

Next projects

All projects