Atlas Design System

Placeholder case study. Sample content — replace with a real project.

Problem

Five product teams shipped interfaces that were recognizably from the same company and identifiably different from each other. There were four button implementations, three modal patterns, and a spacing scale that existed only as a shared understanding that never quite matched between teams.

A previous attempt at a shared library had failed for an instructive reason: it shipped components without shipping the vocabulary underneath them. Teams pulled in the Button, found it did not quite fit, and forked it. Within two quarters the library was another variant rather than a source of truth.

Approach

Tokens first, components second. The first release contained no components at all — only a token layer: color, spacing, type scale, radii, elevation, motion. Teams adopted tokens in their existing components, which delivered visual consistency without requiring anyone to rewrite anything. Adoption was incremental and reversible, so it was not a negotiation.

/* Semantic tokens map to primitives, so themes swap without touching markup. */
:root {
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--white);
  --color-text-primary: var(--gray-90);
  --space-gutter: var(--space-4);
}

[data-theme='dark'] {
  --color-surface: var(--gray-95);
  --color-surface-raised: var(--gray-90);
  --color-text-primary: var(--gray-5);
}

Components as the second layer. Only once tokens were in use across every team did components ship — and each one was extracted from something a team had already built, rather than designed speculatively. Every component in the initial set had at least two real call sites before it was generalized.

Accessibility in the primitives. Focus management, keyboard interaction, and ARIA wiring live in unstyled behavioral primitives. A team can restyle completely without re-litigating whether the dialog traps focus correctly.

Contribution over governance. Rather than a review board, any team could propose a component by opening a PR with its existing implementation and two consumers. Most proposals were accepted; the bar was evidence of reuse, not taste.

Outcome

• Adopted by all five teams within two quarters, with no mandate.
• Button implementations went from four to one; modal patterns from three to one.
• Automated accessibility violations in adopting surfaces dropped by about 80%, largely from centralized focus handling.
• Dark mode shipped across every product in a single sprint — it had become a token change rather than a per-team project.

The tokens-first sequencing is what made this work where the earlier attempt had not. Starting with components asks teams to accept someone else’s decisions all at once; starting with tokens asks them to accept a vocabulary, which is a much smaller thing to say yes to.