Folio WCAG Canonical Tokens

Visual review sheet · 150 pairings audited · 45 failures → 96/96 pass · 2026-07-09

What changed

Dark primary buttons: white text → dark text (#0e1a12) on brighter green. Was 1.74:1, now 7.21:1
Muted text: light #6d7268 → #62675d (was 4.48:1, now 5.27:1). Dark #8f8878 → #9a9382 (was 4.41:1, now 5.69:1)
Faint text: light #9a9e92 → #7f837a (was 2.48:1, now 3.51:1 — large text/disabled only). Dark #5c5749 → #847d70 (was 2.42:1, now 4.27:1)
Gold as text (NEW token): #b8893f was 2.85:1 — illegal as text. New --gold-text: #82601e passes at 5.23:1
Dark green: #4ade80 (cold Tailwind) / #5aa87a → #63b585 (warm, passes on every dark surface)
Dark error: #ef4444 (cold Tailwind) / #c76a5b → #e08b7a (warm terracotta, passes on panels)
NEW tokens: --gold-text, --gold-fg, --button-fg, --green-hover, --hair-control (3:1 for inputs)
Removed: --green-bright, --gold-bright, --err-bright (caused the divergence)

Light Mode — Surfaces unchanged

BEFORE Current tokens

Paper #f5f4ee

--paper#f5f4ee

Paper-2 #efeee6

--paper-2#efeee6

AFTER Canonical

Paper #f5f4ee

--paper#f5f4ee✓ same

Paper-2 #efeee6

--paper-2#efeee6✓ same

Dark Mode — Surfaces unchanged

BEFORE Current tokens

Paper #1b1a17

--paper#1b1a17

Paper-2 #252420

--paper-2#252420

AFTER Canonical

Paper #1b1a17

--paper#1b1a17✓ same

Paper-2 #252420

--paper-2#252420✓ same

Light Mode — Text Ladder muted + faint changed

BEFORE Current

Ink — primary text, headings

--ink#13171116.45:1 ✓

Ink-soft — body text

--ink-soft#3c423a9.38:1 ✓

Muted — secondary text

--muted#6d72684.48:1 ✗ FAIL

Muted on paper-2

--muted on --paper-2#6d72684.24:1 ✗ FAIL

Faint — placeholder/caption

--faint#9a9e922.48:1 ✗ FAIL

Faint on paper-2

--faint on --paper-2#9a9e922.35:1 ✗ FAIL

AFTER Canonical

Ink — primary text, headings

--ink#13171116.45:1 ✓ same

Ink-soft — body text

--ink-soft#3c423a9.38:1 ✓ same

Muted — secondary text

--muted#62675d5.27:1 ✓ FIXED

Muted on paper-2

--muted on --paper-2#62675d4.99:1 ✓ FIXED

Faint — LARGE TEXT ONLY

--faint#7f837a3.51:1 ✓ (3:1)

Faint on paper-2 (large)

--faint on --paper-2#7f837a3.32:1 ✓ (3:1)

Dark Mode — Text Ladder muted + faint changed

BEFORE Current

Ink — primary text

--ink#e8e3da13.62:1 ✓

Ink-soft — body text

--ink-soft#b3ab9c7.64:1 ✓

Muted — secondary text

--muted#8f88784.94:1 ✓

Muted on paper-2

--muted on --paper-2#8f88784.41:1 ✗ FAIL

Faint — placeholder

--faint#5c57492.42:1 ✗ FAIL

Faint on paper-2

--faint on --paper-2#5c57492.16:1 ✗ FAIL

AFTER Canonical

Ink — primary text

--ink#e8e3da13.62:1 ✓ same

Ink-soft — body text

--ink-soft#b3ab9c7.64:1 ✓ same

Muted — secondary text

--muted#9a93825.69:1 ✓ FIXED

Muted on paper-2

--muted on --paper-2#9a93825.08:1 ✓ FIXED

Faint — LARGE TEXT ONLY

--faint#847d704.27:1 ✓ FIXED

Faint on paper-2 (large)

--faint on --paper-2#847d703.81:1 ✓ (3:1)

Light Mode — Accent Colors gold-text is NEW

BEFORE Current

Green — brand, verified, links

--green#1a5c3a7.23:1 ✓

Gold as text — ATTENTION

--gold (as text)#b8893f2.85:1 ✗ FAIL

Error — citation error

--err#9c3a2e6.23:1 ✓

AFTER Canonical

Green — brand, verified, links

--green#1a5c3a7.23:1 ✓ same

Gold — FILL/WASH ONLY

--gold (fill only)#b8893f2.85:1 — fill only

Gold-text — accessible bronze

--gold-text NEW#82601e5.23:1 ✓ NEW

Error — citation error

--err#9c3a2e6.23:1 ✓ same

Dark Mode — Accent Colors green + err changed, gold-text NEW

BEFORE Current

Green — #4ade80 (cold Tailwind)

--green#4ade809.99:1 ✓ (but cold)

Green on paper-2

--green on --paper-2#4ade808.91:1 ✓

Gold — #e6c14e

--gold#e6c14e10.03:1 ✓

Error — #ef4444 (cold Tailwind)

--err#ef44444.62:1 ✓ (barely)

Error on paper-2

--err on --paper-2#ef44444.13:1 ✗ FAIL

AFTER Canonical

Green — #63b585 (warm)

--green#63b5857.03:1 ✓ FIXED

Green on paper-2

--green on --paper-2#63b5856.27:1 ✓

Gold — #cc9c54 (warm)

--gold#cc9c547.00:1 ✓ FIXED

Gold-text (same as gold in dark)

--gold-text NEW#cc9c547.00:1 ✓ NEW

Error — #e08b7a (warm terracotta)

--err#e08b7a6.75:1 ✓ FIXED

Error on paper-2

--err on --paper-2#e08b7a6.02:1 ✓ FIXED

Light Mode — Buttons unchanged (already passing)

BEFORE Current

Check my citations

white on --green#fff on #1a5c3a7.97:1 ✓

Gold button (white text)

white on --gold#fff on #b8893f3.14:1 ✗ FAIL

AFTER Canonical

Check my citations

--button-fg on --green#fff on #1a5c3a7.97:1 ✓ same

Gold button (dark text)

--gold-fg on --gold NEW#131711 on #b8893f5.77:1 ✓ FIXED

Dark Mode — Buttons THE worst failure → fixed

BEFORE Current

Check my citations

white on --green#fff on #4ade801.74:1 ✗ WORST

Gold button (white text)

white on --gold#fff on #e6c14e1.74:1 ✗ FAIL

AFTER Canonical

Check my citations

--button-fg on --green#0e1a12 on #63b5857.21:1 ✓ FIXED

Gold button (dark text)

--gold-fg on --gold NEW#0e1a12 on #cc9c547.19:1 ✓ FIXED

Light Mode — Borders hair-control is NEW (3:1 for inputs)

BEFORE Current

--hair (decorative separator)

Content inside a bordered card

--hair-2 (stronger / hover)

Content with a stronger border

No --hair-control token exists. Input borders use --hair (1.39:1 — fails 3:1 for controls).

AFTER Canonical

--hair (decorative — 1.4.11-exempt)

Content inside a bordered card

--hair-2 (stronger / hover)

Content with a stronger border

--hair-control NEW (3.93:1 — for inputs)

Form input with visible boundary

Dark Mode — Borders hair-control is NEW

BEFORE Current

--hair (decorative)

Content inside a bordered card

--hair-2 (stronger / hover)

Content with a stronger border

No --hair-control token. Inputs invisible in dark mode.

AFTER Canonical

--hair (decorative — 1.4.11-exempt)

Content inside a bordered card

--hair-2 (stronger / hover)

Content with a stronger border

--hair-control NEW (4.17:1 — for inputs)

Form input with visible boundary

Light Mode — Tint Washes unchanged values, now tokenized

BEFORE Current

Ink on green-tint (verified card)

Green on green-tint

Ink on gold-tint

Gold on gold-tint (FAIL 2.60:1)

Ink on error-tint

Error on error-tint

AFTER Canonical

Ink on green-tint (verified card)

Green on green-tint (6.21:1 ✓)

Ink on gold-tint

Gold-text on gold-tint (4.77:1 ✓ FIXED)

Ink on error-tint

Error on error-tint (5.71:1 ✓)

Dark Mode — Tint Washes rebased on canonical hues

BEFORE Current

Ink on green-tint

Green on green-tint

Ink on gold-tint

Gold on gold-tint

Ink on error-tint

Error on error-tint (FAIL 3.89:1)

AFTER Canonical

Ink on green-tint

Green on green-tint (5.54:1 ✓)

Ink on gold-tint

Gold on gold-tint (5.31:1 ✓)

Ink on error-tint

Error on error-tint (5.26:1 ✓ FIXED)

Light Mode — Focus Ring unchanged (already passing)

BEFORE

Focused input — green ring (7.23:1 ✓)

AFTER

Focused input — green ring (7.23:1 ✓ same)

Dark Mode — Focus Ring green changed

BEFORE

Focused input — #4ade80 ring (9.99:1 ✓ but cold)

AFTER

Focused input — #63b585 ring (7.03:1 ✓ warm)

SwiftUI Divergence Fixes tokens that differed from CSS

SwiftUI BEFORE (dark)

folioInk dark: #e8ede9 → 14.69:1 (differs from CSS #e8e3da)

folioTextSoft dark: #a8aca0 → 7.52:1 (differs from CSS #b3ab9c)

folioGreen dark: #5aa87a → 6.06:1 (fails 4.5:1 on overlay)

folioError dark: #c76a5b → 4.17:1 on raised (FAIL)

white on folioGreen dark: 2.87:1 ✗ FAIL

folioGold on folioGoldTint light: 2.60:1 ✗ FAIL

folioBorder alpha: 0.10 (CSS is 0.16 — weaker)

SwiftUI AFTER (canonical)

folioInk dark: #e8e3da → 13.62:1 ✓ (unified with CSS)

folioTextSoft dark: #b3ab9c → 7.64:1 ✓ (unified with CSS)

folioGreen dark: #63b585 → 7.03:1 ✓ (passes on overlay)

folioError dark: #e08b7a → 6.02:1 on raised ✓

folioButtonFg on folioGreen dark: #0e1a12 → 7.21:1 ✓

folioGoldText on folioGoldTint light: #82601e → 4.77:1 ✓

folioBorder alpha: 0.16 (unified with CSS)

New Tokens Introduced 7 tokens that didn't exist before

--gold-text / folioGoldText — Accessible gold for text/icons. Light: #82601e (5.23:1). Dark: #cc9c54 (7.00:1). The old #b8893f was 2.85:1 — illegal as text.
--gold-fg / folioGoldFg — Text color ON gold fills. Light: #131711 (5.77:1). Dark: #0e1a12 (7.19:1). White-on-gold failed both modes.
--button-fg / folioButtonFg — Text on green buttons. Light: #ffffff (7.97:1). Dark: #0e1a12 (7.21:1). White-on-dark-green was 1.74:1.
--green-hover / folioGreenHover — Replaces light-only --green-dark and docs' semantically-inverted folioGreenDark. Light: #123f28. Dark: #6ee79c.
--hair-control / folioBorderControl — 3:1 border for inputs/controls (WCAG 1.4.11). Light: rgba(19,23,17,0.55) → 3.93:1. Dark: rgba(245,244,238,0.45) → 4.17:1.
--muted / folioMuted — Existed only in CSS. SwiftUI gains it for the four-step ink ladder.
--faint / folioFaint — Existed only in CSS. SwiftUI gains it. Role restricted to large text/disabled/decorative only.

Deprecated Tokens removed by the canonical set

--green-bright (#4ade80) — cold Tailwind green; replaced by mode-aware --green
--gold-bright (#e6c14e) — replaced by mode-aware --gold
--err-bright (#ef4444) — cold Tailwind red; replaced by mode-aware --err
--green-dark (#123f28) — light-only hover; replaced by mode-aware --green-hover
--border (#ddd9d0) — legacy; replaced by --hair

Folio Design System · WCAG 2.1 AA Canonical Token Sheet · 96/96 pairings pass · Granville (Fable 5) · 2026-07-09

P0 Component Designs — Four Directions

Emory generated 4 incompatible design directions for each P0 component. Click through, toggle dark mode, pick a winner.

Component Index → Toast Modal Form Inputs