Lexicon
A universal design system built for clarity.
Lexicon removes ambiguity: a complete Figma library, tailored utility classes, CSS custom properties, and clear implementation guidance. It’s also the shared foundation behind every product at the pace — tested in production, not just in theory.
What it does
Figma library
A complete, tokenised component library — ready to use, built on consistent foundations.
CSS custom properties
Design tokens shipped as CSS variables. Works with any stack, zero lock-in.
Tailored utilities
Purpose-built utility classes that map directly to the system — a Tailwind complement, not a copy.
Implementation guidance
Clear docs for every token, component, and pattern. No tribal knowledge.
Open-source core
The foundation is free — tokens, base components, and utilities for everyone.
Accessibility built in
Contrast, focus management, and semantic structure baked into every component.
Pricing
Free
The full documentation, design tokens, copy-paste code, and the React package — open to everyone.
- •All 122 components, documented
- •Copy-paste code for every component
- •Design tokens + CSS custom properties
- •Tailwind preset
- •The conformance validator
- •@lexicon_design/react package
Individual
Everything in Free, plus the design assets — for one designer.
- •Everything in Free
- •Figma library (.fig) — themed by the free plugin
- •3 custom themes — 5 export formats each
- •Page templates
- •Advanced component recipes
- •1 licensed seat
Team
Everything in Individual, shared across your whole team.
- •Everything in Individual
- •10 custom themes
- •10 licensed seats
- •Shared team access
- •Priority support
Organisation
The whole system, unlimited — with a hand in where it goes next.
- •Everything in Team
- •Unlimited seats & themes
- •Multi-brand + white-label docs
- •A direct line to the roadmap
Lexicon is on the way.
Parlance validates against it. Tailwind Translator maps to it. Everything connects through one system.