Cookie banners: an honest design guide

There is a user interface that more people see than your homepage, your pricing page and your checkout combined. It appears before any of them. And on most websites it was designed by a legal software vendor in 2018, skinned with your primary colour by someone in a hurry, and never critiqued again.

The cookie banner. First impression of roughly the entire web, and the whole industry treats it as a tax rather than a design problem.

This is the guide we wish existed. Not legal advice — we're a studio, not a law firm — but the design, ethics and engineering of consent UI done honestly: what the dark patterns actually are, how to design consent that respects people, what a consent-management platform (CMP) does to your page speed, and how to stay compliant with the GDPR and the Australian Privacy Act without setting fire to your conversion rate.

The dark-pattern inventory

Start with an audit of what not to do, because most of the industry is doing it:

• Asymmetric choice. "Accept all" as a brass-bright button; "reject" as a grey text link, two clicks deep, labelled "manage preferences". French and German regulators have fined companies for exactly this. The test is cheap: count the clicks and the visual weight. If refusing takes more effort than accepting, you're in dark-pattern territory.
• Confirmshaming. "No thanks, I don't want a better experience." Nobody has ever felt good clicking this sentence. It's also a lie — declining analytics cookies changes nothing about the experience.
• Pre-toggled toggles. Legitimate-interest switches defaulted on in the second layer. Several European DPAs ruled years ago that legitimate interest does not cover advertising trackers; an on-by-default toggle is not consent, it's a default.
• Cookie walls. "Accept or leave." Legal in a shrinking set of jurisdictions, hostile everywhere. If your content is worth gating, gate it on value (a membership), not on surveillance.
• The zombie banner. A banner that returns on every visit after a "no", hoping to wear the user down. Consent choices must be as easy to change as to make — which also means your banner needs a persistent, findable re-open control, usually in the footer.

We've audited enough client sites to say the awkward part plainly: dark patterns work, for a quarter, on one metric. Then they show up in churn, in brand-trust surveys, and increasingly in enforcement notices. Honest consent is not charity; it's the only version that's durable. The numbers on honest testing apply here too — see our CRO field guide for why "the variant that wins the metric can still lose the business".

Layer 1 writes the sentence, layer 2 does the work

The design pattern that survives both regulators and users is layered consent: a first layer that is a genuine three-way choice, and a second layer that is a control panel.

Layer one — the banner itself — is copywriting's moment. It must say, in under forty words, what you collect, why, and what happens next, with three affordances of equal visual weight: Accept all, Reject all, Customise. The bars we ship all read like this one:

We use cookies to understand how the site is used and to improve it. Nothing is sold, nothing is personal until you say so. [Accept all] [Reject all] [Choose]

Forty-ish words. No legalese, no guilt trip, no cookie emoji pretending this is charming. This is the same discipline as any other high-stakes microcopy — the standards in our conversion copywriting piece (clarity beats clever, verbs over nouns) matter twice as much when the reader is annoyed before they've read a word.

Layer two — the preferences panel — is a real settings screen, and it should be designed like your forms people actually finish: grouped by purpose (strictly necessary / analytics / functional / marketing), each group with one plain-language sentence and one honest toggle. "Strictly necessary" should be visibly always on with an explanation of why (session, security, load balancing — no toggle, because there is no choice), not hidden. Categories you don't use should not appear. A CMP's default categories are a starting point, not a taxonomy you must inherit.

Design details that earn their keep: toggles that announce themselves to screen readers as real switches (role="switch", not a div with vibes); a "save my choices" that works with the keyboard alone; focus trapped in the modal and returned correctly on close; and the whole banner honouring prefers-reduced-motion — a consent banner should never slide, bounce or pulse, ever. Motion is earned or cut, and a legal disclosure hasn't earned anything.

Your consent UI is part of the design system

This is the bit almost nobody does, and the reason most banners look kidnapped: consent components belong in the token layer. The banner should use your radius tokens, your shadow scale, your button components, your display face. It should feel like the site's front door, not a taped-on customs notice.

On our builds the consent banner is a set of ordinary components — ConsentBanner, ConsentPreferences, ConsentStatus — driven by the same design tokens as everything else (on this site, brass for "Accept", ink for "Reject": equal weight, different families). The placement decision matters too. Bottom-sheet banners beat corner toasts on mobile (thumb-reachable, out of the headline's way), and full-width bars beat floating boxes on desktop (they don't occlude the nav at 375px — the same survival test we apply to navigation).

