Wave 2 Kit — A-MOTIF + A-GLASS — 2026-06-16
Primitive motif + glass panel primitives · Every state exercised · QA go/no-go below · THROWAWAY
01 — Radius tokens (ADR-0010 §10c)
Two-tier radius: --radius-sharp: 2px (structure/hairline) and
--radius-glass: 1rem (glass panels, ~16px).
--radius aliases --radius-sharp so existing consumers are unchanged.
02 — .motif-grid (wireframe grid underlay)
Faint 40px grid in --color-hairline via repeating-linear-gradient.
Decorative; sits behind content via ::before / z-index: -1.
Consumer must add aria-hidden="true" to decorative carrier elements.
GRID UNDERLAY / 40px CELLS
Content sits above the grid. Grid is decorative CSS only — no HTML element.
03 — .motif-contour (contour-line radial underlay)
Concentric radial gradient rings — "topography" contour lines.
Uses --color-hairline at 70% opacity. Sits behind content via ::before.
CONTOUR / RADIAL / 60px RINGS
Topographic contour rings radiate from center.
04 — .ripple-divider (line-ripple wavy divider)
Replaces a plain <hr> with a wavy cyan hairline.
Animated (traveling wave) when prefers-reduced-motion: no-preference.
Static wavy line for reduced-motion users.
Content above the ripple divider. This is ordinary paragraph text. The divider
below replaces a standard <hr> element with a motif-kit wavy line.
Content below the ripple divider. The wave above should travel left→right (motion OK) or sit static (reduced-motion).
05 — .glow-interactive (cyan hover / focus-visible glow)
Cyan glow appears on :hover and :focus-visible ONLY.
ADR-0010 §10a: "glow signals state, it is not wallpaper."
No ambient glow at rest. Reduced-motion: instant state change (no transition pulse).
Tab through the cards to test keyboard focus.
Interactive card — hover or focus me
01 — Frontier Signal
Hover or Tab to this card to see the cyan glow-on-interaction. At rest: no glow.
Second card — no glow class (baseline)
02 — No Glow (baseline)
This card has no .glow-interactive class. No glow on hover.
06 — .coord-label + .index-label (mono instrumentation labels)
IBM Plex Mono, uppercase, tight letterspacing. Two roles: coordinate annotations
(.coord-label) and section/item indices (.index-label).
Variant .coord-label--cyan for active/highlight state.
Coordinate labels
Index labels
07 — .scroll-progress (CSS scroll instrumentation)
The cyan bar at the very top of the page is the .scroll-progress primitive.
It uses animation-timeline: scroll() (zero JS) to track page scroll position.
animation-timeline: scroll() — verified: Chrome 115+, Safari 18+, Firefox 128+.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll (2026-06-16)
08 — .glass panel primitive (A-GLASS, ADR-0010 §10b)
Glass panel with backdrop-filter: blur(12px) saturate(1.4), 1px hairline border,
border-radius: var(--radius-glass) (1rem). AA scrim ensures text ≥4.5:1
even over worst-case backdrops. Rendered here over a contrasty stage with vivid cyan + rose
gradient behind it — the hardest visual test.
This text is rendered inside a .glass panel floating over a busy, high-contrast
backdrop (a vivid cyan/rose gradient + the motif grid). The AA scrim keeps this text readable
at ≥4.5:1 contrast ratio even over the worst-case white or black backdrop.
Verifying the link color: a cyan link inside the glass panel should be readable.
Dark mode (toggle OS): tint flips to #10151D @ 70% — see the dark overlay.
Both modes verified AA by scripts/wcag-audit.mjs.
prefers-reduced-transparency: reduce):
panel becomes solid var(--color-surface) — no blur. Toggle in macOS System Settings
→ Accessibility → Display → Reduce Transparency; or iOS Settings → Accessibility → Display & Text Size.@supports not (backdrop-filter). Test by disabling browser support flags or using Firefox < 103.var(--radius) (e.g. focus ring) still resolve to 2px?--cyan variant is in cyan?