Cookie consent banner — UX mockups

Applies to: getraxx.com (existing half-coded infra, banner UI gap) and raxx.app (no infra yet, #3215).

Screens mocked

File	Captures
`index.html`	Banner — initial appearance (desktop 1280×800, mobile 375×667)
`modal.html`	Preferences modal (desktop 1280×800)
`footer-link.html`	"Cookie preferences" footer re-entry link in context

Screenshots

Preferences modal Footer link

Color tokens used

Token	Hex	Usage
`--raxx-ink-2` / `#141A22`	`#141A22`	Banner + modal background
`--raxx-n-700` / `#374151`	`#374151`	Banner top border, modal category dividers, outline button border
`--raxx-n-300` / `#B8BEC7`	`#B8BEC7`	Body copy, secondary button label
`--raxx-moss-bright` / `#7FB77E`	`#7FB77E`	Primary "Accept all" button, privacy link, "Cookie preferences" footer link
`--raxx-ink` / `#0B0F14`	`#0B0F14`	"Accept all" button text (dark-on-moss-bright)
`#5eae78`	console flag-toggle on-track	Toggle ON track (matches flag-toggle.css from PR #3213)
`--raxx-bg-3` / `#1F2732`	`#1F2732`	Toggle OFF track

Copy choices + rationale

"Accept all / Essential only / Preferences" instead of "Accept all / Reject all":

"Reject all" frames the interaction as adversarial; "Essential only" describes what the user gets, not what they refuse.
Aligns with feedback_signup_never_blocks: essential-only is a valid, non-blocking path forward. The user is never stuck.
"Preferences" as a text link (tertiary) reduces visual weight — most users decide in two clicks; the modal is for the minority who want granular control.
feedback_hide_dont_gray_unavailable_features applies pre-consent: analytics UI features are absent, not disabled.

Headline "How we use cookies" over "Cookies on Raxx": - Answers the implicit question. Slightly more informative in 4 words.

Implementation notes for feature-developer (#3215)

getraxx.com (existing half-coded) - CookieConsent.jsx already has the banner structure; the existing "Reject all" button should be relabelled "Essential only" to match this mockup. - The existing PreferenceModal.jsx toggle already uses the role="switch" pattern. Port to the CSS-only flag-toggle pattern from PR #3213 (flag-toggle.css) to unify the two surfaces and remove the inline-style dependency. - FLAG_GETRAXX_COOKIE_BANNER flip is the operator's call; no code change needed there.

raxx.app (#3215) - No cookie consent infra exists. Recommend creating src/components/cookieConsent/ mirroring the getraxx structure. - The toggle switch CSS (flag-toggle.css) lives in console/app/static/css/ — the Antlers app will need a copy or a shared package extraction. - window.__raxxOpenCookiePreferences wire-up connects the footer link to the modal without prop-drilling through the full component tree. - consentStore.js pattern (read/write a cookie) can be reused as-is on raxx.app.

Both surfaces - Banner z-index: 10000; modal z-index: 10001 (modal overlays banner if both are active). - ESC closes the modal; focus returns to the footer "Cookie preferences" link after dismiss. - ARIA: role="region" aria-label="Cookie consent" on banner; role="dialog" aria-modal="true" aria-labelledby="cookie-modal-heading" on modal. - feedback_signup_never_blocks: ensure the banner never appears in a state where "Essential only" is absent or disabled. All three buttons must always render together.