Design principles
Six principles that govern Lexicon. Decisions trace back to one of these.
Tokens, not values.
Every visible value — colour, spacing, radius, type, motion — resolves through a CSS variable. Components reference var(--…) exclusively. Hardcoded hex is a bug.
Restraint over decoration.
No bounce, no spring, no shimmer, no animated backgrounds, no parallax. The interaction is the design.
Typography is the system.
Geist for body and headings, Geist Mono for navigation, labels, code, metadata. Mono uppercase 11px is the dominant secondary type.
Numbered nav, named sections.
Information has structure — we make the structure visible. Sidebar groups carry a number. Sections carry an anchored heading.
Distinct identity, shared substrate.
Lexicon looks like Lexicon, not the marketing site. Tokens are scoped, brand layers are explicit, the chrome is self-contained.
Accessible by default.
Body text contrast on dark: #C5C6CA minimum. Secondary: #A1A1AA minimum. Focus indicators are visible. WCAG 2.2 AA is the floor, not the ceiling.