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.