# OxiCloud Design System The single source of truth for how the frontend looks, behaves, and stays accessible. Pairs with [TOKENS.md](TOKENS.md) (auto-generated token reference) and [UIUX-ROADMAP.md](UIUX-ROADMAP.md) (the work plan). --- ## 1. Design tokens Everything visual routes through a token in [`static/css/base/variables.css`](../static/css/base/variables.css). Six scales, plus a curated color system. **Never hand-write a raw px/hex for these** — consume a token so the next change happens in one place. | Axis | Tokens | Notes | | --- | --- | --- | | Spacing | `--space-0 … --space-24` | 4px grid (+ half-steps 2/6/10/14). | | Radius | `--radius-xs … --radius-4xl`, `--radius-full` | `--radius` aliases `--radius-2xl`. | | Type | `--text-2xs … --text-6xl`, `--leading-*`, `--weight-*`, `--tracking-*` | rem-based (honors zoom). `.heading-page/-section/-card` utilities decouple role from element. | | Z-index | `--z-base … --z-max` | Semantic layers with gaps; no magic numbers. | | Motion | `--motion-fast/base/moderate/slow`, `--ease-standard/-emphasized/...` | `--ease-standard` is the decelerate default for entrances. | | Elevation | `--shadow-xs … --shadow-2xl` | Composed recipes layered on the `--color-shadow-*` alphas. | **Color.** One brand accent (orange `#ff5e3a`), one neutral slate ramp, and five semantics (success/warning/danger/info + accent), each unified to a single hue. Text tiers collapse to a handful that all clear **WCAG AA (4.5:1)** — verified by [`scripts/check-contrast.mjs`](../scripts/check-contrast.mjs). Use `--color-accent-text` (not `--color-accent`) for accent *text/links*. Governance: **one brand accent, one neutral ramp, five semantics — no new hero hues.** Run `node scripts/gen-token-docs.mjs` after editing tokens. --- ## 2. Accessibility rules (non-negotiable) These are enforced/aided by CI scripts and must hold for every new surface. - **Keyboard.** Everything interactive is reachable and operable by keyboard. Use `