/design-gdpr

description: "Design GDPR/CCPA-compliant consent flows — cookie banners, consent hierarchy, privacy controls, and data deletion request UI."
argument-hint: "[product type] [jurisdiction: eu|ca|both] [consent categories: analytics|marketing|personalization]"
allowed-tools: ["Read", "Write", "mcp__*"]

/design-gdpr

You are designing a complete GDPR/CCPA-compliant consent and privacy control system. Your output is a single structured spec covering cookie banner variants, consent flow, privacy control center wireframe, data deletion request flow, and a jurisdiction-specific compliance checklist.

Input

Arguments: **$ARGUMENTS**

Parse the following from `$ARGUMENTS`:

• **Product type**: the type of product (e.g., e-commerce, SaaS, media, healthcare portal)
• **Jurisdiction**: `eu` (GDPR) / `ca` (CCPA) / `both` (default: `both`)
• **Consent categories**: one or more of `analytics`, `marketing`, `personalization` (default: all three)

---

Step 1: Load Knowledge Base

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/compliance-designer.md` to apply the full Compliance Designer knowledge base to every section below.

**MCP Fallback**: If the file cannot be read, proceed using inline knowledge. The inline knowledge for this command covers: GDPR Article 7 conditions for consent (affirmative action, freely given, withdrawal as easy as giving), EDPB Guidelines 03/2022 dark patterns (pre-ticked boxes, nudge colors, unequal button prominence, multiple-click rejection), IAB TCF v2.2 Purpose IDs 1–10 (all off by default), CCPA opt-out requirement ("Do Not Sell or Share My Personal Information" footer link, 15-day response window), DSAR flow (identity verification, 30-day response window, extendable by 2 further months for complex requests = 90 days total), and data portability (GDPR Art. 20, machine-readable JSON/CSV).

---

Step 2: Generate the Spec

Produce all five sections below as a single continuous output. Do not pause or ask for confirmation between sections.

---

Section 1: Cookie Banner Variants

Generate three cookie banner variants. For each: layout dimensions, typography, button hierarchy, and ARIA requirements. Tailor to the parsed product type and jurisdiction.

Variant A: Minimal

**Use case:** Low-risk products, returning-user re-consent, supplementary notice layer.

| Property | Spec | |---|---| | Position | Fixed, bottom of viewport | | Height | Single line (~56px) or two lines max | | Layout | Text left — action buttons right | | Typography | Body 14px; button labels 14px medium weight | | Buttons | "Accept" and "Decline" — equal visual weight (same background color, same border radius, same font size) | | Category detail | None — summary only ("We use cookies to improve your experience.") | | Privacy link | Underline text link to full privacy policy | | ARIA | `role="dialog"`, `aria-label="Cookie consent"`, `aria-modal="false"`, focus on first button on appear |

**Dark pattern check:** "Accept" and "Decline" must share identical button styling. A colored Accept with a greyed Decline is an EDPB violation — do not use nudge colors.

---

Variant B: Standard (IAB TCF Compliant)

**Use case:** General web products serving EU users; required baseline for IAB TCF signal transmission.

| Property | Spec | |---|---| | Position | Fixed, bottom of viewport or centered modal on first visit | | Width | 100% viewport width (bottom bar) or 480–560px (modal) | | Layout | Purpose summary (top) — button row (bottom) | | Buttons | "Accept All" / "Manage Preferences" / "Reject All" — left to right, equal prominence | | Button sizing | All three buttons same height (44px min), same border weight, same font size | | Category summary | Brief 1-line descriptions of categories present: Analytics, Marketing, Personalization | | TCF compliance | IAB TCF v2.2 signal emitted on Accept All and Reject All; Manage Preferences opens preference center | | Privacy link | Visible text link before buttons: "Privacy Policy" | | ARIA | `role="dialog"`, `aria-labelledby="banner-heading"`, `aria-describedby="banner-body"`, focus trap within banner until dismissed |

**EDPB violations to avoid:**

• Pre-ticked category toggles — all non-strictly-necessary purposes must default off
• "Accept" button in brand color with "Reject" in grey — equal visual prominence is required
• Hiding "Reject All" behind a secondary modal while "Accept All" is primary — both must be one click away

---

Variant C: Detailed (Expandable Category Toggles)

**Use case:** High-compliance products, EU enterprise, products with legitimate interest processing.

| Property | Spec | |---|---| | Position | Centered modal overlay with backdrop | | Width | 560–640px; max-height 80vh with internal scroll | | Layout | Header (purpose statement) → toggle list → button row | | Toggle groups | Grouped by category: Strictly Necessary (locked on, no toggle) / Analytics / Marketing / Personalization | | IAB TCF Purpose IDs | Labeled inline with each toggle: e.g., "Analytics — IAB TCF Purposes 7, 8, 9" | | Legitimate interest | Where LI is the legal basis, show "(Legitimate Interest)" tag + expandable "Why?" section linking to the LIA | | Consent record indicator | Footer line: "Your preferences will be recorded with a timestamp. You can change them at any time." | | Buttons | "Save My Preferences" (primary) / "Accept All" (secondary) / "Reject All" (tertiary text link) | | ARIA | `role="dialog"`, `aria-modal="true"`, focus trap, `aria-label` per toggle: "[Purpose name], toggle, [on/off]" |

**Toggle specification:**

• Height: 24px (thumb 20px); track width 44px
• Label text left-aligned; toggle right-aligned
• All non-strictly-necessary toggles default to off (GDPR opt-in) — no exceptions
• Strictly necessary section is informational only: grey locked toggle with tooltip "Required for the site to function"

---

Section 2: Consent Flow UI Spec

Step-by-step consent journey from initial trigger through ongoing prefe