Brand the banner and preferences dialog
By OptinStack Team - Jun 28, 2026 - 1 min read
The banner and preferences dialog render inside an isolated Shadow DOM, so the component is isolated from most host-page CSS. You brand them with dedicated tokens that OptinStack injects as CSS custom properties. This keeps the banner looking like OptinStack on every site while still matching your palette.
The brand tokens
Open a rule, then use Banner Design to choose a preset or override individual theme tokens. You can control the main color palette, on-accent text, font family, border radius, button radius, button padding, spacing scale, focus ring width, and border width. The values below are the Default preset shipped with the runtime.
| Token | Default |
|---|---|
| Primary text | #0f172a |
| Surface | #ffffff |
| Background | #f8fafc |
| Muted text | #64748b |
| Accent | #2e3181 |
| Border | #e5e7eb |
| On accent | #ffffff |
| Font family | Roboto, Tahoma, Verdana, Segoe, sans-serif |
| Border radius | 8px |
| Button radius | 8px |
| Button padding | 8px 16px |
| Spacing scale | 1 |
| Focus ring width | 2px |
| Border width | 1px |
Keep contrast in mind when you change the accent or text colors. The banner must stay readable for visitors, and some regulators expect accessible defaults.
Related articles
Basic vs Advanced Google Consent Mode
Compare Basic and Advanced Google Consent Mode, including tag loading, cookieless pings, GTM settings, verification, and when each mode makes sense.
Set up Google Consent Mode v2
Map OptinStack's four consent categories onto Google Consent Mode v2 and keep them in sync as visitors choose.
Localize the banner and honor GPC
How default banner language, Business and Enterprise translation fetches, and Global Privacy Control defaults actually work in OptinStack.
How helpful was this article?