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

{/* TODO(screenshots): /docs-images/slides/deck-inspector.png — Deck inspector with all panels expanded */}

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.

| Token | Default usage |
|---|---|
| `bg`        | Slide background |
| `surface`   | Cards, popovers, callouts |
| `text`      | Primary text |
| `muted`     | Secondary / supporting text |
| `accent`    | Primary buttons, links, active states |
| `accent2`   | Secondary highlights, gradients |
| `border`    | Card borders, dividers |

> [!TIP]
> **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](/docs/build/slides/elements/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.

### Logo

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 title="section-divider-slide.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`:

<!-- omitted: ParamsTable -->

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

## Read next

- [Editor basics → Inspector](/docs/build/slides/editor-basics) — where the deck and slide inspectors live
- [Elements overview](/docs/build/slides/elements/overview) — element-level color overrides