Cookie Consent Banner — Variant Comparison

Applies to: getraxx.com and raxx.app. Same component, both surfaces. Ticket: #759

Variants

Variant A — Bottom Bar

Files: variant-a.html Screenshots: screenshots/variant-a-desktop.png, screenshots/variant-a-mobile.png

Minimal fixed bottom bar with a moss-colored left-border accent. Three actions inline: Accept all (primary / moss-bright), Essential only (secondary / outline), Preferences (tertiary / text link).

On mobile (≤640px): actions stack vertically, full-width. Banner stays above the fold on both orientations.

Design choices: - Moss left-border instead of a full moss background — keeps the bar quiet, still on-brand. - "Essential only" as secondary, not "Reject all" — describes what the user gets, not what they refuse. - Page CTA remains fully visible above the banner on desktop. - WCAG AA: all text on #141A22 background meets or exceeds 4.5:1. Moss-bright on ink = 5.1:1. - Copy uses category descriptors only (e.g. "Analytics cookies") — no third-party tool names in customer-facing text. Vendor specifics belong in the full privacy policy, not the banner.

Verbiage revision (2026-06-10): Original sub-copy named specific analytics tools. Per operator review of PR #3414, tool names were removed. Generic category language is the pattern — consistent with the privacy-by-default posture and feedback_no_backend_branding.

Variant B — Center Modal

Files: variant-b.html Screenshots: screenshots/variant-b-desktop.png, screenshots/variant-b-mobile.png

Full-page modal overlay (backdrop blur + darkened scrim). Per-category toggle switches rendered inline. Footer row: Accept all / Save selection / Essential only.

Design choices: - Essential toggle rendered "always-on" (non-interactive, moss-filled) rather than hidden — makes the "always on" claim verifiable at a glance. - Analytics toggle shown and checked by default. Marketing + Preferences categories are omitted entirely per feedback_hide_dont_gray_unavailable_features — shown only when deployed. - Backdrop blur reduces page distractions without a full black overlay. - WCAG AA: modal card on scrim, all interactive elements have visible focus-visible outlines.

Variant C — Right Drawer

Files: variant-c.html Screenshots: screenshots/variant-c-desktop.png, screenshots/variant-c-mobile.png

Slide-in drawer anchored right. Desktop: page content reflows with right padding so the hero CTA stays accessible — banner is non-blocking. Mobile (≤640px): drawer becomes a bottom sheet with drag handle.

Three actions stacked: Accept all (full-width primary), then Save selection + Essential only side-by-side. Toggle switches for categories mirror Variant B.

Design choices: - aria-modal="false" — drawer is supplemental, page interaction is not blocked. - Moss top-stripe (3px) replaces the left-border accent from Variant A, fitting the vertical layout. - On mobile, the bottom-sheet pattern is familiar (iOS/Android sheets) and avoids a full takeover. - "Changes take effect on next page load" note: honest, structural copy, no "we'll" framing.

Design recommendation

Variant A for the first ship.

Rationale: 1. Lowest friction — users who want to accept or decline can do so in one glance without reading toggles. 2. Easiest to implement — no modal state management, no toggle persistence layer required at launch. 3. Best fit for getraxx.com (marketing site): visitors land to evaluate Raxx, not to configure cookies. 4. Preferences link is available for users who want granularity — it opens the Variant-B style modal, so the full toggle surface exists but isn't front-and-center.

Variant C is the strongest middle-ground if the team wants toggles visible without a full modal takeover. Variant B is appropriate post-launch if there are more cookie categories to communicate (marketing, preferences).

WCAG AA checklist

Implementation notes for feature-developer (#759 / #3215)

• Cookie categories: Essential (always on), Analytics (toggle default ON). Marketing + Preferences categories are not rendered until those cookies are deployed.
• Analytics category covers session replay and usage analytics. Vendor names are an implementation detail — do not surface them in the banner or toggle labels. The privacy policy is the right place for the full list.
• window.__raxxOpenCookiePreferences as a global hook to re-open modal/drawer from footer link.
• Consent stored as a cookie (not localStorage) so server-side rendering can read it server-side.
• Banner z-index: 10000. Modal/drawer: 10001.
• ESC closes Variant B modal and Variant C drawer; focus returns to footer "Cookie preferences" link.
• getraxx.com already has a partial CookieConsent.jsx — relabel "Reject all" to "Essential only".
• raxx.app has no cookie consent infra yet — mirror the getraxx structure in src/components/cookieConsent/.

Screenshots index