# Flux 2.3.0 — deck contract
For building Kaptio slide decks. This file is complete: the premise, the rules that
differ from product UI, the pacing, and the markup for every layout.
This is NOT the product contract. If you are building an interface, stop and read
https://flux.kaptio.com/llms.txt instead. The two disagree deliberately — a slide relaxes rules
that a dashboard cannot, and applying deck rules to product UI is a defect.
Reference: https://flux.kaptio.com/patterns/decks/
Example deck: https://flux.kaptio.com/decks/example/
PREMISE
=======
A slide is not a small web page. It is read in seconds, from the back of a
room, while somebody talks over it. The rules that keep a dense operational
interface legible — one ground, restrained colour, a bounded type scale, no
decoration — are the same rules that make a deck boring, because they are
tuned for a surface nobody is looking up at.
So the deck layer relaxes the rules that only make sense at desk distance, and
holds every rule that carries the brand. What loosens is scale, ground,
asymmetry and bleed. What never loosens is tokens, Lexend at two weights,
JetBrains Mono as the second voice, and contrast.
SETUP
=====
A deck is a standalone HTML document. Two stylesheets, one script, one wrapper, one
section per slide. Never load flux-deck.css into product UI: it derives the root font
size from the viewport so the canvas scales as one piece, and that must not reach an app.
Deck title
The composition is 80 x 45rem — 16:9, and 1280 x 720 at a 16px root. Leftover viewport
takes the current slide’s ground, so a dark slide is not framed by a light page.
Themes: set data-flux-theme="light" | "dark" | "deep" per slide, not just on the root.
Forest: add data-ground="forest" to a deep slide for a section or statement beat. No other grounds exist.
Slides advance to the RIGHT. flux-deck.js draws previous and next arrows, adds
click-to-advance (click the left quarter to go back) plus the arrow keys, space,
Page Up/Down and Home/End. Snapping is CSS, so a swipe, a trackpad and a presenter
remote work even if the script never loads — include it anyway. Do not write your own
navigation, and do not add slide numbers, dots or a progress bar: they are chrome the
room did not ask for.
WHAT LOOSENS
============
Each product rule, and what replaces it on a slide.
- Product: The type scale stops at --flux-text-6xl.
Deck: Decks add --flux-display-sm through --flux-display-xl. These are deck-only: a display size in product UI is a defect, not a bold heading.
- Product: A view has one ground.
Deck: Every slide sets its own data-flux-theme. A deep teal statement between two light slides is the cheapest visual event in the system, and contrast is already audited for all three themes. One extra ground exists for decks only: forest, set with data-ground="forest" on a deep slide.
- Product: Teal carries the system; other hues appear only when they carry meaning.
Deck: A slide may take any product accent with data-accent. On a slide the accent is identity rather than status, so it needs no meaning — but it stays graphic.
- Product: One yellow CTA element per view.
Deck: Yellow is not a slide ground. The closing ask uses a full-bleed photograph or muted background video under a deep-teal overlay.
- Product: No centred body copy.
Deck: Statement and quote slides centre. There is no body copy on them to centre.
- Product: No three-column grid of icon, heading and paragraph as a default layout.
Deck: The grid slide is exactly that, and it is right here — a taxonomy held on screen for twenty seconds is not a landing page.
- Product: Constrain reading columns to --flux-measure-prose.
Deck: Slides bleed to the edge. Images fill the canvas, and marks are cropped by it deliberately.
- Product: Never exceed --flux-duration-slow.
Deck: Content settles on arrival using a scroll-driven timeline, so it tracks the presenter rather than a clock. Still opacity and transform only.
- Product: No decorative marks, bars or dots.
Deck: A slide may carry one oversized typographic mark, or one hairline dot field. One. Two is decoration, and a coloured bar on the edge of anything is still banned.
WHAT HOLDS
==========
Unchanged from product UI. A slide is not an exemption.
- 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.
PACING
======
This is what makes a deck interesting, and it is not colour. A boring deck is almost
always a deck where every slide is the same shape.
- 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
======
Decks go dull when photography is treated as optional. These rules sit beside pacing.
- 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.
ACCENTS
=======
Set data-accent on a slide to choose its accent. It colours type and data: the oversized
mark, the list and agenda numerals, chart bars, a donut arc, a timeline date.
core voyage pex edge agents quest circle
It never draws decoration — no bar on the edge of a card, no rule beside a label. A product
accent has no guaranteed contrast, so it never carries a word. Colour behind text comes
from data-flux-theme. The closing slide uses deep over a full-bleed photograph or muted
background video, with the built-in teal overlay preserving contrast. The cover may use
the same treatment.
DIAGRAMS
========
Draw diagrams as inline SVG inside flux-slide__figure. Inline, never linked: a linked
image has to name its own colours and can only suit one theme.
Split it the way the deck layer expects. Appearance comes from classes, which carry the
roles; geometry stays in the markup as SVG attributes, because a viewBox is in user units
and a rem token resolves to the wrong size inside one.
Classes: flux-figure__frame outlined box
flux-figure__panel filled box — the part the slide is about
flux-figure__link connector
flux-figure__label mono uppercase name
flux-figure__note a few words of plain language
flux-figure__value a token name or other literal
Attributes: x y width height rx d viewBox stroke-width font-size stroke-dasharray
Never set fill or stroke on the