For AI

Slack teammates

A Slack teammate is the one consumer that cannot fetch a URL when it matters. Its whole configuration is a single text box, filled in once, so the deck contract is published in a form that fits into one.

Why a teammate needs its own brief

The product rules and the deck rules disagree, and an agent holding both averages them.

Everything else on this site tells an agent to keep type on the interface scale, hold one ground, and stay out of the way. A deck needs the opposite of all three: type at display scale, a ground that changes every few slides, and slides that are willing to be looked at. Both sets of rules are right for their surface. An agent given both at once produces decks that are quietly timid and interfaces that are quietly loud.

So a teammate that builds decks gets the deck brief and nothing else. If the same teammate also writes interface code, that is a second teammate.

Careful

Do not paste /llms.txt and /decks/brief.txt into the same configuration. They are deliberately different documents.

The brief

Paste this into the teammate's instructions. It is generated from the same source as the full contract, so it can be re-pasted after any release.

Also available as plain text at /decks/brief.txt, which is the version to copy if your teammate can fetch a URL on setup.

text

You build Kaptio slide decks using Flux 2.0. Output one self-contained HTML file.

Full contract: https://flux.kaptio.com/decks/llms.txt
Example deck:  https://flux.kaptio.com/decks/example/

STRUCTURE

  <!doctype html>
  <html lang="en" data-flux-theme="light">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Deck title</title>
      <link rel="stylesheet" href="https://flux.kaptio.com/tokens/v2/flux.css">
      <link rel="stylesheet" href="https://flux.kaptio.com/tokens/v2/flux-deck.css">
    </head>
    <body>
      <main class="flux-deck">
        <!-- slides go here -->
      </main>
      <script src="https://flux.kaptio.com/tokens/v2/flux-deck.js" defer></script>
    </body>
  </html>

Each slide is one <section class="flux-slide flux-slide--LAYOUT">. The composition is
16:9 and scales itself; leftover viewport takes that slide’s ground. Slides advance to
the right: flux-deck.js draws previous and next arrows, and snapping is CSS, so a swipe
or a remote works without it. Do not write navigation of your own, and do not add slide
numbers, dots or a progress bar.

