Layout & typography

/slide-authoring carries an opinionated starting point so an agent does not have to invent a look, a scale and a set of layout habits from scratch on every deck. None of it is enforced by the runtime — override any part of it per deck, usually via a theme.

The budget comes first

Before the type scale, the thing that actually breaks pages: the canvas does not scroll. Anything past 1080px is cropped and unrecoverable, so a page has a fixed height budget and you spend it deliberately.

Usable height is 1080 − top padding − bottom padding. Pick the padding first: 120px each side leaves 840px, 160px leaves 760px. Then add up what you are about to place, where an element costs font-size × line-height × line-count plus the gap that follows it. A bullet that wraps costs two lines.

A worked page at 120px padding:

Push the heading to 120px or add a sixth bullet and it no longer fits. When it does not fit, the answer is a second page — not smaller type, not tighter leading, and never overflow: hidden.

Type scale

A 1920 × 1080 stage wants type far larger than a web page does. A caption at 16px is legible in a browser and invisible from the back of a room.

Tighten letter-spacing as size grows — around -0.04em on a hero, -0.02em on a heading, nothing on body. Line-height moves the other way: 1.0 – 1.2 on headings, 1.5 – 1.7 on body copy.

Spacing

Content padding of 100 – 160px from the canvas edge, held constant across the deck. Text should never reach the edge. Between elements, 32 – 64px — enough that grouping reads without a border doing the work.

Palette

One background, one primary text colour, one muted, one accent. Four is usually enough, and the accent earning its place depends on how rarely it appears.

const palette = {
  bg: '#0a0a0c',
  panel: '#111114',
  text: '#f6f5f0',
  textSoft: '#c9c7bd',
  muted: '#7f7e78',
  accent: '#d56b48',
};

Declaring these as a typed design export instead of loose constants makes them editable from the Design panel in the dev server. See Themes.

Layout vocabulary

Four shapes cover most of a deck, and reusing them is what makes pages look related:

Hero. An eyebrow, a headline, one supporting line. Nothing else — a page at 168px has no room for anything else and does not need it.

Two-column. Roughly 60/40. Prose on one side, the artefact it describes on the other. Even columns read as a comparison, so use them when it is one.

Index. A list with monospace numbering and a rule between rows. Good for agendas, recaps and anything with an ordinal.

Quote. One large display setting, attribution small and in mono below it.

An agent will reach for these unless you tell it otherwise, which is the point: a deck that varies its layout on every page reads as a deck nobody edited.