# Comfort modes

Visualli is for visual learners — and that includes people with ADHD, dyslexia, low vision, color-vision differences and motion sensitivity. Comfort is a first-class setting, reached from the sliders icon in the Vault footer (`ComfortPanel`), remembered per account and applied before the first paint.

## The model: two choices and four switches
**Appearance** — Light · Dark · System.
**Palette** — one of four, each with a light and dark theme (8 themes in `tokens.json`):

| Palette | `data-theme` | What changes | For |
| --- | --- | --- | --- |
| Standard | `light` / `dark` | The full spectrum. | Everyone (default). |
| Focus | `focus-light` / `focus-dark` | Topic fills desaturate to ~45%; edges and canvas quieten; hovering (or, on touch, selecting) an idea dims all others to 40% (spotlight). | ADHD, anxiety, busy maps. |
| Color-safe | `colorsafe-light` / `colorsafe-dark` | Topics re-map to Okabe & Ito-derived pastels that stay distinct with any color vision; statuses leave the red–green axis (blue = done, vermillion = problem). | Deuteranopia, protanopia, tritanopia. |
| High contrast | `contrast-light` / `contrast-dark` | Pure white/black grounds, every text token ≥ 7:1, rings and control borders ≥ 3:1 (outer ring 4.5:1+), no shadows, 2px outlines on all chrome. Statuses are also color-safe. | Low vision, bright sunlight, projectors. |

**Switches** (independent of palette):
| Switch | Attribute | Effect |
| --- | --- | --- |
| Readable type | `data-type="readable"` | Kalam, Caveat and Haksen fall back to Atkinson Hyperlegible Next, bold, +0.02em tracking, no italics. Helps dyslexic readers. |
| Larger text | `data-scale="lg"` | UI text one step up (15→17px body), node labels ×1.15. |
| Reduce motion | `data-motion="reduced"` | No dives or blooms; 120ms fades only. Also honored automatically from `prefers-reduced-motion`. |
| Gradual reveal | `data-reveal="gradual"` / `"instant"` | On: ideas bloom one by one. Off: a layer appears whole. Some ADHD users prefer each; it is not tied to motion. |

## Rules
- Never encode anything in color alone — rings, labels, connector style, icons and words carry the meaning, so every palette is safe by construction.
- Statuses always pair icon + word + color.
- Every palette passes the same contrast audit: text 4.5:1 (7:1 in High contrast) on every surface its token note names; focus ring, control borders and connector strokes 3:1.
- Comfort settings are presented as *comfort*, never as "accessibility mode" or "disability settings". Copy describes the benefit ("Quieter colors, a spotlight on what you hover").
- `applyComfort(choice)` writes all five attributes on `<html>`; server-render them from the saved preference to avoid a flash.