Contrast,
Focus & Print.

Interactive requirements

• →Focus-visible: 2px ring, 2px offset. Ring is #FFFFFF on dark grounds, #0F172A on light. The offset gap renders in the base colour, which separates the ring from the component — a single-colour ring cannot clear 3:1 against both
• →Theme toggle: aria-label updates dynamically ("Switch to light/dark mode"), aria-pressed reflects state
• →Decorative SVGs: aria-hidden="true" and focusable="false"
• →Color swatches: role="img" with aria-label naming color and hex value
• →Reduced motion: @media (prefers-reduced-motion: reduce) disables all transitions and animations
• →Heading hierarchy: h1 → h2 → h3 — never skip levels
• →Minimum text size: 11px — 7–9px fails all WCAG thresholds
• →Landmark roles: nav, main, footer on all pages

Print rules

• →@media print block overrides all CSS variables to white background / #0F172A text
• →Nav, theme toggle, hero CTAs, logo glow hidden via display:none
• →Gradient hero text: -webkit-text-fill-color forced to #0F172A (browsers strip gradient clip on print)
• →Color swatches print as solid fills — strengthen borders to 1px solid #94A3B8
• →page-break-inside: avoid on all cards, swatches, color groups
• →No CMYK or Pantone values — this palette is screen-first. Request a print conversion profile from the brand team for physical production.