---
title: "Slides"
description: "A deck is the system in front of a room."
canonical: slides.html
navigation-title: "Slides"
---

<a id="slides"></a>

# Slides

- [What a slide owns](#what-a-slide-owns)
- [Type and space](#type-and-space)
- [A slide on a page](#a-slide-on-a-page)
- [The deck](#the-deck)
- [The layouts](#the-layouts)
  - [The frame](#the-frame)
  - [The content](#the-content)
- [Figures](#figures)
  - [Regions](#regions)
- [Designing one](#designing-one)
- [A deck in the Claude app](#a-deck-in-the-claude-app)
- [What a deck needed](#what-a-deck-needed)

A deck is the system in front of a room. It is not a second design. **A
slide is the page at twice the size, read from twice the distance.** The
frame is 960 × 540 and `sds-slide` doubles it, so a slide renders at
1920 × 1080. Every register, every component set and every hairline keeps
the value it has on a page.

The display step is a slide's title. **What a room reads stands a step
over the page.** The body of a content slide and the text beside a picture
take the lead step, 19 over 16. A card on a slide is `sds-surface` with
nothing said to it, at that step as a whole.

So the system has no slide palette and no slide components.
It has one element that owns the frame, and the layouts below. Those are
screens like every other page here: **Starting Points** the design system
carries as layouts. They stand live under **Slides** in the Storybook
sidebar and static under `specimens/screens/`.

<a id="what-a-slide-owns"></a>

## What a slide owns

`sds-slide` owns what a page has no equivalent for, and nothing else:

- **The frame.** 16:9. A margin of `--space-10` at the sides and
  `--space-8` at the top. The foot takes a step more. The display
  kinds keep `--space-12` at the top, as a title alone needs air. A
  title stands back by its first letter's bearing, so its ink lines up
  with the eyebrow and the lockup. Content between the tags stands in the body, the system's
  elements at the page's size.
- **The ground.** A deck stands on paper, and the slide that opens it stands
  on the terminal. That flip is the emphasis a deck has. So a deck needs no
  accent ground, and the one accent stays where the system keeps it.
  `ground` says which. It says `paper` unless told, whatever mode the
  page around it is in. A room watches a deck, and a room has no mode.
- **The kinds.** A `cover`, a `section` and a `closing` stand their
  title in the middle of the height their foot leaves. The cover and the
  closing hold the lockup
  down. `section` holds the deck's outline down, with its own entry
  marked. `statement` centres one sentence, two thirds of the frame wide. `content` keeps its title at
  the top margin, so it never hops between slides. Its body stands in the
  middle of the room under the title. `speaker` gives the
  name the left column and the portrait the right, edge to edge.
  `figure` shows a drawing or a screenshot. Its head is a content slide's,
  and its `layout` says where the picture stands. [Figures](#figures) has the
  layouts and the room each one gives.
- **The foot.** One row, `--space-8` off the bottom edge. The lockup the
  bar and the footer draw, and the count in the label register. A cover and
  a closing end on the lockup alone, one step up.
  **The foot never moves.** The lockup and the count keep one place on
  every kind and every layout. A reader who goes through the deck sees them
  hold still. A picture can run under one of them. Then it stands on a
  plate: the slide's ground with a hairline round it. The plate takes its
  room from the margin, so the text stays where it was.
  `plain` leaves the lockup out on a slide that needs the corner or no
  mark. The count stays where it stood, and so does the row.
- **The outline.** On a divider, the deck's sections in a row. The current
  one takes the page's ink and the accent rule under it, the active item of
  a bar.

The accent marks three things on a slide, as it marks three on a page. The
pipe in the lockup, the prompt in a code block, and the rule under the
current entry of the outline. Nothing floats. A plane separates with a
hairline, and the slide itself draws one. So a slide on a page, a deck's
overview or a story's stage, has an edge where its ground is the page's.

<a id="type-and-space"></a>

## Type and space

A slide has five type roles, and each is a step of the page's scale. The
frame draws them at twice their size.

| Role | Step | Where |
| --- | --- | --- |
| The title of a divider | `--font-size-display`, 58px | Cover, section, statement, closing, a speaker's name |
| The title of every other slide | `--font-size-h2`, 34px | Content and figure slides, and beside a picture. One step, so no title changes its size between slides |
| The lead | `--font-size-lead`, 19px | The sentence under a cover's title, a speaker's role |
| The body | `--font-size-lead`, 19px | What a content slide holds, as a whole: its cards, lists, tables and code. The text beside a picture. A figure, `sds-stat`, stands at the display step on its own |
| The count | `--font-size-body`, 16px | The count in the foot |
| The note | `--font-size-small`, 14px | A figure's finding, a caption, a statement's source |

The eyebrow and a label stand in the label register. A title on a slide
sets its lines a step closer than the page does. The display step takes
`--leading-solid`, and every other title `--leading-display`.

**One rhythm, from ink to ink.** Each line of the head ends at its ink:
the cap height above it, the baseline under it. So a gap is the same
distance whatever the size of the type.

- The eyebrow at `--space-8`, 32px, from the top. The head starts
  `--space-6`, 24px, under it.
- Between two lines of the head: `--space-2`, 8px. A title adds a third
  of its own size under it, so a large title stands further off.
- From the head to what the slide holds: `--space-6`, 24px.
- From what the slide holds to the foot: the foot's band, the same on
  every slide.

<a id="a-slide-on-a-page"></a>

## A slide on a page

A long document can carry a slide in each of its parts: what the part says,
in one frame. **The slide stands where its section puts it, as a picture.**
With `shrink` it takes the column's width where the column is narrower
than the frame, and never grows past its own size. The deck sets it on
every slide it runs through. Two slides in a row stand the flow's
step apart, like two figures.

A picture takes no press. Nothing in a slide on a page is a link, a control
or a stop for the keyboard. The part on the page is where those work. A
reader who hears the page still hears the text. A press anywhere on the
slide opens the deck at it, as a press on a picture opens the picture.

What a slide holds always fits it. Content taller than the room shrinks
until it fits. A picture keeps the width it had. Text keeps the room's
width and wraps anew, so it takes the largest scale where its height fits.
Nothing grows.
A summary that cuts off its own end has stopped being a summary.

<a id="the-deck"></a>

## The deck

`sds-deck` is the way through the slides, one frame at the window's size.
It has two ways in:

- **A deck of its own.** The slides stand between its tags. The page shows
  the cover and the press that plays the deck. That is a talk inside the
  text that reports on it.
- **The deck over a page.** It runs through the slides the page's sections
  hold, in page order. A long paper reads twice that way: in full, and as
  its summaries, clicked through.

The deck holds no copy of a slide. It lends each one the stage and puts it
back where it stood. So a slide has one set of markup, and the page after
the deck is the page before it.

**What every slide of a deck shares, the deck says once.** The lockup and
the count, and the outline a divider carries. A slide that says its own
keeps it. The count and the outline come from the order, so nobody keeps
either by hand.

**Every slide says where it stands.** Its eyebrow is the section it stands
in, as the outline numbers it: `02 · What it consists of`. The deck
writes it on each slide that says none. A reader who comes in late knows
the part of the talk at a glance. A cover and a divider say something
else, and a full figure shows no head.

**The eyebrow never moves.** It stands at the top of the frame, at the
margin the lockup keeps, on every slide. The head starts one band under
it. Where a picture runs under the eyebrow, it stands on a plate.

A reader goes on with the keys, with a drag or a swipe, or from the list
of every slide as a picture. On the full screen the head steps aside and a
press turns the slide. A turn pushes the old slide out and the next one
in. A reader who asks for reduced motion gets the next one at once. The PDF is the browser's print: a page per slide at the
frame's size, text as text.

<a id="the-layouts"></a>

## The layouts

Every layout is a live page under **Slides** in the sidebar, in the order
a deck runs, and a static screen the documentation embeds. A story opens on a stage, the slide fitted
to the window with air around it. The static file is its own viewport.

Under each picture stands the markup an author writes for it. It shows
the slide as a deck holds it: the deck says the lockup and the count
once. `make cards` writes it from the same story as the picture, so the
two never disagree.

<a id="the-frame"></a>

### The frame

[Cover · 1920x1080](../_cards/screens/slide-cover.html)

Cover, as a deck holds it

```html
<sds-slide kind="cover" ground="terminal">
  <span slot="eyebrow">Design system · 2026</span>
  <h2 slot="heading">One system, every surface</h2>
  <p slot="lead">Custom elements, tokens and the class layer they emit. For pages, for documentation, and for a deck.</p>
</sds-slide>
```

[Speaker · 1920x1080](../_cards/screens/slide-speaker.html)

Speaker, as a deck holds it

```html
<sds-slide kind="speaker">
  <span slot="eyebrow">01 · Why one system</span>
  <h2 slot="heading">Benjamin Kott</h2>
  <p slot="lead">Maintainer · Soul Design System</p>
  <p>Answers for the tokens, the elements and the gate that holds them together.</p>
  <sds-image slot="portrait" src="assets/portraits/benjamin-kott.png" alt="Benjamin Kott, drawn: cap, beard, hands in the pockets"></sds-image>
</sds-slide>
```

[Speakers · 1920x1080](../_cards/screens/slide-speakers.html)

Speakers, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">01 · Why one system</span>
  <h2 slot="heading">Who is speaking</h2>
  <sds-grid>
    <sds-surface plane="plain">
      <span slot="label">Speaker 01</span>
      <sds-byline name="Benjamin Kott" initials="BK" as="maintainer" meta="Soul Design System"></sds-byline>
      <p>Answers for the tokens, the elements and the gate that holds them together.</p>
    </sds-surface>
    <sds-surface plane="plain">
      <span slot="label">Speaker 02</span>
      <sds-byline name="Jonas Riis" initials="JR" as="lead integrator" meta="Nordlys Digital"></sds-byline>
      <p>Answers for the first project that shipped on it, and for what it lacked.</p>
    </sds-surface>
  </sds-grid>
</sds-slide>
```

[Section · 1920x1080](../_cards/screens/slide-section.html)

Section, as a deck holds it

```html
<sds-slide kind="section" sections="[&quot;Why one system&quot;,&quot;What it consists of&quot;,&quot;How to build a slide&quot;,&quot;Where to start&quot;]" current="1">
  <span slot="eyebrow">Section 02 of 04</span>
  <h2 slot="heading">What it consists of</h2>
</sds-slide>
```

[Statement · 1920x1080](../_cards/screens/slide-statement.html)

Statement, as a deck holds it

```html
<sds-slide kind="statement">
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">A shadow says a surface has left the page, and nothing else says it.</h2>
  <p slot="note">Non-negotiable · docs/design-system/index.rst</p>
</sds-slide>
```

[Closing · 1920x1080](../_cards/screens/slide-closing.html)

Closing, as a deck holds it

```html
<sds-slide kind="closing">
  <span slot="eyebrow">04 · Where to start</span>
  <h2 slot="heading">Start from a layout</h2>
  <p slot="lead">Open the one nearest the job and keep its shell. An element answers what one part looks like.</p>
</sds-slide>
```

<a id="the-content"></a>

### The content

[Cards · 1920x1080](../_cards/screens/slide-cards.html)

Cards, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">Three places for every component</h2>
  <sds-grid>
    <sds-surface>
      <span slot="label">Story</span>
      <span slot="heading">Every element has one</span>
      The source of every specimen card. Edit the story, never the card.
    </sds-surface>
    <sds-surface>
      <span slot="label">Specimen</span>
      <span slot="heading">Something draws every class</span>
      A card or an element draws each class, so a rule and its rendering cannot drift apart.
    </sds-surface>
    <sds-surface>
      <span slot="label">Rendered page</span>
      <span slot="heading">The Guides renderer made it</span>
      A page built on the system follows the layouts and invents no class.
    </sds-surface>
  </sds-grid>
</sds-slide>
```

[Columns · 1920x1080](../_cards/screens/slide-columns.html)

Columns, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">Three rules the system keeps</h2>
  <sds-grid variant="default" columns="3" data-sds-prop="0"></sds-grid>
</sds-slide>
```

[Flow · 1920x1080](../_cards/screens/slide-flow.html)

Flow, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">Truth runs story → card → page</h2>
  <sds-steps>
    <sds-step heading="The story">Under stories/. The one place somebody writes a specimen.</sds-step>
    <sds-step heading="The card">Under specimens/. A task generates it, and the next generate reverts an edit by hand.</sds-step>
    <sds-step heading="The page">Under docs/. It embeds the same card the design system photographs into its sections.</sds-step>
  </sds-steps>
</sds-slide>
```

[Code · 1920x1080](../_cards/screens/slide-code.html)

Code, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">Address a component, never rebuild one</h2>
  <sds-grid>
    <sds-code code-lang="html" source="&lt;sds-code code-lang=&quot;bash&quot;> &lt;code>make verify ARGS=classes&lt;/code> &lt;/sds-code>"></sds-code>
    <sds-surface plane="plain">
      <span slot="heading">The element first</span>
      The classes are the fallback for a surface with no JavaScript, not the front door. What a component says goes between its tags, each part in its region.
    </sds-surface>
  </sds-grid>
</sds-slide>
```

[Table · 1920x1080](../_cards/screens/slide-table.html)

Table, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">What the gate holds</h2>
  <sds-table>
    <table>
      <thead>
        <tr>
          <th>Check</th>
          <th>What it holds</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sds-td-name">classes</td>
          <td>every class in use has a definition in the layer that can load it</td>
        </tr>
        <tr>
          <td class="sds-td-name">values</td>
          <td>every figure beside a token is that token’s</td>
        </tr>
        <tr>
          <td class="sds-td-name">names</td>
          <td>every sds- name a document writes exists</td>
        </tr>
        <tr>
          <td class="sds-td-name">ssr</td>
          <td>every element renders outside a browser</td>
        </tr>
        <tr>
          <td class="sds-td-name">prose</td>
          <td>every text against ASD-STE100 and the terse rule</td>
        </tr>
      </tbody>
    </table>
  </sds-table>
</sds-slide>
```

[Matrix · 1920x1080](../_cards/screens/slide-matrix.html)

Matrix, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">Where each product edits what</h2>
  <p slot="note">Text in place is common. A preview link is not.</p>
  <sds-table>
    <table>
      <caption><sds-icon name="actions-check"></sds-icon>available <sds-icon name="actions-circle"></sds-icon>partly, see the notes <sds-icon name="actions-minus"></sds-icon>not available <sds-icon name="actions-question"></sds-icon>not documented</caption>
      <thead>
        <tr>
          <th>Product</th>
          <th class="sds-td-sign">Text in place</th>
          <th class="sds-td-sign">Media</th>
          <th class="sds-td-sign">Layout</th>
          <th class="sds-td-sign">Preview link</th>
          <th class="sds-td-sign">Undo</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sds-td-name">Product A</td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-circle" label="Partly"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-minus" label="No"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
        </tr>
        <tr>
          <td class="sds-td-name">Product B</td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-circle" label="Partly"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-question" label="Not known"></sds-icon></td>
        </tr>
        <tr>
          <td class="sds-td-name">Product C</td>
          <td class="sds-td-sign"><sds-icon name="actions-circle" label="Partly"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-minus" label="No"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-minus" label="No"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
        </tr>
        <tr>
          <td class="sds-td-name">Product D</td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-check" label="Yes"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-circle" label="Partly"></sds-icon></td>
          <td class="sds-td-sign"><sds-icon name="actions-minus" label="No"></sds-icon></td>
        </tr>
      </tbody>
    </table>
  </sds-table>
</sds-slide>
```

[Numbers · 1920x1080](../_cards/screens/slide-numbers.html)

Numbers, as a deck holds it

```html
<sds-slide>
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">The values the design rests on</h2>
  <sds-grid>
    <sds-stat value="16" unit="px" label="Floor" note="The floor for the signet and the icons."></sds-stat>
    <sds-stat value="4" unit="px" label="Radius" note="One radius for everything interactive."></sds-stat>
    <sds-stat value="1" unit="px" label="Hairline" note="Hairlines do the structural work."></sds-stat>
  </sds-grid>
</sds-slide>
```

[Quote · 1920x1080](../_cards/screens/slide-quote.html)

Quote, as a deck holds it

```html
<sds-slide kind="statement">
  <span slot="eyebrow">02 · What it consists of</span>
  <sds-quote body="Comments carry the reason, not the story. No changelog, no anecdote, and never the name of another project." by="AGENTS.md" as="what fails review"></sds-quote>
</sds-slide>
```

<a id="figures"></a>

## Figures

A figure slide shows a picture: a drawing, a screenshot, a matrix. The
picture stands in the `figure` region, `<sds-image slot="figure">` or a
drawing inline, and takes the room its layout leaves. `src` and `alt`
are the short form. **It grows or shrinks whole into that room.** A picture
scales as a picture does. Text
does not: what stands between the tags keeps its register, and only
shrinks when it does not fit.

The head and the foot stand where a content slide has them. Only the
picture takes more room: nearly the whole frame under `full`, and the
edges of the frame under `bleed`. Under `full` nobody sees the head,
and the lockup goes. The count stays at its place, on a plate.

A drawing in a row can carry a `caption`: what it shows, in a line or
two under it. The caption is text in the page's small register. It reads
at the size of every other small line and never shrinks with the picture.
With `framed` each drawing stands on a plane with a hairline, its caption
inside. That is for a sketch of an interface, which has no edge of its own.

| Layout | Room | Ratio | For |
| --- | --- | --- | --- |
| `wide` | 877 × 354 | 2.5 : 1 | A drawing under the head and its note. The default |
| `full` | 925 × 505 | 1.83 : 1 | A view that needs the whole frame: an interface, an architecture. Only the count shows, and the head stays for a reader who hears it |
| `row` × 2 | 422 × 317 | 1.33 : 1 | Two pictures side by side, each under its word, in `drawings`. The room is each one's |
| `row` × 3 | 238 × 244 | 1 : 1 | Three sketches side by side, each on its plane with its caption under it. `framed` draws the planes |
| `text-start` | 519 × 401 | 1.29 : 1 | A column of text at the start and the picture beside it. The text stands in the middle of the column under the title, a step larger |
| `bleed` | 559 × 538 | 1.04 : 1 | Beside the text, a screenshot that fills its column to the edges of the frame. It keeps its top left corner, and the rest runs over |

**The room is the format.** It is in the frame's own pixels, 960 × 540,
and the slide draws at twice that. The figures hold for a title of one
line. A note of one line under it takes 32 from the height, and so does a
second line of the title. A picture of that ratio fills
its room. A narrower one leaves the sides empty, and a flatter one the top
and the bottom.

<a id="regions"></a>

### Regions

What a slide shows goes between its tags, into named regions. What sets
it up stays an attribute: its kind, its layout, its ground, its count.

Every kind takes the lines of its head as regions: `eyebrow`,
`heading`, `lead` and `note`. A line in its region keeps its markup,
an `<em>` or a `<code>`, and wins over the attribute of its name. The
attribute stays as the short form for a line of plain text.

```html
<sds-slide kind="figure" layout="text-start">
  <span slot="eyebrow">02 · What it consists of</span>
  <h2 slot="heading">One key for <em>two</em> languages</h2>
  <p>The German call fills the slot.</p>
  <svg slot="figure" viewBox="0 0 877 354">…</svg>
</sds-slide>
```

| Layout | Regions |
| --- | --- |
| `content` | `text`, the one a child without a `slot` goes to |
| `figure`, `wide` and `full` | `figure` |
| `figure`, `row` | `figure`, once for each drawing |
| `figure`, `text-start` | `text` and `figure` |
| `speaker` | `text` and `portrait` |

The `figure` region takes any markup. **A drawing inline reads the
page's tokens and faces**, so it keeps the system's type and turns with the
mode. A drawing alone in the region fills the room as a picture does.
Other markup shrinks until it fits. `<figure slot="figure">` brings its
word as `data-label` and what it shows as its `<figcaption>`. A static
render takes the same through the `drawings` property, with `content`
in place of `src`.

**Take an element before you draw.** Most figures of a paper are one of a
few kinds, and the system has an element for each. Such a figure is markup
between the tags of the slide, in the system's type, and a reader can copy
its words:

| The figure | What it is on a slide |
| --- | --- |
| Things against criteria, a sign in every cell | `sds-table` with an `sds-icon` and its `label` in each cell, under `sds-td-sign`. The legend is the caption |
| Figures, each with its sentence | `sds-stat` in `sds-grid` |
| Boxes that each say a thing, in no order | `sds-card` or `sds-surface` in `sds-grid` |
| Three screens or sketches side by side | Three drawings in `row`, each drawn at its own room. Never one drawing with three panels in it |
| One screen, whole | One drawing under `full` |

Only what has lines between its parts is a drawing: a flow with branches,
an architecture, a sketch of an interface.

A drawing for a slide is its own file:

- **No head and no foot of its own.** The slide's title is its title. The
  note under it is optional, and says the finding where the drawing does
  not. A drawing for a page carries both, and on a slide says them twice.
  A fragment of the file cannot cut them off: an image shows the whole file.
- **No margin of its own.** The slide's margin is its margin, so it starts
  at the edge the title starts at.
- **Each part says what it is.** A drawing in parts gives each part a
  plane. Over what the part shows stand its heading and a line of context,
  and its consequence stands under it.
- **Drawn at its room,** in the frame's pixels: its canvas is the room in
  the table above, `viewBox="0 0 877 354"` for `wide`. A label at 13
  there is 13 in the frame and 26 on the room's screen. A canvas 1200 wide
  shrinks with the room. In a row of three, nobody in a room reads its
  labels.
- **One claim.** A drawing that needs more than its room has more than one
  claim, and is two slides.

[Figure · 1920x1080](../_cards/screens/slide-figure.html)

Figure, as a deck holds it

```html
<sds-slide kind="figure">
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">One key for two languages</h2>
  <sds-image slot="figure" src="assets/diagrams/slide-lookup.svg" alt="A German call writes the slot of a key. An English call for the same key reads it and answers in German."></sds-image>
</sds-slide>
```

[Figure, full · 1920x1080](../_cards/screens/slide-figure-full.html)

Figure, full, as a deck holds it

```html
<sds-slide kind="figure" layout="full">
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">A page of the manual</h2>
  <p slot="note">A view that needs the whole frame shows only the count.</p>
  <sds-image slot="figure" src="assets/screenshots/documentation.png" alt="A page of the manual at the width of a desk. The bar, the column of pages, the page and its contents."></sds-image>
</sds-slide>
```

[Figure, pair · 1920x1080](../_cards/screens/slide-figure-pair.html)

Figure, pair, as a deck holds it

```html
<sds-slide kind="figure" layout="row">
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">Now and before</h2>
  <figure slot="figure" data-label="Status">
    <sds-image src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
  </figure>
  <figure slot="figure" data-label="Source">
    <sds-image src="assets/screenshots/source-reads.png" alt="The page of the source docs.typo3.org at its lower half. An overview, then two folded rows under Earlier reads, then a note: this is a source, not a service."></sds-image>
  </figure>
</sds-slide>
```

[Figure, row · 1920x1080](../_cards/screens/slide-figure-row.html)

Figure, row, as a deck holds it

```html
<sds-slide kind="figure" layout="row" framed>
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">Three pages at hand</h2>
  <figure slot="figure" data-label="Search">
    <sds-image src="assets/screenshots/search-phone.png" alt="The search page on a phone. The results for label, the filters by kind, and the first hit."></sds-image>
    <figcaption>The filters count the hits, and the first one names where it comes from.</figcaption>
  </figure>
  <figure slot="figure" data-label="Glyph">
    <sds-image src="assets/screenshots/glyph-phone.png" alt="The page of the glyph actions-document-edit on a phone. Its name, what it means, and the versions it is in."></sds-image>
    <figcaption>The name at the top, and the versions that carry it under the sentence.</figcaption>
  </figure>
  <figure slot="figure" data-label="Checkout">
    <sds-image src="assets/screenshots/checkout-phone.png" alt="The page of the checkout 14.3-dev on a phone. The actions, and a warning that the build is two commits behind."></sds-image>
    <figcaption>The one thing to do next is the only orange button.</figcaption>
  </figure>
</sds-slide>
```

[Figure, slots · 1920x1080](../_cards/screens/slide-figure-slots.html)

Figure, slots, as a deck holds it

```html
<sds-slide kind="figure" layout="row" framed>
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">Navigation</h2>
  <figure slot="figure" data-label="Pages">
    <svg viewBox="0 0 320 220" role="img" aria-label="Pages open: Summer shop, Home, Offers, Contact">
      <rect x="1" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F4F2EE)" stroke="var(--text-primary, #1C1A17)"></rect>
      <text x="53" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #1C1A17)">Pages</text>
      <rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Structure</text>
      <rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Library</text>
      <rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="65" font-size="13" fill="var(--text-secondary, #4A453D)">Summer shop</text>
      <rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="99" font-size="13" fill="var(--text-secondary, #4A453D)">Home</text>
      <rect x="1" y="114" width="318" height="28" rx="4" fill="var(--surface-sunken, #F4F2EE)"></rect>
      <text x="14" y="133" font-size="13" fill="var(--text-secondary, #4A453D)">Offers</text>
      <rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="167" font-size="13" fill="var(--text-secondary, #4A453D)">Contact</text>
    </svg>
    <figcaption>A press opens the page in the visual view.</figcaption>
  </figure>
  <figure slot="figure" data-label="Structure">
    <svg viewBox="0 0 320 220" role="img" aria-label="Structure open: Hero, Grid, 2 columns, Text, Image">
      <rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Pages</text>
      <rect x="107" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F4F2EE)" stroke="var(--text-primary, #1C1A17)"></rect>
      <text x="159" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #1C1A17)">Structure</text>
      <rect x="213" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="265" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Library</text>
      <rect x="1" y="46" width="318" height="28" rx="4" fill="var(--surface-sunken, #F4F2EE)"></rect>
      <text x="14" y="65" font-size="13" fill="var(--text-secondary, #4A453D)">Hero</text>
      <rect x="1" y="80" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="99" font-size="13" fill="var(--text-secondary, #4A453D)">Grid, 2 columns</text>
      <rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="133" font-size="13" fill="var(--text-secondary, #4A453D)">Text</text>
      <rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="167" font-size="13" fill="var(--text-secondary, #4A453D)">Image</text>
    </svg>
    <figcaption>A choice here selects in the page, and back.</figcaption>
  </figure>
  <figure slot="figure" data-label="Library">
    <svg viewBox="0 0 320 220" role="img" aria-label="Library open: Text, Teaser, Contact, Offer block">
      <rect x="1" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="53" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Pages</text>
      <rect x="107" y="1" width="104" height="30" rx="4" fill="none" stroke="var(--border-subtle, #E3DFD6)"></rect>
      <text x="159" y="21" text-anchor="middle" font-size="13" font-weight="400" fill="var(--text-primary, #1C1A17)">Structure</text>
      <rect x="213" y="1" width="104" height="30" rx="4" fill="var(--surface-sunken, #F4F2EE)" stroke="var(--text-primary, #1C1A17)"></rect>
      <text x="265" y="21" text-anchor="middle" font-size="13" font-weight="600" fill="var(--text-primary, #1C1A17)">Library</text>
      <rect x="1" y="46" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="65" font-size="13" fill="var(--text-secondary, #4A453D)">Text</text>
      <rect x="1" y="80" width="318" height="28" rx="4" fill="var(--surface-sunken, #F4F2EE)"></rect>
      <text x="14" y="99" font-size="13" fill="var(--text-secondary, #4A453D)">Teaser</text>
      <rect x="1" y="114" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="133" font-size="13" fill="var(--text-secondary, #4A453D)">Contact</text>
      <rect x="1" y="148" width="318" height="28" rx="4" fill="none"></rect>
      <text x="14" y="167" font-size="13" fill="var(--text-secondary, #4A453D)">Offer block</text>
    </svg>
    <figcaption>A drag inserts at the selection.</figcaption>
  </figure>
</sds-slide>
```

[Figure, text · 1920x1080](../_cards/screens/slide-figure-text.html)

Figure, text, as a deck holds it

```html
<sds-slide kind="figure" layout="text-start">
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">Five sources</h2>
  <p>Each source needs a part of the machine before it answers.</p>
  <ul class="sds-list">
    <li>Bundled knowledge and the checkout need nothing.</li>
    <li>Packages need files on disk.</li>
    <li>The installation needs a booted site.</li>
  </ul>
  <sds-image slot="figure" src="assets/diagrams/slide-sources.svg" alt="Five sources against what the machine has to run. Bundled knowledge and the checkout need nothing. Packages need files on disk, the installation a booted site, the network outbound reach."></sds-image>
</sds-slide>
```

[Figure, bleed · 1920x1080](../_cards/screens/slide-figure-bleed.html)

Figure, bleed, as a deck holds it

```html
<sds-slide kind="figure" layout="text-start" bleed>
  <span slot="eyebrow">03 · How to build a slide</span>
  <h2 slot="heading">The status page</h2>
  <sds-facts>
    <dt>Row</dt>
    <dd>one source</dd>
    <dt>Badge</dt>
    <dd>what it does now</dd>
    <dt>Checked</dt>
    <dd>when it last answered</dd>
  </sds-facts>
  <sds-image slot="figure" src="assets/screenshots/status-sources.png" alt="The status page of dev-companion at the table of six sources. Each row names a source, its state as a badge, when it was last checked, and an Open button."></sds-image>
</sds-slide>
```

<a id="designing-one"></a>

## Designing one

Open the story nearest the slide you need and change its content. The
stage scales the frame to the window, so a laptop shows the whole slide.
`fit` on the element does that, and the static screen leaves it off. The
theme switch in the toolbar moves the stage and nothing on the slide: a
deck has its own ground.

What a slide needs is an element, never a value. A card that has to be
taller, a table that has to be denser, a code block that has to say more.
Each is a property of the element that draws it. Each is a gap in that
element if the property is not there. The page rule holds on a slide.
Nothing writes a size.

One thing scales: what a slide holds, when it does not fit. A slide is a
picture of a part, so it scales as a picture does, the whole of it at once
and never up. A font in a design is still its register. The shrink is the
slide's answer to more than a frame holds, and a slide that shrinks far
says the part needs a second slide.

<a id="a-deck-in-the-claude-app"></a>

## A deck in the Claude app

The Slides app builds a deck from the design system's README, and it writes
a closed format. Every style inline, every colour a hex, no class and no
`var()`. The README carries this page's rules in that language, the token
values written out beside the token names. So a deck from the app and a
deck from these layouts are the same design. `.design-sync/conventions.md`
is the source of that section, and `make design-sync` carries it across.

<a id="what-a-deck-needed"></a>

## What a deck needed

| The deck needed | The system grew |
| --- | --- |
| a frame at a room's size | `sds-slide`, which doubles the page rather than scales a font |
| a ground of its own | `ground` on the frame, paper unless said, the cover on the terminal |
| the deck's outline | `sections` and `current` on a divider: the bar's active item |
| the lockup at a slide's foot | nothing new. `lockup()` from the bar and the footer, one step up on a cover |
| a card, a table, a code block, a figure, a quote | nothing new |
| who speaks | `kind="speaker"` with `portrait`: the one column that runs to the edge. A speaker has a portrait, and it is the deck's own picture. The layout's follows the illustration prompt, a fixture under `assets/portraits/`. Two speakers are a `sds-byline` each on a plain plane |
| material from a page on a slide | `kind="figure"`: a content slide's head, and the picture grows into the room its `layout` leaves |
| a picture beside its text | `layout="text-start"`, and `bleed` for a screenshot to the edge |
| pictures read against each other | `layout="row"` with `drawings`, each under its word |
| sketches of an interface in a row | `framed`, and a `caption` under each drawing |
| the lockup and the count where the last slide had them | one place on every slide, and a plate where a picture runs under |
| a slide in a long document | `shrink`: the frame is a picture at the column's width, and `zoomable` opens it |
| a way through the slides | `sds-deck`, over the page or with slides of its own |
| the lockup and the count on every slide | said once on the deck, and a slide's own wins |