Building a design system in public: meet Lexicon

Every product I've built at the pace runs on the same foundation: Lexicon. It's a three-layer design token system with primitive React components, a Tailwind preset, and comprehensive documentation.

Why build a design system?

Consistency, speed, and correctness. When every product shares the same tokens and components, the design vocabulary stays coherent. When those tokens are the single source of truth, there's no drift between Figma and code.

The architecture

Lexicon uses three layers:

• Primitive tokens — raw values like colours, spacing, and font sizes
• Semantic tokens — contextual mappings like background, text, and border colours
• Component tokens — per-component decisions that reference semantic tokens

This layering means changing a single primitive ripples through the entire system predictably.

Open source

The core is MIT-licensed — 419 tokens, 10 React components, CSS custom properties, and a Tailwind preset. Advanced components, page templates, and the Figma library are available through Lexicon Pro.

Explore it at thepace.io/lexicon.