# Lattice Design System 2.2.0

> The design system for Lattice Studio, the operator console and web viewer for real-time volumetric capture. Near-black default, charcoal layers, IBM Plex Sans and Mono, 0px corners, flat borders, no drop shadows, and sparse blue/navy accents. 61 numbered normative rules with stable IDs, semantic --lt-* tokens, working components, and a complete handoff for people and AI.

Read lattice-ai-guide.md first: it is the complete context, every rule, all token values, the recipes, and the original mark SVG. Use lattice-system.json when you need exact values or want to validate output programmatically. Precedence: task-specific instructions > MUST rules > tokens and component contracts > guidance and examples. All example metrics and scenes are simulated; do not present them as measured claims.

## Read first

- [Complete AI guide](https://design.lattice.cx/lattice-ai-guide.md): full context, 61 rules, token values, recipes, review checklist, and the mark geometry in one Markdown file
- [Structured contract](https://design.lattice.cx/lattice-system.json): the same system as JSON — rules, foundation and theme tokens, type scale, data palettes, layout, SVG assets, sources, provenance
- [Start here](https://design.lattice.cx/START-HERE.md): the three ways to use the system, with a starter prompt

## Implementation files

- [Tokens](https://design.lattice.cx/lattice-tokens.css): foundation plus light and dark semantic tokens as --lt-* custom properties
- [Components](https://design.lattice.cx/lattice-components.css): reference component and guide styles; load after the tokens
- [Fonts](https://design.lattice.cx/lattice-fonts.css): self-contained IBM Plex faces, SIL Open Font License 1.1
- [Working starter](https://design.lattice.cx/lattice-starter): a standalone page with the fonts, tokens, logo, and a working session form
- [Mark](https://design.lattice.cx/lattice-mark.svg): the original six-path logo geometry, colored with currentColor
- [Lockup](https://design.lattice.cx/lattice-lockup.svg): mark plus wordmark; needs IBM Plex Sans

## Optional

- [Visual guide](https://design.lattice.cx/): the interactive human reference with every rule, example, and state
- [Contrast report](https://design.lattice.cx/contrast-report.json): measured sRGB contrast pairs for both themes
- [Full text for language models](https://design.lattice.cx/llms-full.txt): identical to the complete AI guide
- [Complete kit as one zip](https://design.lattice.cx/lattice-kit.zip): every file above plus the icons and font licenses

Short routes: /ai (AI guide), /contract (JSON), /tokens (CSS), /starter, /kit, /llms.