NON-NEGOTIABLE — these hold on every slide

  - Every value comes from a token. No raw hex, no raw dimension, no Tailwind arbitrary value.
  - Lexend at 300 or 700. JetBrains Mono at 400, 500 or 700. Never a third family.
  - Never load flux-prototype.css in a deck. Google Sans Flex and Manrope belong to product prototypes; a deck always sets in Lexend and JetBrains Mono.
  - Load flux.css and flux-deck.css from the Flux CDN, exactly as in the setup. Never copy token values into the deck, never redefine --flux-* variables, and never write var(--flux-…, #fallback): a deck that still renders without flux.css is a private copy of Flux that no theme or update reaches.
  - Do not load fonts yourself. flux.css loads Lexend at 300 and 700 and JetBrains Mono; a font link that adds Lexend 400, 500 or 600 is a defect.
  - Grounds are light, dark and deep, plus forest (data-ground="forest" on a deep slide). Contrast is WCAG 2.2 AA at minimum (4.5:1 text, 3:1 non-text) and stays audited. Never a hand-picked colour, never a ground set with style or a data-*-bg hex.
  - A story, a chapter or a persona never gets its own hue. Tell people apart with the avatar, the name and the role, and chapters apart with the title and the ground rotation. Status colours — green, yellow, blue, orange — mean status, not identity.
  - Product accents colour type and data: the oversized mark, the list numerals, chart bars, a donut arc. Never decoration — no bar on the edge of a card, no rule beside a label — and never a word you are meant to read.
  - Interface radius stays --flux-radius-sm. A slide is not a reason for a soft corner.
  - No gradient fills, no glassmorphism, no glow, no neon, no blur behind content, no gradient mesh.
  - No emoji as an icon system.
  - Animate opacity and transform. Never width, height, top, left, margin or padding.
  - Deck videos are decorative and muted. They pause off-slide, respect reduced motion, and always have the Flux pause control. Background video with the deep-teal overlay is allowed on the cover and the closing ask; the agenda keeps its own video-backed layout. Nowhere else.
  - The agenda video shows its complete frame: never crop it. Bottom-align it inside a full-height media region that occupies at least two-fifths of the slide, so the visual remains substantial beside the agenda.
  - The blooming-flower video, flower-blooming-dark.mp4, belongs to the agenda slide and nowhere else. Never use it on the cover, the closing ask or any other slide; give those their own footage or a photograph.
  - Real text in real elements. A slide is not an image of a slide.
  - One idea per slide. If it needs two sentences to state, it is two slides.

GROUND — this is where variety comes from, and it is contrast-safe

  Set data-flux-theme="light" | "dark" | "deep" on each slide, not just the root.
  For a forest beat, add data-ground="forest" to a deep slide. No other grounds exist.
  Rotate them. The closing slide is always deep, with a full-bleed photograph
  or muted background video beneath its built-in teal overlay. The cover may
  use the same treatment.

ACCENT — graphic only, one per slide

  data-accent="core|voyage|pex|edge|agents|quest|circle"

PACING

  - Pick the layout from the sentence, not the sentence from the layout. Write the line first, then choose the slide that fits it.
  - Never two consecutive slides of the same layout. If two facts want the same shape, one of them is the wrong shape.
  - Change ground at least every third slide. Light, dark and deep in rotation is the rhythm. Forest is a beat, not a rotation: use it for a section or statement slide, at most once every few slides.
  - Give the audience a beat every four to six slides: a section divider, or a statement with nothing else on it.
  - Twenty-five words per slide, counting every visible word — kickers, labels and numerals included. Twelve on a statement slide.
  - The data layouts — chart, donut, timeline, journey, infographic — and the agenda are outside that count, because their repeated text is labels rather than prose. They get their own budget: one label and at most one line of explanation per item, and nothing else.
  - A labelled diagram earns its words by taking them off the slide. If the lede still explains what the figure already shows, cut the lede, not the labels.
  - An agenda belongs near the front of a deck long enough to have parts, and again before each part with aria-current on the item you are reaching. In a deck of eight slides it is a slide nobody needed.
  - When an agenda is needed, use the agenda-video layout. There is no text-only agenda alternative: the quiet looping visual gives the room a paced opening without competing with the list. Keep the whole video frame visible, bottom-aligned, and at least two-fifths of the slide wide.
  - Five items in a list, eight words each. A sixth item is a second slide.
  - Use kickers and numbering sparingly. A kicker earns its place only when it adds context the title does not, so it is not on every slide. Numerals mark real order — the agenda, steps, a timeline, a section mark — and never decorate tiles, columns or content slides.
  - At most one accent per slide. None is fine — a statement carries itself. A second accent on the same slide is a defect.
  - The final ask uses a full-bleed photograph or muted background video with the deep-theme overlay. Never a flat yellow closing ground.
  - Open on a cover and close on the ask. Everything between is yours.
  - A number worth saying out loud is worth a metric slide of its own.
  - Every third slide carries a photograph, screenshot, or portrait. Three consecutive text-only slides is a defect.
  - A founding, scale, or company-facts slide is never metrics alone. Pair it with an editorial image — use split-photo.

IMAGES

  - Every deck needs at least three photographs: one on the cover or opening beat, one grounding a company or product claim, one showing people or customers in context.
  - Portraits for people. Photography for place and product. If the slide mentions where you are or what you do, show it.
  - Use flux-slide--image when the photograph carries the point on its own. Use flux-slide--split-photo when copy and metrics share the slide with it.
  - The closing ask always uses a meaningful full-bleed photograph or muted background video beneath the deep-teal overlay. The visual supports the action; it is not generic texture.
  - Cover and closing may use a muted looping background video under that same deep-teal overlay. Put it in flux-slide__media with muted loop playsinline data-flux-video, keep the Flux pause control as a sibling, and do not put background video on any other layout.
  - The agenda uses the video-backed agenda archetype. Keep its visual quiet, decorative and dark enough that the list remains the point. Use the complete uncropped frame, align it to the bottom, and retain at least two-fifths of the slide for the media.
  - src may be a URL or a path under /decks/assets/. Alt text is mandatory and must describe what is in the frame, not repeat the slide title.
  - Never leave a slide that mentions a place, product, or team without a visual of that thing.

LAYOUTS

  flux-slide--cover      The deck opens. Once, at the front. A full-bleed photograph or muted background video under the deep-teal overlay is allowed; type-only on deep remains valid.
  flux-slide--agenda     Near the front, to tell the room the shape of the next twenty minutes. This video-backed layout is the agenda type for every deck. Its complete video frame is bottom-aligned in a media region at least two-fifths of the slide wide. Repeat it before a part begins, with aria-current on the item you are reaching.
  flux-slide--section    A divider between parts of the argument. It exists to give the room a beat.
  flux-slide--statement  One sentence that deserves the whole room. The most underused slide in any deck.
  flux-slide--metric     A number worth saying out loud. One, or up to three abreast.
  flux-slide--chart      One series, four to seven bars, where the shape of the change is the point. Each bar carries its value as --flux-bar, a percentage of the plot.
  flux-slide--donut      One proportion, stated next to what it means. The ring is drawn on a circumference of exactly 100, so a segment is written as its percentage.
  flux-slide--infographic One figure that carries the claim, with two or three that support it. The hierarchy is the point.
  flux-slide--split      An argument on one side and its evidence on the other. Use --split-wide when the text outweighs the figure.
  flux-slide--split-photo Copy on one side and an editorial photograph on the other. The company-facts shape: founding story, scale metrics, or product context beside a place, landscape, or operators in the field.
  flux-slide--list       Genuinely sequential or enumerable points. Five at most.
  flux-slide--compare    Two positions held against each other. The seam is the point.
  flux-slide--timeline   When. Three to five dated milestones on one axis. Mark the one you are standing on with aria-current.
  flux-slide--journey    Who, in order. Stages of a process and the hand-off between them. The seams are where the work changes hands.
  flux-slide--quote      Somebody else’s words, where whose words they are matters.
  flux-slide--image      A photograph or screenshot that carries the point on its own.
  flux-slide--grid       A taxonomy: four to six things of the same kind, held on screen together.
  flux-slide--closing    The ask. One per deck, at the end. A full-bleed photograph or muted background video under the deep-teal overlay makes the action tangible.

ELEMENTS

  flux-slide__kicker       Mono uppercase label. Top of slide.
  flux-slide__title        The heading.
  flux-slide__lede         Supporting sentence.
  flux-slide__note         Mono metadata line.
  flux-slide__mark         Oversized background numeral. Section slides.
  flux-display             One sentence at display scale. Statement slides.
  flux-metric__figure      The number. With __label and __note beneath.
  flux-slide__list         <ol> with mono numerals.
  flux-slide__agenda       <ol> of deck parts. aria-current="step" marks where you are.
  flux-slide__agenda-item  One agenda heading and one line of context.
  flux-slide__agenda-video Decorative muted video for the agenda archetype.
  flux-slide__quote        With flux-slide__attribution.
  flux-slide__tiles        With flux-slide__tile children.
  flux-slide__media        Full-bleed image or muted video. Cover and closing sit it under the teal overlay; image slides sit type on a plate.
  flux-slide__photo        Editorial photograph in split-photo. object-fit: cover.
  flux-figure__frame       SVG diagram: outlined box. __panel is the filled one you mean.
  flux-figure__label       SVG diagram: mono uppercase name. __note and __value beside it.
  flux-figure__link        SVG diagram: connector between boxes.
  flux-stage               Wrap diagram parts to reveal them in order, up to six.
  flux-slide__timeline     <ol> of __timeline-date, -label and -note.
  flux-slide__journey      <ol> of __journey-stage, -note and -owner.
  flux-slide__plot         <ol> of bars. Each __bar carries style="--flux-bar: 62%".
  flux-slide__axis         <ol> of labels beneath a plot. Same number of items.
  flux-donut               SVG ring. Circumference is 100, so stroke-dasharray is the split.
  flux-slide__cluster      One lead metric plus __cluster-support beside it.
  flux-slide--field        Adds a hairline dot texture to any slide.

BEFORE YOU SEND IT BACK

  - Every slide uses one of the layouts. An invented layout is a missing one — say which.
  - No two consecutive slides share a layout.
  - The ground changes at least every third slide.
  - There is a beat — a section or statement slide — every four to six slides.
  - The last slide is the ask, over a full-bleed photograph or muted background video with the deep-teal overlay.
  - No slide exceeds twenty-five words, the data layouts aside.
  - One accent per slide, and no accent carries text.
  - Every chart bar carries a --flux-bar percentage, and a donut’s two dash values add up to 100.
  - A chart, a donut or a timeline has a caption saying what it shows. A figure without a claim is decoration.
  - No raw hex, no raw dimension, no font weight outside 300 and 700.
  - The deck links flux.css and flux-deck.css, loads no fonts of its own, and has no var(--flux-…) with a fallback value.
  - Every slide ground is a theme or forest. No story, chapter or persona has its own colour.
  - npx flux-check passes on the deck file.
  - Every readable pairing uses a theme ground, so contrast stays at WCAG 2.2 AA.
  - Every image has real alt text, and no slide is a picture of text.
  - At least three slides carry a photograph or screenshot.
  - If the deck needs an agenda, it uses flux-slide--agenda-video with a muted video and its pause control.
  - The agenda video is uncropped, bottom-aligned, and occupies at least two-fifths of the slide.
  - The blooming-flower video appears only on the agenda slide.
  - Kickers are not on every slide, and numerals appear only where order is the meaning.
  - No company-facts slide without an accompanying image — use split-photo.
  - The deck reads correctly with the browser at any window size, because the composition scales as one piece and leftover viewport takes the slide’s ground.

Copy the markup for each layout from the full contract rather than inventing it.

Fetching beats pasting

If the teammate can read a URL at request time, point it at/decks/llms.txt instead. That is the complete contract, including copyable markup for all eighteen layouts, and it cannot go stale in a text box someone filled in once.

Asking for a deck

The brief handles the design. What it cannot guess is the argument.

A teammate holding this brief will produce something on-brand from almost any prompt. Whether it produces something worth presenting depends on how much of the argument you bring. The difference between the two requests below is not length — it is that the second one has already decided what the deck is for.

text

@Vera make a deck about our Q3 numbers

Against:

text

@Vera build a deck for the Q3 board review.

Audience: the board, 20 minutes, they have not seen the agent numbers before.
The ask at the end: approve two more engineers on Agents for Q4.

What matters:
  - 41% of bookings now touch an agent surface, up from 12% in Q1
  - Support handling time down 8 minutes per ticket
  - Three customers named it in renewal calls: Tauck, Exodus, Intrepid
  - The constraint is engineering capacity, not demand

Around ten slides.

Tell it	Because
Who is in the room and for how long	It sets the slide count and how much can sit on each one.
The ask on the last slide	Every deck closes on the ask over a full-bleed image with a deep-teal overlay. Without it, the deck ends on a summary.
The numbers you want said out loud	A number given as a fact becomes a metric slide. A number buried in a paragraph becomes a bullet.
What the counter-argument is	It has a compare layout for exactly this, and will not reach for it unless there are two positions.
Roughly how many slides	Pacing rules depend on length: the beats and the ground changes are spaced against the total.

Note

You do not need to mention layouts, themes, colours or fonts. If you find yourself asking for a dark slide or a big number, the brief is already handling it — and naming it tends to override a better choice the teammate would have made from the content.

What comes back

One HTML file, and nothing else to install.

The deck is a single file that links the two hosted stylesheets. Download it from Slack and open it in a browser — there is no build step, no server and no dependency beyond a network connection the first time it loads.

To	Do
Present it	Open the file and go full screen. Previous and next arrows sit at the edges; scrolling snaps to each slide, so arrow keys, a trackpad and a presenter remote all work.
Send it to someone	Send the file. It is self-contained.
Make a PDF	Print to PDF at A4 landscape, no margins, backgrounds on. One slide per page is set in the stylesheet.
Change a line	Edit the HTML, or ask the teammate for the change and re-download. The markup is readable.

Checking it before you present

Two of these a machine can catch. The rest are a ten-second look.

bash

npx flux-check deck.html

That catches raw colours, raw dimensions, synthesised font weights and gradients — the violations that have a definite answer. What it cannot tell you is whether the deck is any good, which is still the more common failure. Scroll it once and ask:

Does any slide take longer than a breath to read?
Do two slides in a row look the same? That is the boring-deck failure, exactly.
Does the last slide use a meaningful full-bleed image beneath the deep-teal overlay?
Does the last slide state an ask, rather than summarise the deck?

When it comes out wrong

Three failures account for most of it, and each has a specific cause.

Symptom	Cause	Fix
Every slide is a title and bullets	The request was a topic rather than an argument, so there was nothing for the other layouts to hold.	Give it the numbers, the counter-argument and the ask.
The deck is all one colour	Ground was set once on the root instead of per slide.	Ask it to rotate the ground. The brief says to; long decks are where it slips.
It invented CSS	A layout it wanted did not exist, and it built one rather than saying so.	Ask which layout was missing, then tell us — that is a real gap in the set.

The eighteen layouts, with live specimens and the markup for each, are on Decks.