live-layerdocs
View as markdown

Theming

Theming applies in two layers: deck-wide (defaults for every slide) and per-slide (overrides for individual slides). The slide editor exposes both; per-slide overrides are sparse — only the properties you change deviate from the deck.

Deck theme

With no element selected (and no slide selected — click empty space), the right inspector becomes the Deck inspector. This is your deck-wide theme — seven color tokens at the top, then font, text size, spacing, and corner radius.

Or open it explicitly via Agents → [your agent] → Slide design, which is the dedicated full-page version of the same controls plus a live preview.

Color tokens

Seven named slots. Every element in the editor that takes a color (text fill, shape fill, button background, etc.) can pick from these — and updating a token cascades automatically through the whole deck.

TokenDefault usage
bgSlide background
surfaceCards, popovers, callouts
textPrimary text
mutedSecondary / supporting text
accentPrimary buttons, links, active states
accent2Secondary highlights, gradients
borderCard borders, dividers

Always color elements via tokens, not literal hex codes. A token like accent follows whatever color you set for it — and per-slide theme overrides will respect it. A literal hex code paints itself in and stops responding to brand changes.

Font

A single font family for the deck. The picker shows a curated whitelist (~200 Google Fonts plus system fallbacks). Custom fonts aren't supported in v1.

Text size

A single size scale. The deck-wide value sets the base; element-level fontSize overrides per text run. See Text → Typography.

Spacing & corners

  • Spacing — controls margin / padding on layout-aware elements (cards, callouts).
  • Corners — sets the deck-wide rounded-corner radius for surfaces. Element-level cornerRadius overrides per element.

Upload a logo (PNG/SVG/JPG). Used by some templates as a watermark and by the [Live Layer] watermark replacement on paid plans.

Per-slide override

Any slide can override a subset of the deck theme. With a slide selected (no elements), the inspector exposes an Appearance panel:

  • Background color (override the deck bg)
  • Theme override — change any deck token for this slide only

Common pattern: section dividers with a darker bg and an inverted text:

json
{
  "id": "slide_section_intro",
  "themeOverride": {
    "colors": {
      "bg": "#0F172A",
      "text": "#F8FAFC",
      "accent": "#06B6D4"
    }
  }
}

Only the keys you specify override the deck. Everything else inherits from theme.

Logo placement

The deck-wide logo renders on slides via templates that include a <LogoSlot> element. Most templates default to corner-docked. To skip the logo on a specific slide (e.g., a video slide), set themeOverride: { logoUrl: null }.

Watermark

Free-tier orgs get a "Live Layer" watermark on the published view. Paid plans replace it with the deck's logoUrl. The watermark gating is server-side — there's no client toggle.

Schema reference

SlideTheme:

NameTypeDescription
colors*{ bg, surface, text, muted, accent, accent2, border }Seven named hex colors.
font*stringFont-family name from the curated whitelist.
headingFontstringOptional separate heading font. Defaults to `font`.
textSize"sm" | "base" | "lg" | "xl"Base text-size scale.
spacing"compact" | "normal" | "comfortable"Margin / padding density.
corners"sharp" | "rounded" | "pill"Default corner radius for surfaces.
logoUrlstringDeck logo URL.

Slide.themeOverride is Partial<SlideTheme> — any subset of the above.