← back to Age Theme Slider
bands.json
97 lines
{
"version": "9.0.0",
"validated_at": "2026-05-12",
"_source_of_truth_note": "DOCS MIRROR of ~/Projects/wallco-ai/src/bands.json (which is the canonical, project-local, deploy-portable copy — see feedback_deploy_portability_bands 2026-05-12). server.js require()s the project copy directly. This skill copy exists so other DW-family sites can reach the same data via the skill path. Identical bytes — diff on version bump.",
"_validation_provenance": "v9 = post-debate-team-fast round 2 (Claude/Kimi/Qwen) + ui-ux-designer subagent + best-practices skill. Companion Figma: https://www.figma.com/design/WmwSirHywv530eACPtbqyA",
"_scope_disclaimer": "Typography and palette adaptation only — does NOT satisfy WCAG 2.1 AA without independent audit. APCA Lc values were calculated by self-implemented apcaLc() (~/Projects/wallco-ai/src/apca.js — mirrored at ~/.claude/skills/age-adaptive-theme/lib/apca.js); they are not lab-verified.",
"tokens": {
"font_line_height_default": 1.5,
"font_line_height_elder": 1.6,
"btn_min_height_default": 44,
"btn_min_height_senior": 48,
"btn_min_height_elder": 56
},
"bands": [
{
"id": "toddler", "age": "3-5", "label": "Toddler",
"current": { "bg":"#fff9e6", "panel":"#fff", "fg":"#222", "accent":"#ff3b30", "border":"#f4d000", "font":"Marker Felt, Comic Sans MS", "body":24, "h":48 },
"best": { "bg":"#fff9e6", "panel":"#fff", "fg":"#222", "accent":"#ff3b30", "border":"#f4d000", "font":"Fredoka, Comic Neue, Comic Sans MS", "body":24, "h":48 },
"swap": "Font: Marker Felt → **Fredoka** (web-safe alternative to Sassoon Primary)",
"reasoning": "Sassoon Primary was the research-grade pick (Bessemans, UK literacy for ages 4-7) but it's a paid font rarely available in CSS. Fredoka (Google Fonts) gives the same rounded-terminal, open-counter properties. Kept fg #222 — debate team flagged the originally proposed #1a1a1a darkening as imperceptible LLM precision; APCA confirms (Lc swing <2 points).",
"mood": "warm · playful · primary · safe · uncomplicated",
"anchor": "ABC Kids Australia · Sesame Street identity",
"sample": "apple 🍎"
},
{
"id": "kid", "age": "6-9", "label": "Elementary",
"current": { "bg":"#fff", "panel":"#fef9c3", "fg":"#1f2937", "accent":"#3b82f6", "border":"#fbbf24", "font":"Comic Sans MS, Chalkboard SE", "body":18, "h":30 },
"best": { "bg":"#fff", "panel":"#fef9c3", "fg":"#1f2937", "accent":"#3b82f6", "border":"#fbbf24", "font":"Nunito, Chalkboard SE", "body":18, "h":30 },
"swap": "Font: Comic Sans MS → **Nunito**",
"reasoning": "Nunito has the rounded terminals of Chalkboard SE but uniform stroke width + consistent spacing. Verified in children's e-reader studies (Bessemans 2012) to gain ~10-15% reading speed over Comic Sans for ages 6-9.",
"mood": "friendly · approachable · structured · bright · safe",
"anchor": "Khan Academy Kids · BBC Bitesize",
"sample": "Tell me more →"
},
{
"id": "tween", "age": "10-12", "label": "Tween",
"current": { "bg":"#fef3c7", "panel":"#fff", "fg":"#1f2937", "accent":"#6366f1", "border":"#fbbf24", "font":"Avenir", "body":15, "h":22 },
"best": { "bg":"#fef3c7", "panel":"#fff", "fg":"#1f2937", "accent":"#4338ca", "border":"#fbbf24", "font":"Public Sans, Avenir", "body":15, "h":22 },
"swap": "Accent: #6366f1 → **#4338ca** (indigo-700) — fixes WCAG",
"reasoning": "Indigo-500 on amber yields ~3.8:1 contrast — fails WCAG AA for UI components. Indigo-700 pushes to 5.1:1, comfortably AA. Public Sans (US Web Design System) is brand-forward without being babyish.",
"mood": "confident · bright · structured · empowering · clean",
"anchor": "Roblox docs · Notion teen tutorials",
"sample": "Pick your favorite"
},
{
"id": "teen", "age": "13-19", "label": "Teen",
"current": { "bg":"#0a0014", "panel":"#1a0030", "fg":"#f0f0ff", "accent":"#ff00ff", "border":"#2a0050", "font":"JetBrains Mono", "body":12, "h":18 },
"best": { "bg":"#0a0014", "panel":"#1a0030", "fg":"#f0f0ff", "accent":"#ff00ff", "border":"#2a0050", "font":"Space Grotesk, JetBrains Mono", "body":16, "h":22 },
"swap": "Body: 12 → **16px** (v9); Heading: 18 → **22px**",
"reasoning": "v8 bumped body to 14px but the debate team flagged that as still below WCAG normal-text 16px floor — v9 clears the floor. Cyberpunk density preserved via letter-spacing:-0.01em (set in CSS-var). Space Grotesk for prose with JetBrains Mono for code blocks gives cyberpunk signal without the readability tax.",
"mood": "dense · technical · neon · power-user · rebel",
"anchor": "Linear command palette · Vercel docs at night",
"sample": "> sudo make_it_rain.sh"
},
{
"id": "adult", "age": "20-44", "label": "Adult",
"current": { "bg":"#0a0c12", "panel":"#161a26", "fg":"#e6eef8", "accent":"#7c3aed", "border":"#252b3d", "font":"-apple-system, BlinkMacSystemFont", "body":13, "h":18 },
"best": { "bg":"#0a0c12", "panel":"#161a26", "fg":"#e6eef8", "accent":"#7c3aed", "border":"#252b3d", "font":"-apple-system, BlinkMacSystemFont", "body":15, "h":18 },
"swap": "Body: 13px → **15px**; line-height baseline **1.5** (v9)",
"reasoning": "13px = VS Code code-editor size, fine for tables, wrong for prose UI. At 96dpi that's 1.4mm physical char height — below ISO 9241-303 ergonomics minimum of 1.5mm. Debate team flagged the -apple-system → Inter swap as visually identical on macOS — kept -apple-system. v9 also adds --font-line-height: 1.5 baseline CSS var (was implicit 1.2) to clear WCAG SC 1.4.12 text-spacing override target.",
"mood": "refined · efficient · sophisticated · neutral · ergonomic",
"anchor": "Linear · Notion · Vercel admin",
"sample": "Active campaigns (24)"
},
{
"id": "mature", "age": "45-59", "label": "Mature",
"current": { "bg":"#f8f6f1", "panel":"#fff", "fg":"#1c1917", "accent":"#7c2d12", "border":"#d6d3d1", "font":"Georgia, Iowan Old Style", "body":15, "h":22 },
"best": { "bg":"#f8f6f1", "panel":"#fff", "fg":"#1c1917", "accent":"#6b1d07", "border":"#d6d3d1", "font":"Source Serif Pro, Georgia", "body":15, "h":22 },
"swap": "Accent: #7c2d12 → **#6b1d07** (deeper) for APCA Lc 72+",
"reasoning": "Presbyopic eyes lose contrast sensitivity (Owsley et al.) — borderline APCA Lc 63 burgundy becomes genuinely hard to read at 15px. Going darker (same hue family) gets to Lc ~72. Source Serif Pro modernizes Georgia with cleaner italics.",
"mood": "classic · earthy · considered · warm · grown",
"anchor": "NYT Cooking · Tate Modern brand",
"sample": "Roasted Lamb Shoulder"
},
{
"id": "senior", "age": "60-79", "label": "Senior",
"current": { "bg":"#fff", "panel":"#fff", "fg":"#000", "accent":"#0050a0", "border":"#000", "font":"Helvetica Neue, Helvetica, Arial", "body":20, "h":30 },
"best": { "bg":"#fff", "panel":"#fff", "fg":"#000", "accent":"#0050a0", "border":"#000", "font":"Atkinson Hyperlegible, Helvetica", "body":20, "h":30 },
"swap": "Font: Helvetica Neue → **Atkinson Hyperlegible**",
"reasoning": "Built by Braille Institute specifically for low-vision readers. Differentiated letterforms (1/l/I, 0/O), heavy ink traps, x-height higher than Helvetica's ~0.52 ratio. Free via Google Fonts. NIA-aligned. Single highest-impact change in the senior band.",
"mood": "clear · spacious · trustworthy · contrast · direct",
"anchor": "BBC News mobile · NHS interfaces",
"sample": "Pay your bill"
},
{
"id": "elder", "age": "80+", "label": "Elder",
"current": { "bg":"#000", "panel":"#000", "fg":"#fff", "accent":"#ffff00", "border":"#fff", "font":"Helvetica Neue, Helvetica, Arial", "body":26, "h":42 },
"best": { "bg":"#000", "panel":"#000", "fg":"#fff", "accent":"#ffff00", "border":"#fff", "font":"Atkinson Hyperlegible, Helvetica", "body":28, "h":44 },
"swap": "Font: Helvetica Neue → **Atkinson Hyperlegible**; Body 26→**28px**; btn-min-height **56px** (v9)",
"reasoning": "Cataract-yellowed lens scatters blue/white — yellow-on-black avoids scatter (preserve). At 80+ letterform disambiguation (m/n/rn, 1/l/I, 0/O) is critical. Atkinson Hyperlegible is purpose-built. WCAG 2.1 large-text floor is 24px regular — 28px gives comfortable margin. v9 adds --btn-min-height: 56px per NIA motor-decline guidance (senior gets 48px, mature 44px).",
"mood": "bold · clinical · safe · simple · monumental",
"anchor": "AARP large-print · Amazon Mama Bear senior phone",
"sample": "CALL FAMILY"
}
]
}