<!-- Generated by scripts/gallery.mjs from gallery/examples.json. Do not edit by hand. -->

# Banner design gallery

Eight example designs for the Cookie Compliance banner. Each one is a screenshot of the real widget in preview mode, using one of its real layouts. The build checks body text and headings against the banner colour, and the button label, the selected and unselected level labels and the links against their backgrounds, at WCAG AA (4.5:1).

These designs are for the v1 banner, the default. For the opt-in v2 banner and its compact style, see the [v2 banner design gallery](v2/README.md).

## Minimal card

![Cookie consent banner as a floating off-white card at the bottom of a light page, with dark grey text and a near-black Save my preferences button with slightly rounded corners.](img/minimal-card.png)

A quiet off-white card with a near-black button, for minimal and monochrome sites.

```json
{
  "position": "bottom",
  "displayType": "floating",
  "bannerOpacity": 1,
  "primaryColor": "#111827",
  "btnTextColor": "#ffffff",
  "bannerColor": "#fafafa",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "6px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Dark mint bar

![Cookie consent banner as a wide near-black bar across the bottom of a dark page, with white text and a mint green Save my preferences button with black text and slightly rounded corners.](img/dark-mint-bar.png)

A wide dark bar across the bottom with a mint button, for dark-themed sites.

```json
{
  "position": "bottom",
  "displayType": "fixed",
  "bannerOpacity": 1,
  "primaryColor": "#20c19e",
  "btnTextColor": "#000000",
  "bannerColor": "#0f1117",
  "borderColor": "#767676",
  "textColor": "#ffffff",
  "headingColor": "#ffffff",
  "btnBorderRadius": "6px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Corporate top bar

![Cookie consent banner as a wide white bar across the top of a white page, with dark grey text and a navy blue Save my preferences button with square corners.](img/corporate-top-bar.png)

A wide white bar across the top with a navy, square-cornered button.

```json
{
  "position": "top",
  "displayType": "fixed",
  "bannerOpacity": 1,
  "primaryColor": "#1d3a8a",
  "btnTextColor": "#ffffff",
  "bannerColor": "#ffffff",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "0px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Centered violet

![Cookie consent banner as a wide pale violet panel centred vertically on a pale violet page, with smaller dark grey text and a violet pill-shaped Save my preferences button with fully rounded corners.](img/centered-violet.png)

A wide pale-violet panel centred on the page, with a pill-shaped violet button and slightly smaller text.

```json
{
  "position": "center",
  "displayType": "floating",
  "bannerOpacity": 1,
  "primaryColor": "#7c3aed",
  "btnTextColor": "#ffffff",
  "bannerColor": "#f5f3ff",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "25px",
  "textSize": "12px",
  "headingSize": "14px"
}
```

## Warm left card

![Cookie consent banner as a narrow cream card floating at the bottom left of a cream page, with dark grey text and a burnt orange pill-shaped Save my preferences button with fully rounded corners.](img/warm-left-card.png)

A narrow cream card at the bottom left with a burnt-orange pill button, for warm, editorial sites.

```json
{
  "position": "left",
  "displayType": "floating",
  "bannerOpacity": 1,
  "primaryColor": "#c2410c",
  "btnTextColor": "#ffffff",
  "bannerColor": "#fdf6ec",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "25px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Dark rose side panel

![Cookie consent banner as a tall near-black panel running the full height of the right side of a dark page, with white text and a rose pink Save my preferences button with black text and square corners.](img/dark-rose-side-panel.png)

A full-height dark panel down the right side with a rose, square-cornered button.

```json
{
  "position": "right",
  "displayType": "fixed",
  "bannerOpacity": 1,
  "primaryColor": "#f43f5e",
  "btnTextColor": "#000000",
  "bannerColor": "#18181b",
  "borderColor": "#767676",
  "textColor": "#ffffff",
  "headingColor": "#ffffff",
  "btnBorderRadius": "0px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Large text teal

![Cookie consent banner as a floating white card at the bottom of a white page, with larger dark grey text and a teal Save my preferences button with slightly rounded corners.](img/large-text-teal.png)

A white bottom card with a teal button and larger text, for readability-first sites.

```json
{
  "position": "bottom",
  "displayType": "floating",
  "bannerOpacity": 1,
  "primaryColor": "#0f766e",
  "btnTextColor": "#ffffff",
  "bannerColor": "#ffffff",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "6px",
  "textSize": "15px",
  "headingSize": "18px"
}
```

## Blue top card

![Cookie consent banner as a floating white card at the top of a white page, with dark grey text and a bright blue Save my preferences button with slightly rounded corners.](img/blue-top-card.png)

A white card floating at the top with a bright blue button, for clean product sites.

```json
{
  "position": "top",
  "displayType": "floating",
  "bannerOpacity": 1,
  "primaryColor": "#1f6feb",
  "btnTextColor": "#ffffff",
  "bannerColor": "#ffffff",
  "borderColor": "#5e6a74",
  "textColor": "#434f58",
  "headingColor": "#434f58",
  "btnBorderRadius": "6px",
  "textSize": "13px",
  "headingSize": "15px"
}
```

## Apply a design to your live banner

A `design` block set on your own page is overwritten by your app's published configuration a moment after the banner loads. To use one of these designs on a live banner:

- **Dashboard:** set the same values in your app's banner design settings, then publish.
- **MCP server:** call `account.previewDesignChange` with your AppID and the `design` object, show the before/after to the site owner, then call `account.updateDesign` with the same object and the returned `previewToken`.

Never add a `design` block to the install snippet. To derive a design from your own site's colours instead, follow [`skills/match-site-design/SKILL.md`](../skills/match-site-design/SKILL.md).