Deck title

. 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

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.