Two ways to show accessibility, metaphorically
Both take the Equals / Mindoo recipe — the domain's primitive, abstracted, ambient at the margins, in motion — and apply it to AbleGuard's primitive: a page element getting its spoken name. Multi-colour by decision for this round. Everything else follows the design system: paper ground, Plus Jakarta Sans, chips white with a teal hairline, reduced motion honoured, layer hidden under 1100px and hidden from assistive tech.
Margins
Stacks of page elements at both edges, cut by the viewport, fading toward the headline in three opacity steps. Names arrive one by one on a 12-second loop. Closest to Equals.
Concept BBands
Three edge-to-edge bands of outlined page elements behind the headline, under a blurred paper veil so the text stays clean. A quiet scan bar passes and each element fills with colour and gets its spoken name. Headline set in Libre Baskerville. Closest to Mindoo.
- Header, headline, copy and CTA are the live v0.5.x homepage with the 7 Sep decisions applied (violet CTA, white chips).
- The demo section is included for scroll context; the rest of the page is on design.ableguard.com.
- Concept A keeps Plus Jakarta Sans; Concept B tries Libre Baskerville for the headline only, a preview-only exception to the one-typeface rule.
- Tag copy is spoken language on purpose — what a screen reader would say — not markup.