Design System Experiment

This project serves as an in-depth research testbed for keeping design tokens in sync across design tools and frontend implementations. By utilizing a shared contract of semantic CSS variables, we eliminate design drift entirely.

System Architecture

We define semantic color blocks and spacing directly in Figma, which maps 1-to-1 with our CSS variables in the Next.js frontend code:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --accent: oklch(0.396 0.141 20.8);
}

Interactive Demos

We can embed visual walkthroughs of the Figma community layouts using our IntersectionObserver-backed lazy layout tool:

For detailed design blueprints, check out the Design System Playbook.