02 / Foundations

Tokens

The full token surface — searchable, copy-able, the contract between design and code.

All tokens

Generated from app/lexicon/_tokens/base.css and app/lexicon/_tokens/lexicon.css. Light theme and Sports UI overrides will appear in additional layers as they ship.

Token	Value	Layer
`--lex-font-sans`	`var(--font-dm-sans), system fallback`	`base`
`--lex-font-mono`	`var(--font-jetbrains), ui-monospace`	`base`
`--spacing-xs`	`4px`	`base`
`--spacing-sm`	`8px`	`base`
`--spacing-md`	`16px`	`base`
`--spacing-lg`	`24px`	`base`
`--spacing-xl`	`32px`	`base`
`--spacing-2xl`	`48px`	`base`
`--spacing-3xl`	`64px`	`base`
`--lex-radius-sm`	`4px`	`base`
`--lex-radius-md`	`6px`	`base`
`--lex-radius-lg`	`10px`	`base`
`--lex-radius-pill`	`999px`	`base`
`--text-xs`	`12px`	`base`
`--text-sm`	`14px`	`base`
`--text-md`	`15px`	`base`
`--text-lg`	`17px`	`base`
`--text-xl`	`22px`	`base`
`--text-2xl`	`28px`	`base`
`--text-3xl`	`36px`	`base`
`--text-4xl`	`46px`	`base`
`--leading-tight`	`1.2`	`base`
`--leading-snug`	`1.4`	`base`
`--leading-normal`	`1.55`	`base`
`--leading-loose`	`1.75`	`base`
`--tracking-tighter`	`-0.02em`	`base`
`--tracking-tight`	`-0.01em`	`base`
`--tracking-normal`	`0em`	`base`
`--tracking-wide`	`0.02em`	`base`
`--tracking-wider`	`0.06em`	`base`
`--tracking-widest`	`0.1em`	`base`
`--weight-regular`	`400`	`base`
`--weight-medium`	`500`	`base`
`--weight-semibold`	`600`	`base`
`--weight-bold`	`700`	`base`
`--border-width-1`	`1px`	`base`
`--border-width-2`	`2px`	`base`
`--border-width-3`	`3px`	`base`
`--focus-ring-width`	`3px`	`base`
`--focus-ring-offset`	`2px`	`base`
`--focus-ring-color`	`var(--color-accent)`	`base`
`--transition-fast`	`120ms cubic-bezier(0.4,0,0.2,1)`	`base`
`--transition-base`	`180ms cubic-bezier(0.4,0,0.2,1)`	`base`
`--transition-slow`	`280ms cubic-bezier(0.4,0,0.2,1)`	`base`
`--z-base`	`0`	`base`
`--z-raised`	`10`	`base`
`--z-dropdown`	`100`	`base`
`--z-sticky`	`200`	`base`
`--z-overlay`	`300`	`base`
`--z-modal`	`400`	`base`
`--z-popover`	`500`	`base`
`--z-toast`	`600`	`base`
`--z-tooltip`	`700`	`base`
`--color-bg`	`#16161A`	`base`
`--color-surface`	`#1C1C22`	`base`
`--color-surface-2`	`#24242B`	`base`
`--color-stage`	`#1C1C22`	`base`
`--color-stage-dot`	`#35353D`	`base`
`--color-text`	`#ECEAE4`	`base`
`--color-text-2`	`#C5C6CA`	`base`
`--color-text-muted`	`#A1A1AA`	`base`
`--color-text-faint`	`#A1A1AA`	`base`
`--color-border`	`#2A2A30`	`base`
`--color-border-strong`	`#3C3C42`	`base`
`--color-success`	`#7ACB8E`	`base`
`--color-success-soft`	`#1B2620`	`base`
`--color-warn`	`#E3BE78`	`base`
`--color-warn-soft`	`#2A2317`	`base`
`--color-do-accent`	`#6BB57D`	`base`
`--color-do-surface`	`#1B231E`	`base`
`--color-dont-accent`	`#D87878`	`base`
`--color-dont-surface`	`#24191A`	`base`
`--color-code-bg`	`#111115`	`base`
`--color-code-border`	`#262629`	`base`
`--color-code-head-bg`	`#18181C`	`base`
`--code-tag`	`#E8A268`	`base`
`--code-attr`	`#8FB4E0`	`base`
`--code-str`	`#9CCBA3`	`base`
`--code-comment`	`#6B6B6B`	`base`
`--code-keyword`	`#C599D7`	`base`
`--code-punct`	`#B8B6AE`	`base`
`--shadow-sm`	`0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30)`	`base`
`--shadow-md`	`0 2px 6px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35)`	`base`
`--shadow-lg`	`0 4px 12px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.40)`	`base`
`--shadow-xl`	`0 8px 24px rgba(0,0,0,.65), 0 24px 64px rgba(0,0,0,.50)`	`base`
`--color-accent`	`#7AA0D4`	`brand:lexicon`
`--color-accent-soft`	`#1F2A3C`	`brand:lexicon`
`--color-action-bg`	`#ECEAE4`	`brand:lexicon`
`--color-action-text`	`#111115`	`brand:lexicon`
`--color-action-hover`	`#FFFFFF`	`brand:lexicon`
`--color-secondary-bg`	`#24242B`	`brand:lexicon`
`--color-secondary-text`	`#ECEAE4`	`brand:lexicon`
`--color-secondary-border`	`#3C3C42`	`brand:lexicon`
`--color-ghost-text`	`#ECEAE4`	`brand:lexicon`
`--color-ghost-hover`	`rgba(255,255,255,0.06)`	`brand:lexicon`
`--color-danger-bg`	`#C24646`	`brand:lexicon`
`--color-danger-text`	`#FFFFFF`	`brand:lexicon`

How to consume

Components and pages reference tokens through var(--…) only. Hardcoded hex is a bug.

// ✓ correct
<div style={{ background: 'var(--color-surface)' }}>

// ✗ never
<div style={{ background: '#1C1C22' }}>