# Slides

A set is a list of up to ten slides. A slide is one screenshot image for the store: a layout, some copy, and a screenshot inside a device. This page lists every field. The Studio's editor sets the same fields, so it reads as a map of the editor too.

A project has one set that every device shares, and any device can have a set of its own. See [A set for each device](#a-set-for-each-device).

```json
{
  "layout": "device-bottom",
  "eyebrow": "Streaks",
  "headline": "Build *habits* that stick",
  "subheadline": "One tap a day",
  "screenshot": "home",
  "badges": [{ "type": "rating", "title": "4.8", "subtitle": "App Store rating", "stars": 4.8 }]
}
```

Every field is optional.

## Layouts

`layout` decides where the copy and the devices go. The default is `device-bottom`.

| Layout | Screenshots | What it is |
| --- | --- | --- |
| `device-bottom` | 1 | Copy on top, device below and bleeding off the bottom edge. The classic store slide. |
| `device-top` | 1 | Device bleeding off the top edge, copy underneath. |
| `device-center` | 1 | Copy on top, the whole device visible below it. |
| `tilted` | 1 | Like device-bottom, with the device rotated and pushed off-centre for energy. |
| `closeup` | 1 | Like device-bottom, with the device larger than the canvas, so the top of the screen reads as a detail shot. |
| `floating` | 1 | Copy on top, the whole device below it, turned in perspective. |
| `duo` | 2 | Two overlapping devices (screenshot in front, screenshot2 behind) under the copy. |
| `side-by-side` | 2 | Two upright devices next to each other (screenshot left, screenshot2 right), for two steps or a before and after. |
| `trio` | 3 | Three devices fanned out: screenshot in front, screenshot2 and screenshot3 behind it left and right. |
| `device-right` | 1 | Copy in a column on the left, the device standing on the right and bleeding off that edge. Made for more text: a headline with a list of feature points under it. |
| `device-left` | 1 | The mirror of device-right: the device on the left, the copy column on the right. |
| `hero` | 1 | Social-proof opener: big badges above the headline, device peeking in from the bottom. Without a screenshot it becomes a centred text slide. |
| `features` | 0 | No device: the copy on top and the slide's feature cards below it, each an icon, a big figure or a small picture with a title. The card style picks the look. |
| `statement` | 0 | No device: the headline set very large, as the picture itself. For a claim, a promise or a question. |
| `stat` | 0 | No device: the slide's first feature as one giant figure with what it counts under it, and the next ones as a row of smaller figures. |
| `steps` | 0 | No device: the slide's features as numbered steps joined by a line, each a title and one line. A step can show a small picture of its screen. |
| `reviews` | 0 | No device: the slide's review badges as a wall of quote cards under the copy, each with its stars, the quote and who wrote it. |

Layouts with two or three devices read `screenshot2` and `screenshot3` as well.

The last five have no device. See [Slides without a device](#slides-without-a-device).

## Copy

| Field | What it is |
| --- | --- |
| `eyebrow` | A small uppercase line above the headline |
| `headline` | The main line. Two to five words read best |
| `subheadline` | One supporting line under it |

- `*Asterisks*` around a word mark it. By default it takes the accent colour, and `emphasis` picks another way. See [Marked words](#marked-words).
- `\n` forces a line break.
- Text shrinks to fit its space, so nothing is cut off.
- Each text is a string, or one string per language. See [Languages](/docs/languages).

## Screenshots

`screenshot`, `screenshot2` and `screenshot3` hold the names of uploaded screenshots. A name that does not exist leaves the device empty, and the render warns about it. See [Get your screens in](/docs/screens).

## The look

These fields can be set once in the project's **theme** and again on any slide. The slide wins.

| Field | Values | Default |
| --- | --- | --- |
| `background` | A preset, `auto`, a hex colour, or a custom object. See below | |
| `textColor` | A hex colour | Black or white, whichever reads on the background |
| `accentColor` | A hex colour, for tinted words, the eyebrow and badge stars | |
| `font` | A font id. See below | |
| `align` | `center` or `left` | `center` |
| `textScale` | 0.5 to 1.5. A multiplier for the headline size | 1 |
| `emphasis` | `tint`, `marker`, `underline`. How a headline shows its `*marked*` words | `tint` |
| `device` | The device options. See below | |

### Marked words

| Value | What it is |
| --- | --- |
| `tint` | The words take the accent colour. Without one, the rest of the headline is dimmed instead. |
| `marker` | A band of the accent colour behind the words, like a highlighter. |
| `underline` | A thick line of the accent colour under the words. |

## Backgrounds

- **A preset:** `midnight`, `aurora`, `ember`, `ocean`, `sunset`, `candy`, `forest`, `graphite`, `peach`, `mint`, `lavender`, `sky`, `paper`, `ink`
- **`auto`:** colours taken from the slide's own screenshot.
- **A hex colour:** `"#0F172A"`.
- **A custom one:**

```json
{ "type": "mesh", "colors": ["#1E3A8A", "#7C3AED", "#EC4899"], "angle": 165, "noise": 0.2 }
```

`type` is `solid`, `gradient` or `mesh`. `colors` takes one to five hex colours. `angle` is the direction of a gradient in degrees, and `noise` is film grain from 0 to 1.

## Device

| Field | Values | Default |
| --- | --- | --- |
| `frame` | `auto`, `iphone`, `duo`, `ipad`, `mac`, `none`. `auto` matches the screenshot, `duo` is the unfolded iPhone Duo, `mac` is a MacBook, and `none` shows the bare rounded screen, which for a Mac screenshot is the window alone. See [Mac apps](/docs/mac#a-window-or-a-macbook) | `auto` |
| `style` | `real`, `clay`, `outline`, `sketch`. How the frame is drawn. See [Device look](#device-look) | `real` |
| `color` | `black`, `silver`, `natural`, `gold`, `blue`, `orange` | `black` |
| `scale` | 0.4 to 1.6 | 1 |
| `rotate` | -45 to 45 degrees. On a layout with several devices it turns them all | 0 |
| `spread` | 0 to 60 degrees. The angle between the devices of `duo`, `side-by-side` and `trio` | 11 for `duo`, 14 for `trio`, 0 for `side-by-side` |
| `gap` | -30 to 30, in % of the canvas width. Pushes those devices apart, or together when negative | 0 |
| `perspective` | `none`, `left`, `right`. A 3D turn towards one side | `none` |
| `offsetX` | -60 to 60, in % of the canvas width | 0 |
| `offsetY` | -60 to 60, in % of the canvas height | 0 |
| `shadow` | `none`, `soft`, `strong` | `soft`, and `none` for an outline or a sketch |
| `statusBar` | `none`, `cover`, `overlay`. See [Status bar](#status-bar) | `none` |
| `statusBarTime` | The time the status bar shows, such as `9:41` | `9:41` |
| `statusBarColor` | `auto`, `light` (white), `dark` (black) | `auto` |

### Device look

`style` is how the frame is drawn. Set it once in the theme, so the whole set matches.

| Look | What it is |
| --- | --- |
| `real` | The device as it looks: a metal band, a black bezel and its buttons. The default. |
| `clay` | One matte colour all over, like a clay model. Calm, and it leaves the attention on the screen. |
| `outline` | A thin line drawing of the device around the screenshot. The line takes the text colour, or the device colour when one is set. |
| `sketch` | The line drawing with the wobble of a pen, as if drawn by hand. |

### Two or three devices

On `duo`, `side-by-side` and `trio`, `spread` is the angle between the devices. At 0 they stand parallel, and a larger angle fans them out. `gap` moves them apart or together, and `rotate` turns the whole group.

A group that mixes a Mac screenshot with iPhone or iPad ones is arranged differently: the laptop or window stands in the middle, and the phones and tablets stand in front of its lower corners. `spread` does not apply there. See [Mac apps](/docs/mac#mac-and-iphone-together).

```json
{ "layout": "duo", "screenshot": "home", "screenshot2": "stats", "device": { "spread": 24, "gap": 4 } }
```

### Status bar

A screenshot from a real device shows whatever the device showed: an odd time, a low battery, one bar of signal. `statusBar` draws a clean one instead, with the time, full signal, Wi-Fi and a full battery.

| Value | What it is |
| --- | --- |
| `none` | The screenshot as it is. The default. |
| `cover` | Painted over the status bar the screenshot came with, in the colour of the screenshot's top edge. For a screenshot from a real device, with its odd time and half-empty battery. |
| `overlay` | Drawn straight onto the screenshot, nothing covered. For a screenshot that has no status bar. |

`statusBarColor` is read off the screenshot unless you set it. Screenshots taken with `appshots capture --clean` in the simulator are clean already and need none of this. A web app's pages taken with `appshots capture --web` have no status bar and leave its place free: `overlay` draws one there.

## Badges

A slide draws up to 4 with its copy, from `badges`. `badgePosition` puts them at the `top`, above the headline, or at the `bottom`, below the subheadline. The list itself holds up to ten, because the `reviews` layout also reads its review badges. See [Reviews](#reviews).

| Type | What it is |
| --- | --- |
| `laurel` | Laurel wreath around a title and subtitle. Add `stars` or `icon` for a top line. The award look. |
| `stars` | A row of stars over a title and subtitle, no wreath. |
| `icon` | An icon (trophy by default) next to a title and subtitle. |
| `pill` | A small capsule label with an optional icon. |
| `rating` | A card with the score large on the left, the star row and a subtitle beside it. The App Store rating look. |
| `review` | A card with a star row, a short quote as the title and who said it as the subtitle. |

| Field | What it is |
| --- | --- |
| `title` | The big line, such as "10K+" or "4.9". On a review it is the quote |
| `subtitle` | The small line, such as "Downloads". On a review it is who said it |
| `stars` | 0 to 5. Shows a row of stars filled to this value |
| `icon` | An icon id |
| `tone` | See the table below |

| Tone | What it is |
| --- | --- |
| `plain` | The wreath in the text colour, stars and icon in the accent colour (gold stars without one). |
| `gold` | Wreath, stars and icon in a metallic gold. The award look. |

Badges are claims. Use real figures only. See [What App Review accepts](/docs/app-review#only-real-numbers).

## Features

`features` holds up to eight entries, most important first. On the `features` layout they are the cards that fill the slide, on `stat` the figures, and on `steps` the steps. On every other layout they are short points beside the headline.

| Field | What it is |
| --- | --- |
| `title` | The feature, in two to four words. Required |
| `text` | One short supporting line |
| `icon` | An icon id |
| `value` | A big figure or word in place of the icon, such as "0", "24h" or "100%". On `stat` it is the figure, and on `steps` it replaces the step's number |
| `color` | A hex colour for this entry alone: its icon, its figure and its card. Left out, the accent colour |
| `image` | The name of an uploaded image shown in place of the icon, such as a small illustration. See [Logos and artwork](/docs/images) |
| `screenshot` | The name of an uploaded screenshot shown small. On a card it stands under the title and runs off the card's lower edge, and on a step it stands beside the text |

`featureStyle` on the `features` layout:

| Style | What it is |
| --- | --- |
| `bento` | Tiles of mixed sizes, like the summary slide of a keynote. The first feature gets the large tile. |
| `grid` | Even tiles side by side, icon above the title. |
| `cards` | One wide card per feature, icon on the left, title and detail beside it. |
| `list` | Plain rows without cards, like a What's New screen. |

`featureStyle` for points on the other layouts:

| Style | What it is |
| --- | --- |
| `list` | Rows of an icon, a title and one line of detail. |
| `cards` | The same rows, each on a card. |
| `grid` | Cards two across, where the copy is wide enough for them. |
| `chips` | Small pills with an icon and the title only, in rows. |

### The cards

`featureCards` sets what the cards of the `features` layout are made of.

```json
{ "layout": "features", "featureStyle": "grid", "featureCards": { "look": "solid", "icons": "badge", "columns": 2 } }
```

| Field | Values | Default |
| --- | --- | --- |
| `look` | See below | `glass` |
| `icons` | See below | `gradient` |
| `columns` | 1 to 4 cards across, for `grid`, `cards` and `list`. A bento arranges itself | The canvas decides |

| Look | What it is |
| --- | --- |
| `glass` | A translucent film over the background. The first card of a bento, and any card with a colour of its own, is washed in that colour. |
| `tint` | Every card washed in its colour: its own, or the accent colour. |
| `solid` | Every card filled with its colour, the text on it black or white. Blocks of colour. |
| `outline` | No fill, a thin line around each card. |

| Icons | What it is |
| --- | --- |
| `gradient` | The icon alone, shaded from the text colour to the card's colour. |
| `badge` | The icon on a rounded square of the card's colour, like an app icon. |
| `plain` | The icon alone, in the text colour. |

## Slides without a device

Five layouts show no device. They carry what a screenshot cannot: a claim, a number, a way of working, what people say. One or two in a set of ten is plenty, and the first slides should still show the app.

| Layout | What it reads | Good for |
| --- | --- | --- |
| `features` | `features`, as cards | What the app does, at a glance |
| `statement` | The headline alone, set very large | A claim, a promise or a question |
| `stat` | `features`: the first is the giant figure, the next ones a row of smaller figures | One number that carries the pitch |
| `steps` | `features`, as numbered steps | How it works, in three or four steps |
| `reviews` | The `review` badges, as a wall of quote cards | What users and the press say |

```json
{
  "layout": "stat",
  "headline": "Loved by *runners*",
  "features": [
    { "value": "2M+", "title": "Runs logged" },
    { "value": "4.8", "title": "App Store rating" },
    { "value": "120", "title": "Countries" }
  ]
}
```

```json
{
  "layout": "steps",
  "headline": "Up and running in *a minute*",
  "features": [
    { "title": "Pick a goal", "text": "Distance, time or pace.", "screenshot": "goal" },
    { "title": "Run", "text": "The watch does the counting." },
    { "title": "See the week", "text": "Every run on one page." }
  ]
}
```

### Reviews

The `reviews` layout draws up to 6 badges of the type `review` as its wall. `title` is the quote, `subtitle` is who said it, and `stars` adds the row of stars. A publication works the same way, with its name as the `subtitle`. Badges of other types stay with the copy as on any slide.

```json
{
  "layout": "reviews",
  "headline": "People *stay*",
  "badges": [
    { "type": "review", "title": "The only tracker I kept past January.", "subtitle": "Maya, App Store review", "stars": 5 },
    { "type": "review", "title": "Quietly excellent.", "subtitle": "The Sweet Setup" }
  ]
}
```

Figures and quotes are claims. Use real ones only, and a quote only with the right to use it. See [What App Review accepts](/docs/app-review#only-real-numbers).

## Icon row

A row of up to eight icons or brand logos with the copy, for the services your app works with.

```json
{ "iconRow": { "label": "Works with", "icons": ["spotify", "slack", "notion"], "style": "tiles" } }
```

| Field | Values | Default |
| --- | --- | --- |
| `icons` | One to eight icon ids, in the order shown | Required |
| `label` | A short line over the row | |
| `style` | See below | `tiles` |
| `tone` | See below | `brand` |
| `size` | `small`, `medium`, `large` | `medium` |
| `position` | `top` or `bottom` | `bottom` |

| Style | What it is |
| --- | --- |
| `tiles` | Each icon on a rounded square, like a row of app icons. |
| `circles` | Each icon on a round disc. |
| `plain` | The icons alone, side by side. The logo strip look. |

| Tone | What it is |
| --- | --- |
| `brand` | Brand icons in the service's own colours, such as YouTube's red; every other icon in the accent colour. |
| `accent` | Every icon in the accent colour. |
| `text` | Every icon in the text colour, for a quiet strip of logos. |

## Logo and images

`logo` shows an uploaded image over the headline, and `images` places up to ten anywhere on the slide. See [Logos and artwork](/docs/images).

## A set for each device

`slides` is the set every device shares. It is drawn again for each canvas, so one design gives an iPhone, an iPad and a Mac set. That is the quickest way to a full export, and the results look alike.

A device can have its own set instead, in `deviceSlides`. The iPad's or the Mac's canvas has another shape and another reader, so a set composed for it usually reads better: another layout, more text beside the device, other screenshots, a different number of slides.

```json
{
  "slides": [{ "headline": "Build *habits* that stick", "screenshot": "home" }],
  "deviceSlides": {
    "ipad": [{ "layout": "device-right", "headline": "Room for the *whole week*", "screenshot": "week" }],
    "mac": [{ "layout": "device-left", "headline": "Plan at *your desk*", "screenshot": "overview" }]
  }
}
```

- The devices are `iphone`, `duo`, `ipad` and `mac`. Each takes one to ten slides.
- A device with its own set draws that set and nothing from `slides`. The other devices keep the shared one.
- The theme, the languages and the screenshots belong to the project, so the sets match in colour and font without repeating them.
- In the Studio, **Give the iPad its own slides** under the device switch starts a set as a copy of the shared one. **Use the shared slides again** removes it.
- An agent passes `device` to `set_slides`, and `of` to `update_slide`. See [MCP tools](/docs/mcp).

## Fonts

41 fonts, all served by the server itself. The value of `font` is the id in brackets.

- **Sans:** Inter (`inter`), Manrope (`manrope`), Plus Jakarta Sans (`plus-jakarta-sans`), DM Sans (`dm-sans`), Outfit (`outfit`), Figtree (`figtree`), Geist (`geist`), Onest (`onest`), Urbanist (`urbanist`), Lexend (`lexend`), Montserrat (`montserrat`), Rubik (`rubik`), Red Hat Display (`red-hat-display`), Archivo (`archivo`), Sora (`sora`), Space Grotesk (`space-grotesk`)
- **Rounded:** Nunito (`nunito`), Quicksand (`quicksand`), Fredoka (`fredoka`), Baloo 2 (`baloo-2`)
- **Display:** Bricolage Grotesque (`bricolage-grotesque`), Unbounded (`unbounded`), Syne (`syne`), Oswald (`oswald`), Anton (`anton`), Bebas Neue (`bebas-neue`), Archivo Black (`archivo-black`)
- **Serif:** Fraunces (`fraunces`), Playfair Display (`playfair-display`), Lora (`lora`), Newsreader (`newsreader`), Cormorant (`cormorant`), Roboto Slab (`roboto-slab`), Instrument Serif (`instrument-serif`), DM Serif Display (`dm-serif-display`), Young Serif (`young-serif`)
- **Handwritten:** Caveat (`caveat`), Pacifico (`pacifico`), Permanent Marker (`permanent-marker`)
- **Mono:** JetBrains Mono (`jetbrains-mono`), Space Mono (`space-mono`)

## Icons

199 icons, for badges, features and icon rows.

- **General:** `trophy`, `crown`, `medal`, `star`, `heart`, `sparkle`, `fire`, `rocket`, `target`, `flag`, `gift`, `thumbs-up`, `verified`, `check`, `confetti`, `smiley`, `lightbulb`, `magic-wand`, `infinity`, `bolt`
- **Privacy:** `shield`, `shield-check`, `lock`, `key`, `fingerprint`, `eye`, `eye-off`, `incognito`, `block`, `hand`
- **Time:** `clock`, `timer`, `hourglass`, `countdown`, `calendar`, `calendar-check`, `alarm`, `bell`, `bell-off`, `moon`, `sun`
- **Media:** `camera`, `image`, `video`, `video-off`, `play`, `film`, `music`, `mic`, `headphones`, `speaker`, `mute`
- **People:** `user`, `users`, `chat`, `chats`, `mail`, `phone`, `share`, `link`, `globe`, `translate`, `megaphone`
- **Work:** `chart-bar`, `chart-line`, `chart-pie`, `trend-up`, `search`, `sliders`, `gear`, `filter`, `checklist`, `check-square`, `note`, `pencil`, `book`, `books`, `bookmark`, `tag`, `folder`, `document`, `clipboard`, `calculator`, `database`, `newspaper`
- **Devices:** `iphone`, `devices`, `watch`, `desktop`, `keyboard`, `widgets`, `layers`, `cloud`, `cloud-check`, `sync`, `download`, `upload`, `export`, `offline`, `wifi`, `battery`, `chip`, `tap`, `cursor`, `qr-code`, `scan`, `code`, `terminal`, `plug`, `power`, `toggle`, `robot`, `palette`, `brush`
- **Places:** `map-pin`, `map`, `compass`, `navigation`, `airplane`, `car`, `bicycle`, `house`, `storefront`, `mountains`, `tree`
- **Money:** `wallet`, `credit-card`, `coins`, `dollar`, `cart`, `bank`, `piggy-bank`, `receipt`, `ticket`
- **Life:** `heartbeat`, `barbell`, `run`, `leaf`, `plant`, `drop`, `brain`, `bed`, `pill`, `food`, `coffee`, `lotus`, `paw`, `graduation-cap`, `puzzle`, `game`
- **Signs:** `plus`, `close`, `question`, `info`, `warning`, `thumbs-down`

**Brand logos** (43): `youtube`, `instagram`, `tiktok`, `facebook`, `snapchat`, `x`, `threads`, `reddit`, `whatsapp`, `telegram`, `messenger`, `discord`, `twitch`, `pinterest`, `linkedin`, `spotify`, `slack`, `notion`, `github`, `twitter`, `mastodon`, `tumblr`, `medium`, `patreon`, `wechat`, `soundcloud`, `apple-podcasts`, `steam`, `meta`, `apple`, `google`, `android`, `app-store`, `google-play`, `google-drive`, `dropbox`, `figma`, `amazon`, `paypal`, `stripe`, `openai`, `windows`, `teams`

A brand logo is somebody's trademark. See [What App Review accepts](/docs/app-review#other-companies-names-and-logos).