lib-theme-lucent

Lucent — cool daylight clarity. An access-first Crema theme where WCAG AAA is the identity, not the compliance line. One of three candidates in the access family, built for NDIS participants, their families, and older support coordinators (IGH / IveGotHome portals): dignity, clarity, zero squinting. The discipline IS the personality.

Thesis

GOV.UK / NHS design heritage, modernized. Light mode is a near-white cool field with pure white cards and TRUE near-black ink — body text lands at ~19:1, and even muted-foreground clears 7:1 on white, because in an access theme muted text is still reading text. One deep accessible blue does all the pointing (white label ≈ 8.5:1), and links are that same blue, underlined at rest — the underline thickens on hover. Dark mode is a very dark cool charcoal with very light ink (~17:1); cards step clearly lighter, and primary flips to a lighter blue carrying near-black ink (≈ 8.5:1).

The access-family DNA:

• Type ramp starts larger — body 1.125rem/1.65, label 1rem/1.5, caption 0.875rem (never below 14px). Generous line-heights throughout.
• Contrast verified, not hoped for — body ink and muted-foreground ≥7:1 on background AND card in both modes; primary label ≥7:1; status pairs target ≥7:1 and never dip below 4.5:1. Computed ratios are stated in theme.css comments.
• Focus is loud — 3px solid ring + 2px offset on buttons/controls; inputs get a border-color change plus a 2px ring. Always visible.
• Touch targets 44px for everyone — not gated behind a coarse-pointer query.
• Borders are strong (ink at 0.25–0.32 alpha) — visible boundaries for low vision; elevation stays low; separation comes from borders, not shadows.
• Motion minimal and quick (120/200/300/400ms), all springs aliased to standard eases; a prefers-reduced-motion block zeroes transitions on interactive slots.
• Radius a modest 0.5rem. No glass (inert stubs).

Fonts

Atkinson Hyperlegible (Braille Institute; drawn for character disambiguation at low vision) for both body and headings — hierarchy comes from weight 700 and the ramp, not a second family. JetBrains Mono for code. No negative letter-spacing anywhere: the face was designed for legibility; don't squeeze it.

Consuming apps load fonts at the very top of their entry CSS (never inside theme.css):

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

Notes

• Atkinson Hyperlegible ships 400/700 only — buttons and headings use 700 (the GOV.UK button voice); never request intermediate weights or they'll synthesize.
• Dark surfaces: background 0.16 → card 0.22 → popover 0.24 → muted 0.26 (popover above card, below muted).
• Status pattern: light mode uses deep solid fills with white labels (dark ink on amber for warning); dark mode flips to bright swatches with near-black ink.
• Headings use color: inherit so titles on colored slabs keep the slab's pairing; [data-slot="card-title"] is pinned to the subtitle role.
• Validate: node create-crema-app/scripts/validate-theme.mjs lib-theme-lucent/theme.css