# Alea Protection — Design System

This file lives in `ai_assets/`, alongside the other LLM-facing artifacts. The deck (`../index.html`) is the human-facing render; the files below are the source of truth for agents.

## Files

- [tokens.json](./tokens.json) — design tokens in W3C Design Tokens format. Colors, type, spacing, radii, shadows, motion. Use this for any quantitative value (hex codes, px, ms).
- [brand.md](./brand.md) — voice, principles, do/don't, logo usage, imagery direction. Use this for any qualitative rule.
- [../css/colors_and_type.css](../css/colors_and_type.css) — the CSS variables themselves; `tokens.json` is generated from this.
- [../index.html](../index.html) — the visual deck (1920×1080 slides, presented or exported to PDF).

## Update protocol

`tokens.json`, `brand.md`, and this file are auto-generated by `../scripts/generate-design-system.mjs` from `../css/colors_and_type.css` and `../index.html`. Edit the source files, not the outputs.

## Typical agent flow

1. Need a color, font size, radius, shadow, or motion value? Read `tokens.json`.
2. Need a voice rule, do/don't, or logo guidance? Read `brand.md`.
3. Producing CSS for a downstream surface? Reference the variable names from `../css/colors_and_type.css` (e.g. `var(--alea-eggshell)`) so it stays in sync.