Design Tokens
Complete token reference — CSS custom properties, naming conventions, and theme mapping.
Token Architecture
Lexicon uses a 3-layer token system. Each layer builds on the one below, creating a chain from raw values to component-specific styles that can be themed and customised.
Raw colour values — the full palette of hues and shades. These are never used directly in components.
slate-50, blue-600, red-500
Purpose-based aliases that map primitives to meaning. They resolve differently per theme (light/dark).
text/default → slate-900 (light) → slate-100 (dark)
Component-specific tokens that reference semantics. Scoped to a single component for precise control.
button/primary/background → brand-bold → blue-600
Token Naming Convention
All tokens follow a consistent category/group/modifier pattern:
Token Reference
Complete reference of all 302 design tokens grouped by collection. Values shown as {light} / {dark} for theme-aware tokens.
Primitives
(102)Alpha
(11)Size Units
(48)Semantic Colours
(111)Typography
(30)Showing representative tokens from each collection. Full set available in the exported token files.
Installation
Clone the Lexicon repository and copy the token files you need into your project. Available as CSS custom properties, a Tailwind preset, and raw JSON.
Get the files
git clone https://github.com/jpace-cloud/lexicon.gitCSS Custom Properties
/* Copy css/lexicon.css into your project */
@import './path/to/lexicon.css';Tailwind Preset
// Copy tailwind/lexicon-preset.js into your project
// tailwind.config.js
module.exports = {
presets: [require('./lexicon-preset')],
}