Installation

Lexicon tokens are available directly from the repository. Choose the method that fits your workflow. All tokens are free — no purchase required.

1 Get the files

Clone the Lexicon repository and copy the assets you need into your project:

git clone https://github.com/jpace-cloud/lexicon.git

The repo includes pre-built CSS, a Tailwind preset, raw JSON tokens, and component source code. No build step required to start using tokens.

2 Choose your integration

CSS custom properties

Copy css/lexicon.css into your project and import it. This single file provides every design token as a CSS custom property:

<!-- In HTML -->
<link rel="stylesheet" href="path/to/lexicon.css" />

<!-- Or in a JS bundler -->
import './path/to/lexicon.css';

Then use Lexicon tokens directly in your styles:

.card {
  background: var(--bg-surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
}

For the full CSS reset and component classes bundled together, use lexicon-bundle.css instead.

Tailwind CSS preset

Copy tailwind/lexicon-preset.js into your project and add it to your Tailwind config:

// tailwind.config.js
module.exports = {
  presets: [require('./lexicon-preset')],
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
};

This extends colors, fontFamily, fontSize, spacing, borderRadius, boxShadow, and timing utilities with Lexicon values:

<div class="bg-grey-950 text-white rounded-lg p-6 shadow-sm font-body">
  <h2 class="font-heading text-xl font-semibold text-purple-400">Dashboard</h2>
  <p class="text-grey-300 text-sm mt-2">Welcome back.</p>
</div>

Raw JSON tokens

The tokens/ directory contains the complete token system as structured JSON, organised in three layers:

tokens/
├── primitive/    # Raw values: colour hex codes, pixel sizes, font stacks
├── semantic/     # Intent-mapped: bg.primary, text.secondary, border.focus
└── component/    # Per-component: button.primary.bg, card.default.radius

Use these files to generate tokens for any platform — iOS, Android, Figma plugins, or custom build pipelines.

3 Try it

After importing lexicon.css, paste this into any HTML page:

<button style="
  background: var(--accent);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
">
  Get started
</button>

4 Add fonts

Lexicon uses three font families. Add these to your document <head>:

<!-- Satoshi (headings) -->
<link rel="stylesheet"
      href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap" />

<!-- DM Sans (body) + JetBrains Mono (code) -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

5 Verify it worked

Open your browser's developer tools and inspect any element using Lexicon tokens. The computed styles should resolve to real values:

/* In DevTools → Computed tab, you should see: */
background-color: rgb(124, 58, 237);    /* --accent */
border-radius: 8px;                     /* --radius-md */
font-family: "DM Sans", system-ui;      /* --font-body */

If any value shows as the literal var(--token-name)string, the stylesheet isn't loaded — check the import path.

Repository contents

Path	Contents
css/lexicon.css	All tokens as CSS custom properties + component classes
css/lexicon-bundle.css	Above + CSS reset
css/reset.css	CSS reset only
tailwind/lexicon-preset.js	Tailwind preset (colours, fonts, spacing, radii, shadows, motion)
tokens/primitive/	Raw colour, typography, spacing, radii, shadow, motion values (JSON)
tokens/semantic/	Intent-mapped colour, elevation, typography tokens (JSON)
tokens/component/	Per-component design decisions (JSON)
components/	React component source with TypeScript types

Full token reference

See the complete token catalogue with values, previews, and naming conventions on the Design Tokens foundation page.

Package distribution via npm is on the roadmap.