Docs
Product
Developer

Theming & appearance

AdminUpdated Sep 15, 2026

Theming & appearance

Every banner design carries a set of theme tokens — colors, typography, and shape — plus optional custom CSS and a mobile layout breakpoint. These live in the Settings drawer's Appearance tab in Banner Studio.

Theme tokens

Token

Controls

background

Banner surface color.

text

Primary text color.

mutedText

Secondary text (descriptions, "powered by").

highlight

Accent color — the primary button and focal elements.

highlightText

Text color on the primary (highlight) button. Defaults to white.

buttonBg / buttonText / buttonBorder

Secondary button styling. Default to background / text / shade.

shade

Borders and subtle dividers.

link

Link color. Defaults to highlight.

overlay

Backdrop behind modal/popup screens. Defaults to a semi-transparent black.

scheme

Light or dark color scheme hint.

fontFamily

CSS font-family stack applied to the banner.

fontUrl

An external stylesheet (e.g. Google Fonts) to @import — must be https.

buttonRadius

Corner radius on buttons.

radius

Corner radius on the banner surface itself.

maxWidth

Maximum width of bar/modal surfaces on desktop.

Edit colors directly on elements via the Inspector, or set global tokens from the Appearance tab; per-element overrides on the canvas take precedence over the theme defaults.

Match my site

Click Match my site in the Appearance tab to fetch a brand suggestion for the active property — background, text, and accent colors plus font family/URL, inferred from the live site — and apply it to the theme in one click. This requires an active property to be selected; it's a starting point, not a pixel-perfect brand import, so review the result before publishing.

Brand kits

Save a theme + custom CSS combination as a brand kit so you can reapply it to other banner designs without redoing the work — useful when you manage several distinct brands or sub-brands within one organization. From the Appearance tab:

  • Save as brand kit — name the current theme/CSS and store it.

  • Apply a saved kit to instantly overwrite the current draft's theme and custom CSS.

  • Delete kits you no longer need.

Custom CSS

The Custom CSS field in the Appearance tab accepts raw CSS scoped to the banner, for anything the theme tokens don't cover — custom animations, unusual spacing, or overriding a specific element's style. It applies on top of the theme tokens and any per-element styling.

Mobile breakpoint

The Layout section's breakpoint slider (360–1024px) sets the viewport width at which the banner switches from its desktop layout to its mobile layout. Since every element carries independent desktop and mobile position/size (set via the Desktop/Mobile toggle in the Studio toolbar), this slider only controls when the switch happens — design each breakpoint's layout separately on the canvas.

White-label (Pro)

On Pro and Scale plans, the Remove Cookie Munch branding toggle in the Appearance tab hides the "powered by" attribution from the banner. On lower tiers the toggle is shown disabled with a badge — see plans & billing.

Next steps

Was this page helpful?
Theming & appearance