One more system-level rule: the banner's z-index and the CMP's injected styles are where specifity wars breed. Scope a CSS layer for consent, and pin the CMP's iframe/shadow DOM intrusion with explicit overrides. If your CMP ships !important soup, wrap its mount point and contain it — or choose a CMP that behaves.

A CMP is a third-party script tax. Pay it knowingly.

Here is the part your analytics vendor won't mention: a mainstream CMP injects 60–120 KB of JavaScript, fires its own network requests, blocks the main thread during the exact seconds your LCP is being measured, and — in scriptless consent mode — delays your own analytics until interaction. We've measured a popular CMP adding 400 ms to LCP on a Moto-class phone. The script that asks permission to track the user is itself making the site worse for that user.

Mitigations, in order of effort:

1. Load consent before everything, but make it tiny. First-party consent state in a cookie you set yourself, read server-edge, so the banner can render with the page instead of arriving as a surprise guest 800 ms later.
2. Vendor-light configuration. Every extra vendor in your CMP list is rows in the second layer and weight in the config payload. This is where analytics governance pays rent — a tracking plan that says what you collect and why shrinks the banner by design.
3. Audit the CMP in your third-party script reviews like any other dependency: main-thread cost, privacy posture of the CMP itself (yes, the consent tool is also a data processor), and whether it respects the Global Privacy Control signal. GPC support is legally meaningful in California and polite everywhere else.

And the performance-free option worth naming: if you can run first-party, cookieless analytics that meets a genuine anonymisation bar, you may be able to run no banner at all — ask your lawyers, but design your stack so that a "no banner" answer is possible. The best consent UI is the one you legitimately don't need.

Compliance is the floor; the craft is the tone

GDPR, ePrivacy, the Australian Privacy Act reforms, the US state patchwork — the precise obligations move, and your counsel owns that map. What design owns is the posture: would you be comfortable if this banner were screenshotted in a regulator's slide deck? Does refusing feel as respected as accepting? Can a distracted person on a bus, with one thumb, in sunlight, understand and complete it?

When we rebuilt consent for a retail client's headless storefront (a sibling problem to the one in our checkout friction audits), the honest banner — equal-weight buttons, forty-word copy, no second-layer traps — cost 11 percentage points of analytics-consent rate versus the dark-pattern control. It also cut banner-dismissal rage-clicks to near zero, survived a jurisdiction review untouched, and — the number the CFO actually moved on — did nothing to revenue per session, because the people who reject tracking were never the people filling carts.

Consent is a conversation at the door. You can mug people at yours, briefly. Or you can be the site that treats the first interaction as a promise of how every other interaction will go. Studios get to choose which web they're building.

Key takeaways

• Test for dark patterns mechanically: equal clicks, equal visual weight, no guilt copy, no pre-toggled anything.
• Use layered consent: a forty-word first layer with a true three-way choice; a grouped, plain-language second layer.
• Consent UI belongs in the design system — tokens, components, focus behaviour, reduced-motion — not in a vendor's skin.
• Budget the CMP like any third-party script: measure its main-thread and LCP cost, and shrink the vendor list to shrink the banner.
• Make consent revocable from the footer, honour GPC, and design for the possibility of running with no banner at all.
• Honest consent converts slightly less data and loses no revenue worth the name — it buys trust, durability and zero enforcement letters.

FAQ

Does the Australian Privacy Act actually require banners? Not in the GDPR sense — Australia has no general prior-consent rule for cookies yet, though reforms are trending that way. But Australian businesses with any EEA/UK traffic need GDPR-grade consent for those visitors, and geofenced consent (strict banner for EEA, notice-only for AU) is the pragmatic pattern our Sydney clients ship.

Reject-all hurts my analytics. What's the honest mitigation? Improve the reasons to say yes — clear copy about what analytics pays for ("this is how we decide what to build next") — and mature your measurement: server-side, aggregate, cookieless analytics for the baseline, with consented data as enrichment. You lose granularity, you keep trends.

Are "legitimate interest" toggles ever okay? For strictly functional purposes, sometimes. For advertising trackers, no — regulators have been unambiguous. When in doubt, require an opt-in.

Should the banner block interaction with the page? No. A blocking modal for a choice the user may not care about is hostility dressed as diligence. Persistent bottom bar, non-blocking, dismissible — with choices that stick.

How often should consent be re-asked? On material change to what you collect, or after 12 months, whichever comes first. Re-asking more often than that is the zombie pattern in a trench coat.