Theming & appearance: colors, fonts, dark mode, and positioning

Every banner design carries a set of theme tokens — colors, typography, and shape — plus optional custom CSS and a mobile layout breakpoint. This guide covers where each of those lives in Banner Studio and how to use them to make a banner look like it belongs on your site, not like a plugin bolted onto it.

There are two places theming happens: the Design panel in the right-hand Inspector (global theme tokens, colors, typography, shape) and the Settings → Appearance tab (brand kits, custom CSS, the mobile breakpoint, and white-labeling).

Colors

Open the Design panel by clicking empty canvas space (or nothing selected) so the Inspector shows global settings rather than a single element's properties. Under Light & dark mode and Colors you'll find:

Each swatch opens a color picker — click it, pick or type a color, and the canvas updates immediately so you can judge contrast at a glance. The a11y strip under the canvas will flag low-contrast combinations as you go; it's advisory only and won't block you from publishing, but it's worth listening to.

Typography

Still in the Design panel, the Typography section controls:

• Font family — a CSS font-family stack (e.g. Georgia, serif); leave it blank to inherit the system default.

• Body size and Heading size — sliders from 12–20px and 14–32px.

• Heading weight and Body weight — Regular, Medium, Semibold, or Bold.

Shape

The Shape section rounds out the visual identity:

• Radius — corner rounding on the banner surface itself (0–28px).

• Button radius — corner rounding on buttons (0–24px).

• Gap — spacing between buttons.

• Max width — the maximum width of bar and modal surfaces on desktop (320–720px).

• Shadow — None, Subtle, Soft, or Strong.

Light and dark mode

At the top of the Design panel, set Mode to one of:

• Light only — a single palette for everyone.

• Dark only — a single dark palette for everyone.

• Auto (follow system) — shows your light colors by default, and switches to a separate dark palette for visitors whose device is set to dark mode.

Choosing Dark only or Auto reveals a full second set of color fields — background, text, accent, muted text, border, button background/text, and backdrop — so your dark palette isn't just an inverted guess, it's something you design deliberately. A Preview selector next to the mode picker lets you flip the canvas between Light and Dark while you work, without needing two different browsers or devices to check both.

Positioning elements

Positioning in Studio is per-element, not a single global "banner position" setting. Every element you place — heading, button, category list, whatever — carries independent desktop and mobile coordinates and sizes. Drag an element to move it, drag a handle to resize it, and use the Desktop / Mobile toggle in the toolbar to switch which breakpoint you're currently positioning. The canvas snaps to alignment guides as you drag, so lining things up doesn't require pixel-perfect mouse control.

Because desktop and mobile layouts are independent, a design that looks great on desktop won't accidentally break on a phone — but it does mean you should check both breakpoints before publishing rather than assuming one follows the other automatically.

(If you're looking for the reopen-button's on-page corner — bottom-left, bottom-right, top-left, or top-right — that lives in Settings → Behaviour, not Appearance; see the Banner settings guide.)

Match my site

Rather than eyeball your own brand colors, click Match my site in Settings → Appearance. Cookie Munch inspects your live property and suggests a background, text, and accent color plus a font family (and font URL, if it detects a web font), then applies them to the theme in one click. This requires an active property to be selected, and it's a starting point rather than a pixel-perfect import — always review the result (and check contrast) before publishing.

Brand kits

If you manage several distinct brands or sub-brands, save a theme and its custom CSS together as a brand kit so you don't have to redo the styling work on every new design:

1. Get the current design's colors, typography, and custom CSS the way you want them.

2. In Settings → Appearance, type a name for the kit and click Save as brand kit.

3. On any other design, click a saved kit's name to apply it — this overwrites the current draft's theme and custom CSS in one step.

4. Click the × next to a kit to delete it when you no longer need it.

Custom CSS

The Custom CSS field in Settings → Appearance takes raw CSS scoped to the banner, for anything the theme tokens don't cover — a subtle animation, unusual spacing, or a one-off override on a specific element. It's applied on top of both the global theme tokens and any per-element styling from the canvas.

Mobile breakpoint

The Layout section's slider (360–1024px) sets the viewport width at which the banner switches from its desktop layout to its mobile one. Since desktop and mobile positions are designed independently on the canvas, this slider only controls when the switch happens — it doesn't reflow one layout into the other for you.

White-label

On Pro and Scale plans, a Remove Cookie Munch branding toggle in Settings → Appearance hides the "powered by" attribution from the banner. On lower tiers the toggle is visible but disabled, with a badge indicating the plan it requires.

Tips

• Design the light theme first, get contrast right, then turn on Auto mode and tune the dark palette against it — trying to nail both at once tends to produce a muddier result.

• Save a brand kit as soon as you're happy with a look, even if you only manage one property today — it means your next site starts from your brand, not from scratch.

• Keep Custom CSS for the last 5% of polish. Anything a theme token or per-element style already covers is safer to set there, since it survives template swaps and stays visible to the Inspector.