[001] Problem
No theming, hardcoded colors and pages that looked nothing alike.
There was no design system when I joined Pages looked different from each other, engineers kept rebuilding the same components, and the codebase had zero theming, just hardcoded colors everywhere. Every new feature made the inconsistency worse.
[002] Constraints
One designer, live product, dense data-heavy screens.
I was the only designer on a live product with dense, data heavy screens.
Whatever system I built had to plug into production without slowing anyone down.
[003] Insight
Systems break in the gap between Figma and code, not in the components.
Design systems don't break because of bad components. They break because no one owns what happens between Figma and code. Small mismatches pile up quietly and within months the codebase looks nothing like the designs. If the designer doesn't own the implementation layer, the system falls apart.
[004] Strategy
Semantic tokens that carry meaning, not just color names.
I structured everything with Atomic Design and built semantic tokens to separate visual decisions from code. Instead of names like blue-500 tokens like surface-primary carry meaning. Dark mode worked from day one, and adding light mode later became a config change, not a rewrite.
// Tokens
$color-primary: var(--color-blue-400);
$color-primary-hover: var(--color-blue-300);
$color-primary-focus: var(--color-blue-200);
$color-secondary: var(--color-neutral-700);
$color-secondary-hover: var(--color-neutral-600);
$color-secondary-focus: var(--color-neutral-400);
// Surface tokens
$color-surface-ground: var(--color-neutral-1000);
$color-surface-hover: var(--color-neutral-900);
$color-surface-selected: var(--color-blue-500);
$color-surface-selected-hover: var(--color-blue-600);
$color-surface-card: var(--color-neutral-900);
$color-surface-card-hover: var(--color-neutral-900);
$color-surface-menu: var(--color-neutral-800);
$color-surface-menu-hover: var(--color-neutral-700);
$color-surface-secondary-hover: var(--color-neutral-800);
$color-surface-border: var(--color-neutral-600);
$color-surface-border-subtle: var(--color-neutral-800);
$color-surface-overlay: var(--color-transparent-black);
$color-surface-shadow: var(--color-transparent-shadow);
$color-surface-highlight-100: var(--color-transparent-highlight-100);
$color-surface-highlight-200: var(--color-transparent-highlight-200);
// Severity tokens
$color-severity-info: var(--color-blue-100);
$color-severity-info-transparent: var(--color-transparent-primary);
$color-severity-success: var(--color-accent-green);
$color-severity-success-transparent: var(--color-transparent-green);
$color-severity-important: var(--color-accent-yellow);
$color-severity-important-transparent: var(--color-transparent-yellow);
$color-severity-warning: var(--color-accent-orange);
$color-severity-warning-transparent: var(--color-transparent-orange);
$color-severity-danger: var(--color-red-100);
$color-severity-danger-transparent: var(--color-transparent-red);
$color-severity-extra: var(--color-accent-purple);
$color-severity-extra-transparent: var(--color-transparent-purple);
$color-severity-unimportant: var(--color-accent-grey);
$color-severity-unimportant-transparent: var(--color-transparent-grey);
// Text tokens
$color-text-primary: var(--color-neutral-100);
$color-text-primary-invert: var(--color-neutral-1000);
$color-text-secondary: var(--color-neutral-200);
$color-text-light: var(--color-neutral-350);
$color-text-secondary-invert: var(--color-neutral-900);
$color-text-tertiary: var(--color-neutral-300);
$color-text-tertiary-invert: var(--color-neutral-800);
$color-text-selected: var(--color-blue-200);
// Button tokens
$color-button-primary: $color-primary;
$color-button-primary-hover: $color-primary-hover;
$color-button-primary-focus: $color-primary-hover;
$color-button-secondary: $color-secondary;
$color-button-secondary-hover: $color-secondary-hover;
$color-button-secondary-focus: $color-secondary-focus;
$color-button-danger: var(--color-red-200);
$color-button-danger-hover: var(--color-red-100);
$color-button-danger-focus: var(--color-red-100);[005] Tokens
Light mode as a variable swap, not a six-month project.
The token system has a multi-tier token architecture. raw values feed semantic names, which feed component overrides. Everything flows from one source. When the business asked for light mode, it was a variable swap, not a six month project.
[006] Components
Designers build in hours, engineers pull from one library.
Four Figma libraries cover fundamentals, components, patterns, and icons, all mirrored in a React and Sass codebase. Every component has full variants, interaction states, and Storybook docs. Designers build screens in hours and engineers pull from one shared library.
[007] Code
No handoff, no translation errors.
I wrote the Sass for every component, built the mixins and utilities, and managed the token logic myself. I opened my own PRs and approved all design system code changes. No handoff, no translation errors. The designer was the implementer.
[008] Governance
People were taught the workflow, not just given a link.
I set up Storybook with engineering, documented every component in Figma, onboarded each new hire personally, and ran training for the full R&D org twice a year. Adoption stuck because people were taught the workflow, not just given a link.
[009] Execution
Design, write Sass, open a PR, ship fast, iterate.
I owned the system end to end, working with a tech lead, a senior developer, and QA. The cycle was tight:
design in Figma, write the Sass, open a PR, review the integration. Ship fast, get feedback, iterate. The system had its own backlog like any product.
[010] Validation
Components reduced from days to minutes. complex flows from weeks to days.
I measured adoption through Storybook usage, Figma insert counts, and whether one off components showed up in code reviews. Components implementation went from days to minutes, complex flows from 1.5 weeks to 2 days.
[011] Outcome
Design reviews moved from pixel nitpicking to product thinking.
The system became the shared language across R&D. Design reviews moved from pixel nitpicking to product thinking. Engineers stopped rebuilding basic UI. QA stopped filing visual bugs. 5 years in, I still contribute to both Figma and code. That dual ownership is what keeps it alive.