# Brand the banner and preferences dialog

> Brand the banner and preferences dialog using dedicated tokens injected into the Shadow DOM.

Author: OptinStack Team  
Published: 2026-06-28  
Page: https://community.optinstack.com/articles/brand-the-banner-and-preferences-dialog  
Markdown: https://community.optinstack.com/llms.md/articles/brand-the-banner-and-preferences-dialog

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\.

*Default preset tokens (out-of-the-box runtime values)*

| 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 |

> **Tip:** 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.

### Can I style the banner with my site's CSS?

No. The banner lives in a Shadow DOM with its own tokens, so it cannot be styled by your site's CSS. Change the brand tokens in the dashboard instead.

### Can I change the banner fonts?

Yes. Banner Design lets you change the font family and the surrounding layout tokens such as button padding, spacing scale, and radii. Arbitrary site CSS still does not cross the Shadow DOM boundary.