Slides

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

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

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

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.

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.

The frame#

Cover · 1920x1080

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

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

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

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

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

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>

The content#

Cards · 1920x1080

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

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

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

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

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

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

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

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>

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.

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

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

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

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

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

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

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

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>

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

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