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.

{
  "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.

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

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.

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:

{ "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	`auto`
`style`	`real`, `clay`, `outline`, `sketch`. How the frame is drawn. See 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	`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.

{ "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.

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.

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

{ "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

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

{
  "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.

{
  "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.

Icon row#

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

{ "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.

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.

{
  "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.

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.