Masif Kadapa
← Back to work
002202410 months

Northstar

A design system that retired 9 parallel style kits and shipped 300+ components with zero regressions.

RoleDesign-system lead
Timeline10 months
StackReact · TypeScript · Storybook · CSS variables
Context

Three product teams had parallel styling systems that drifted apart. Dark mode collapsed intermittently and ARIA wiring was copied, pasted, and inconsistent.

The problem

Shipping velocity stalled because engineers hand-patched styles and no one dared refactor. Dark mode was a brittle catch-all flip, not a coherent theme.

How it was solved
  1. 01

    Built a material-first token architecture where colour, space, and type are single-sourced CSS custom properties.

  2. 02

    Made dark mode a runtime deterministic cascade of the same tokens instead of a separate theme file.

  3. 03

    Introduced an API-based snapshot suite so any visual drift fails the build, not the user.

  4. 04

    Documented every component with usage guidelines, not just demo code.

The detail worth mentioning
Dark mode is not a theme — it is a token override. Colour resolves at runtime, so it is deterministic, testable, and a wash for teams to opt into.
Outcome

320+components

all WCAG AA in CI, zero breaking API changes in a year

  • Delivered 320+ WCAG AA components consumed across three teams.
  • A 12-month run with zero breaking API changes and zero visual regressions.
  • Design-debt tickets dropped from ~40 a quarter to near zero.