← Cookie Compliance Agent Manual

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.

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.
Design 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"
}
Minimal cardA quiet off-white card with a near-black button, for minimal and monochrome sites.
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.
Design 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"
}
Dark mint barA wide dark bar across the bottom with a mint button, for dark-themed sites.
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.
Design 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"
}
Corporate top barA wide white bar across the top with a navy, square-cornered button.
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.
Design 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"
}
Centered violetA wide pale-violet panel centred on the page, with a pill-shaped violet button and slightly smaller text.
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.
Design 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"
}
Warm left cardA narrow cream card at the bottom left with a burnt-orange pill button, for warm, editorial sites.
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.
Design 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"
}
Dark rose side panelA full-height dark panel down the right side with a rose, square-cornered button.
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.
Design 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"
}
Large text tealA white bottom card with a teal button and larger text, for readability-first sites.
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.
Design 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"
}
Blue top cardA white card floating at the top with a bright blue button, for clean product sites.

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:

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.