Branding

One palette override re-tints the whole editor, including the parts a stylesheet cannot reach.

The palette

The editor’s colours are a two-layer system. You override layer one — the raw palette — and every shade, every semantic role and every surface re-derives from it. That is why a re-tint is about ten values rather than a restyle.

Set from the console, or over the SDK

await editor.setTheme({ primary: '#c81e2d' })

// or the exact tokens, if you want precise control
await editor.setTheme({
  '--tb-teal': '#c81e2d',
  '--tb-ink': '#2b0b12',
})

Token	What it drives
`--tb-teal`	The primary brand colour. Buttons, focus rings, selection, active states. Set this one first.
`--tb-teal-soft`	The primary at low emphasis: hovers, subtle fills.
`--tb-teal-light`	The lightest primary tint, for large washes.
`--tb-gold`	A secondary accent. Badges and highlights.
`--tb-clay`	A warm accent, used sparingly.
`--tb-magenta`	A third accent, mostly in illustration.
`--tb-ink`	Body text and every dark neutral derived from it.
`--tb-canvas`	The page behind the editor.
`--tb-cream`	Warm surfaces — panels, cards.
`--tb-surface`	The neutral surface for controls and inputs.
`--tb-night`	Dark-mode page background.
`--tb-night-card`	Dark-mode panel and card surface.
`--tb-night-muted`	Dark-mode muted surface.
`--tb-night-line`	Dark-mode borders and dividers.
`--tb-night-fg`	Dark-mode foreground text.

Absent tokens inherit ours, so a partial override is a valid override — supply --tb-teal alone and you get your brand colour on our neutrals, which is what most partners want.

What CSS cannot reach — and why it still follows you

The 2D dieline canvas is drawn, not styled. A stylesheet cannot touch a selection handle any more than it can touch a pixel in a photograph. That is worth knowing because it is where most white-label products stop being white-label: the chrome goes crimson and the canvas stays somebody else’s teal.

Your palette is read by the canvas renderer directly, so all of these follow it:

The focused panel’s ring and its label
Safe-zone dashes
The selection transformer, border and all eight anchors
The rubber-band marquee, fill and stroke
The crop rectangle and its handles
An unresolved comment pin

Some things deliberately do not follow it, because they are functional rather than brand colours and re-tinting them would destroy the signal they carry:

Snap guides stay amber. They mean “this edge is aligned”, and an amber that matched your brand would be invisible against it.
Non-focused panel labels and resolved comment pins stay slate.
The 3D viewer’s control bar stays dark, so it reads against any board colour.

Logo, typeface and name

Setting	Where it appears
Logo	The editor header, and transactional email.
Favicon	The tab, when the editor is opened as a page.
Font family	The editor chrome. Design fonts are separate — see below.
Product name	Everywhere the product names itself.

Copy

Seven strings, overridable individually. Absent keys fall back to ours, so a partial override is fine.

Key	Where it appears
`productName`	Wherever the product names itself, in the UI and in email.
`tagline`	A short line under the product name in email and the embed header.
`primaryCta`	The main save/confirm button in the editor — “Add to cart”, “Save design”.
`quoteCta`	The label on the quote-request entry point.
`emptyDesigns`	The empty state on a customer’s designs list.
`emailFooter`	The footer line in transactional email.
`supportEmail`	The address shown to your end-users when something fails.

primaryCtais the one worth setting on day one — “Add to cart” and “Save design” are very different promises, and the default cannot know which yours is.

Custom CSS

A last-mile escape hatch for the last five per cent. It is strictly additive, injected after the theme, and scoped so it cannot reach outside the editor.

@import is rejected — it would load an external stylesheet.
url() is rejected anywhere in a declaration, so custom CSS cannot fetch anything.
Every selector is scoped to the theme root, so html, body and :root match nothing.
Only @media, @supports and @keyframes are allowed.

If you find yourself reaching for it constantly, tell us — that is usually a missing token rather than a missing escape hatch.

Previewing

The console’s branding editor frames a real editor session and re-tints it live as you change a colour, canvas included. Two things need a reload rather than appearing instantly: the logo and the copy overrides, because they are read at boot.

Configuration — which styles, materials and formats you offer — is a separate page: Configuration.

← Webhooks

Configuration →