Lexicon

A design system for the pace’s products. Tokens, components, and the contract between design and code.

v0.1 · pre-release143 componentsDark-firstToken-driven

Overview

What is Lexicon?

Lexicon is the design system that powers the pace’s products. It defines the visual and interaction language — colour, typography, spacing, motion, components — and ships the tokens, primitives, and documentation that turn that language into shipping code.

Lexicon is not a marketing page or a Figma file alone. It is the contract: a verified, version-pinned source of truth. Designers reference it. Engineers consume it.

Principles

Six pillars

Tokens, not values

Every visible value resolves through a CSS variable. Hardcoded hex is a bug.

Restraint over decoration

No bounce, no spring, no shimmer. The interaction is the design.

Typography is the system

Geist for body, Geist Mono for labels and code. Mono uppercase 11px is the dominant secondary type.

Numbered nav, named sections

Information has structure. We make the structure visible.

Distinct identity

Lexicon looks like Lexicon, not the marketing site. Brand layers are explicit.

Accessible by default

Body contrast on dark: #C5C6CA minimum. WCAG 2.2 AA is the floor.

Read the full principles →

Install

Get Lexicon

Lexicon is in pre-release. The installable npm packages ship with the monorepo extraction in Phase 5. For now, browse the docs, use the design tokens reference, and download the Figma library.

1# Coming in Phase 5
2pnpm add @lexicon/tokens @lexicon/components

Installation details →

Figma

Design library

The Figma library is the source of truth for tokens, components, and patterns. Variables flow from Figma → JSON → CSS via the token pipeline.

Figma fileOpen in Figma →

File keyzwgSUFKchksLH9qAIPEvMMSemantic Colors collectionVariableCollectionId:7:2

Setup

Quick start

Tokens — Import the token CSS files into your app’s root layout. Confirm var(--color-bg) resolves in DevTools.
Fonts — Load Geist and Geist Mono. Confirm --lex-font-sans and --lex-font-mono resolve.
Theme — Wrap your app in a data-theme="dark" data-brand="lexicon" root. Light theme arrives in a future release.
Components — Import only the components you need. Avoid wholesale imports.

Full adoption checklist →

Library

Component library

Components

131

Single reusable UI elements: buttons, inputs, badges, cards, switches, tabs.

Patterns

Compositions: search bars, filter groups, form blocks, content cards.

Templates

—

Full page layouts: dashboards, login screens, settings, empty states.

Coming soon

Sports UI

Domain-specific bundle for sports, betting, and live-event interfaces.

Foundations

Design tokens

Every value in Lexicon — colour, type, spacing, radius, motion — resolves through a CSS variable. Tokens are layered: base primitives, theme overrides, brand overrides.

Colour

Surfaces, text, borders, accent, feedback.

Typography

Geist + Geist Mono, scale, weights, leading.

Spacing

A 4-based scale from xs to 3xl.

Motion

One entrance pattern. Three transition speeds.

Resources

Useful links

What's next

Roadmap

Phase 4i18n rollout — 24 languages, RTL deferred
Phase 5Monorepo extraction, npm packages, branded CLI
Phase 5Sports UI section ships
Phase 5Mobile navigation, full responsive pass