# 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`):

```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`