Consent That Earns the Click — A Navy & Amber Privacy Modal

Summary

A trust-first cookie consent / privacy-preferences modal presented as the live hero centerpiece of a product page for the placeholder brand 'ModalDesign' (a modal-state component kit). On a deep-navy aurora field (radial amber + blue washes over #081933 with a faint masked grid), a sticky frosted nav sits over a two-column hero where THE consent dialog is the moment: a max-w-[560px] rounded-2xl 'ticket' card (a vertical navy gradient #0e2748 -> #081933) with a header (cookie title + close), an amber divider, an honest two-sentence privacy message with a 'Read our policy' link, three category rows (Strictly necessary locked-on, Analytics + Marketing pill toggles defaulting off), and a balanced footer (Accept all / Reject all + a bordered Save preferences). Below: a full-bleed navy-850 'patterns' band with a 4-up card grid (Consent / Confirm / Auth / Notice), a two-column 'anatomy' band pairing a numbered 4-zone breakdown with a mini callout dialog, a 3-up 'why it works' trust band (no dark patterns / contrast that passes / folds never breaks), a prompt-ready CTA band with a faux prompt.txt code card, and a footer. The system is cream-on-navy with a single reserved amber #f0b429 accent. Built entirely on Inter (400-900), Phosphor icons via Iconify.

Style

A calm, trustworthy, premium dark aesthetic engineered for a consent surface: the opposite of a dark pattern. The mood is deep and editorial: an 'aurora' field of layered radial gradients (an amber wash top-right, a blue wash upper-left, a navy wash bottom) over a near-black navy #081933 body, with a very faint cream grid masked to a soft radial vignette so the background has texture without noise. Color is strictly disciplined: a navy ramp (900 #081933, 850 #0b1f3a, 800 #0e2748, 700 #163562, 600 #1f4684, 500 #2a5aa6) carries every surface; a cream ramp (DEFAULT #f4ecd8, soft #e8dec6, dim #c8bfa6) carries all text at calm, AA-clearing contrast; and a single amber accent (DEFAULT #f0b429, 600 #d99a12, 300 #f7cf6b) is RESERVED for the one thing you should act on (the brand mark, the primary CTA, the locked-on toggle, eyebrow chips, the divider glow, link text). Surfaces are translucent navy panels (navy-800 at 40-60% over the aurora) hairlined with white/8-12 borders and amber/15-40 on hover/emphasis, with generous rounding (rounded-xl tiles, rounded-2xl cards/dialog) and a deep dialog shadow (0 40px 90px -20px rgba(3,10,24,0.75) + a 1px amber/10 ring). Type is all Inter, leaning extrabold (800-900) for headlines with tight tracking, with cream-dim (#c8bfa6) for body and uppercase tracked eyebrows. Motion is restrained: a fade-up on the hero columns and smooth toggle/hover transitions. The whole point: amber is scarce so it reads as a real, reversible choice, and cream-on-navy keeps the consent message legible and honest.

Layout & Structure

A single vertically-scrolling product page built from full-bleed bands on a shared max-w-6xl mx-auto px-5 sm:px-8 container, with the consent modal as the hero centerpiece (live, in context) rather than an overlay on a blank artboard. Order: (1) a sticky top-0 z-50 frosted nav (navy-900/80 + backdrop-blur-xl, border-b border-white/10); (2) an 'aurora' hero with a two-column grid (left copy: eyebrow chip + big two-line headline with the second line amber + lead + two CTAs + a three-item check strip; right: THE consent dialog card floated on a soft amber blur); (3) a full-bleed navy-850 'patterns' band with an intro + a 4-up card grid; (4) an 'anatomy' band (navy-900 + faint grid) with a two-column grid pairing a numbered 4-zone list with a mini callout dialog; (5) a full-bleed navy-850 'why it works' trust band with a 3-up card grid; (6) an 'aurora' prompt/CTA band centered with a faux prompt.txt code card and two CTAs; then a navy-900 footer. It reflows cleanly to mobile: the hero and anatomy grids collapse to one column (lg:grid-cols-[...] -> 1), the nav center links hide (md:flex) and the 'Copy prompt' link hides (sm:block), the patterns grid steps 1 -> 2 -> 4 columns and trust 1 -> 3, the dialog footer buttons stack (sm:flex-row -> column) with Accept/Reject grouped, and the footer goes column.

Sticky frosted nav

Aurora hero (two columns: copy + the consent dialog)

The consent dialog card (the centerpiece)

Patterns strip (full-bleed band)

Anatomy band (numbered zones + mini callout dialog)

Trust band (why it works)

Prompt / CTA band (aurora + prompt.txt card)

Footer

Special Notes

Single Google Font: Inter (weights 400/500/600/700/800/900) as the only family (font-sans) — headlines extrabold/black (800-900) with tight tracking, body in cream-dim. Icons are Phosphor via Iconify (ph:shield-check-fill, ph:cookie-fill, ph:x-bold, ph:check-bold, ph:caret-down-bold, ph:magic-wand-fill, ph:check-circle-fill, ph:warning-circle-fill, ph:sign-in-fill, ph:bell-ringing-fill, ph:scales-fill, ph:eye-fill, ph:device-mobile-fill, ph:terminal-window-fill, ph:copy-fill, ph:rocket-launch-fill). EXACT tokens — navy 900 #081933, 850 #0b1f3a, 800 #0e2748, 700 #163562, 600 #1f4684, 500 #2a5aa6; cream DEFAULT #f4ecd8, soft #e8dec6, dim #c8bfa6; amber DEFAULT #f0b429, 600 #d99a12, 300 #f7cf6b. THE CORE DISCIPLINE (the point of this item): amber is RESERVED — it appears only on the brand mark, the primary CTA, the locked-on/active toggle, eyebrow chips, the header divider glow, and link text — so it always reads as a real, reversible choice and never as a manipulative default; cream-on-navy carries all text at WCAG-AA contrast; and Accept all / Reject all get equal weight (anti-dark-pattern). Radii: rounded-lg/xl on tiles + buttons, rounded-2xl on cards + the dialog. Shadows: shadow-dialog 0 40px 90px -20px rgba(3,10,24,0.75) + 0 0 0 1px rgba(240,180,41,0.10); shadow-pill 0 14px 30px -12px rgba(240,180,41,0.55). Effects: the layered .aurora hero/CTA backdrop + a masked .grid-faint overlay; an amber/10 blur glow behind the dialog; a frosted sticky nav (navy-900/80 + backdrop-blur-xl). Toggle states: .toggle-locked (#2a3f64 track, amber knob right), .toggle-on (amber track, navy knob right), .toggle-off (#1c2f50 track, cream knob left), each a 58x32 pill with a .25s knob slide. Motion: a .fade-up keyframe on hero columns (opacity 0 + translateY(16px) -> 1/0 over .7s), smooth .2-.25s transitions on toggles + .cat-row + card hovers. Layout: a sticky top-0 z-50 frosted nav over full-bleed bands on a shared max-w-6xl mx-auto px-5 sm:px-8 container (aurora two-column hero with the dialog centerpiece, navy-850 4-up patterns band, navy-900 anatomy band with a numbered list + mini callout dialog, navy-850 3-up trust band, aurora CTA band with a prompt.txt card, navy-900 footer). Responsive reflow: the hero + anatomy two-column grids collapse to one column, the nav center links hide (md:flex) and 'Copy prompt' hides (sm:block), the patterns grid steps sm:grid-cols-2 lg:grid-cols-4 and trust md:grid-cols-3, the dialog footer stacks (sm:flex-row -> column) with Accept/Reject grouped, and the footer goes column. Accessibility intent: role="dialog" aria-modal on the card, role="switch" + aria-checked on the toggles, AA cream-on-navy contrast, and a balanced (non-dark-pattern) footer.