Custom CSS for the Consent Banner, Privacy Center, and Floating Button

The built-in branding controls — theme, primary and secondary colors, typography, layout — cover what most companies need. They also ship with real guardrails: Accept and Deny keep balanced visual weight (treating them asymmetrically is a documented dark pattern under GDPR and CCPA/CPRA enforcement guidance), text-to-background contrast stays at or above 4.5:1 for WCAG AA conformance, and every interactive state — hover, focus, active, disabled — is designed for you across links, buttons, form controls, and focus rings.

For the subset of teams that need tighter brand fit than the built-ins allow, we've added two override layers.

CSS Variables — the --cd-* token surface

A canonical set of design tokens is now exposed directly:

  • --cd-color-* — primary, foreground, hover, background, link, focus ring, plus widget-specific tokens like --cd-color-cb-accept-button and --cd-color-pc-button
  • --cd-radius-* — button and card corner radii
  • --cd-font, --cd-font-scale — font family and a unitless scale multiplier for proportional typography changes
  • --cd-offset-* — vertical and horizontal offsets for the banner and floating button

Each widget editor includes a Reference card listing the tokens that apply to that widget. Override a token in the CSS Variables textarea and it takes effect immediately in the preview and, on save, publicly.

Custom CSS — scoped raw CSS

When a token doesn't cover the rule you need, the Custom CSS textarea accepts arbitrary CSS. Scope every rule with the widget's root class — .cd-consent-banner, .cd-privacy-center, or .cd-floating-button — so a rule meant for the privacy center doesn't match the floating button.

Widgets render inside a shadow DOM, so your page CSS doesn't leak in and widget CSS doesn't leak out.

Composition order

Concord composes the widget stylesheet server-side in this order:

  1. Base widget stylesheet
  2. Generated branding and theme CSS from the built-in controls
  3. Your customCssVariables
  4. Your customCss

Your overrides win. That includes the accessibility and dark-pattern guardrails that the built-in controls enforce. Once you override a token or write raw CSS, staying WCAG AA and keeping Accept/Deny at comparable visual weight is on you — the composition applies whatever you specify. For most teams, the built-in controls are the right stopping point. The override layers are there for the teams that have a designer on the project and want to own the visual QA.