# Flux by Kaptio — Design System Reference for AI Assistants > Canonical source: https://flux.kaptio.com > This file provides structured context for AI tools (Kai, Cursor, Copilot, Claude, etc.) > to generate on-brand Kaptio output. Read this before producing any UI, slide, or prototype. --- ## What Flux is Flux is Kaptio's single design system. It defines every color, typeface, spacing unit, component, and interaction pattern used across Kaptio products and communications. All prototypes, slides, and UI generated for Kaptio must use Flux exclusively. ## What Flux is NOT - Flux is NOT Spotlight (spotlight.kaptio.com). Spotlight is a separate, older presentation platform with its own theme. Do not import, reference, or mix Spotlight styles, class names, or tokens into any Flux-based work. - Flux is NOT a generic Tailwind project. Although the Flux site uses Tailwind utilities internally, the design language is defined by Flux CSS custom properties (--flux-*). Never use raw Tailwind color names (e.g. blue-500, gray-100) as substitutes for Flux tokens. - Flux does NOT use Bootstrap, Material UI, or any third-party component library. - Flux does NOT use any colors, tokens, or components that are not published at https://flux.kaptio.com/foundations/tokens. --- ## Setup — import the tokens Non-Tailwind projects: put the canonical tokens on the first line of your global stylesheet. @import url("https://flux.kaptio.com/tokens/flux.css"); This defines every --flux-* custom property. Raw JSON: https://flux.kaptio.com/tokens/flux.json Tailwind v4 projects: ALSO import the enforcement layer AFTER Tailwind so Flux mechanically displaces Tailwind's defaults (gray-*, blue-*, rounded-*, text-*) instead of sitting on top of them. @import "tailwindcss"; @import url("https://flux.kaptio.com/tokens/flux.css"); @import url("https://flux.kaptio.com/tokens/flux-tailwind.css"); /* must come last */ It resets Tailwind's built-in color palette and remaps the common names onto Flux, so bg-gray-300 becomes a Flux grey, bg-blue-500 becomes Flux primary teal, rounded-lg uses the Flux radius, and text-xl uses the Flux type scale. Non-Tailwind projects do not need this file — use flux.css alone. --- ## Anti-leak hard rules (READ BEFORE WRITING ANY MARKUP) The flux-tailwind.css preset mechanically remaps every Tailwind color family, the radius scale, the type scale, spacing, shadows, font-family, the font-weight scale, and the default focus ring onto Flux tokens. But two things ALWAYS bypass a CSS preset and can only be enforced by you: arbitrary values and unloaded fonts. Follow these: - NEVER use arbitrary values for color, size, or radius. No bg-[#3b82f6], no text-[15px], no rounded-[10px], no p-[18px]. Arbitrary brackets escape the preset entirely and leak raw values. Use a Flux token (var(--flux-*)) or a Tailwind utility that the preset has remapped. - Raw Tailwind color names (bg-blue-500, text-slate-700, border-red-400) are remapped to Flux by the preset — but do NOT rely on them for a specific stock shade. Prefer Flux names directly: bg-flux-600, text-grey-500, or arbitrary-free var(--flux-*) utilities. - Load Lexend with weights 300 and 700 ONLY. Never use font-normal / font-medium / font-semibold: the preset collapses 100–500 to 300 and 600–900 to 700, so those classes render Light or Bold anyway. Body / default text = 300; headings = 700. - Focus rings are Flux primary teal, never blue. The preset sets the default ring color, but never write focus:ring-blue-* — use focus:ring-[var(--flux-primary-300)] when you set one explicitly. - Import order matters (Tailwind v4): @import "tailwindcss"; then flux.css; then flux-tailwind.css LAST. If flux-tailwind.css is not last, the Tailwind defaults win and leak. Self-check before finishing (run through every element you produced): 1. No raw hex / rgb anywhere (search your output for "#" and "rgb("). 2. No arbitrary-value brackets for color/size/radius (-[#...], -[16px], -[10px]). 3. Fonts are Lexend; only weights 300 and 700 are used. 4. Focus rings / focus states are Flux primary teal, not blue. 5. Colors, radii, spacing, shadows all trace to a --flux-* token or a preset-remapped utility. 6. Component markup is cloned from /components/source/.txt, not hand-invented. --- ## Composition discipline — don't impose generic AI patterns Tokens stop wrong colors/weights/radii, but they can't stop generic COMPOSITION HABITS. Reproduce Flux's restraint; do NOT apply default landing-page / marketing-site instincts to product UI. When unsure of a pattern, clone real markup from /components/source/.txt rather than inventing one. - Eyebrows / kickers (the #1 leak): the Flux eyebrow is ALWAYS text-xs font-bold tracking-widest uppercase in color --flux-grey-300 (muted grey) — the page/section label used across the site. The ONLY accepted variation is --flux-primary-400 (teal) for emphasis in specific contexts. NEVER invent a coral/salmon/red/amber/random accent eyebrow (e.g. an uppercase coral "GO-LIVES"), and don't sprinkle a kicker on every hero — use it sparingly: one kicker per section/slide, maximum, never an uppercase eyebrow on every card header. - No gradient text and no gradient-filled buttons. Headings are --flux-black (or white on dark); the primary button is a flat --flux-primary-600 fill. - No glow / large colored drop-shadows. Flux uses only the subtle teal-tinted shadow tokens (--flux-shadow-sm…xl); cap interactive cards at --flux-shadow-md. - No emoji in headings or as the icon system. Use real iconography. - No "pill-everything" / over-rounded corners. Use the Flux radius scale (--flux-radius-sm for buttons; rounded-full only for badges, avatars, pills). - No reflexive generic hero: centered headline + three identical icon feature cards, or a "trusted by" logo strip. Use documented Components/Patterns; the marketing layout is not the default app shell. - No arbitrary accent colors for section labels or badges — map every label/status to a Flux token. --- ## Brand colors (use token names in code; hex values are for reference) Primary (Teal — dominant brand color): --flux-primary-800: #032E36 (deep surface, slide backgrounds) --flux-primary-600: #034955 (Kaptio Seagreen — official primary) --flux-primary-500: #056271 (interactive, region banners) --flux-primary-400: #056F82 (links, focus states) --flux-primary-300: #69A9B4 (secondary teal text) --flux-primary-100: #E6F1F2 (teal tint backgrounds) CTA Yellow (Bumble-Me Yellow — call to action, key highlights only): --flux-yellow-400: #FFBC42 Pink / Magenta (Fandango Pink — accent, "The Dot", Edge product): --flux-pink-400: #DE37A4 Supporting colors (use sparingly, contextually): --flux-orange-400: #FF6F59 (Puffin Beak Orange) --flux-green-400: #2BA711 (Poison Green) --flux-blue-400: #4285FF --flux-purple-400: #6F59FF Neutrals: --flux-black: #212121 (body text, headings) --flux-grey-700: #374151 --flux-grey-500: #6B7280 --flux-grey-300: #878787 --flux-grey-100: #EBEBEB (borders) --flux-background: #F9FAF8 (page background) --flux-white: #FFFFFF Semantic: --flux-success: #10B981 --flux-error: #C1121F --flux-warning: #F59E0B --flux-info: #056F82 --- ## Typography Primary font: Lexend (sans-serif) Weights: 300 (Light) and 700 (Bold) ONLY — these are the only weights loaded (family=Lexend:wght@300;700). Body / paragraph / default text = Light (300); headings = Bold (700). Weights 400 (Regular) and 500 (Medium) are NOT loaded — never use them (nor 600). The base rule is html { font-weight: 300 }. Root font-size is FLUID — not a fixed 16px: html { font-size: clamp(16px, 0.875rem + 0.4vw, 19px) } Every rem-based size scales from this 16–19px root (larger on wide screens), NOT from a fixed 16px. Reproduce this clamp or all rem text renders too small. Monospace font: JetBrains Mono Use only for code, tokens, and technical content. Text color: always --flux-black (#212121) on light backgrounds. Do NOT use colorful text for headings unless a specific documented exception applies. Type scale tokens: --flux-text-xs: 0.75rem --flux-text-sm: 0.875rem --flux-text-base: 1rem --flux-text-lg: 1.125rem --flux-text-xl: 1.25rem --flux-text-2xl: 1.5rem --flux-text-3xl: 1.875rem --flux-text-4xl: 2.25rem --flux-text-5xl: 3rem --- ## Spacing (4px base grid) --flux-space-1: 0.25rem --flux-space-2: 0.5rem --flux-space-3: 0.75rem --flux-space-4: 1rem --flux-space-5: 1.25rem --flux-space-6: 1.5rem --flux-space-8: 2rem --flux-space-10: 2.5rem --flux-space-12: 3rem --flux-space-16: 4rem --- ## Border radius --flux-radius-sm: 0.25rem --flux-radius-md: 0.5rem --flux-radius-lg: 0.75rem --flux-radius-xl: 1rem --flux-radius-2xl: 1.5rem --flux-radius-full: 9999px --- ## Shadows --flux-shadow-sm: 0 1px 2px 0 rgba(3,46,54,0.05) --flux-shadow-md: 0 4px 6px -1px rgba(3,46,54,0.07), 0 2px 4px -2px rgba(3,46,54,0.05) --flux-shadow-lg: 0 10px 15px -3px rgba(3,46,54,0.08), 0 4px 6px -4px rgba(3,46,54,0.04) --- ## Tables Reference: https://flux.kaptio.com/components/table (badges: https://flux.kaptio.com/components/badge) Tables are quiet: horizontal row dividers only, no full gridlines, no vertical borders. - Wrapper: a standard Flux surface — bg --flux-surface, 1px --flux-grey-100 border, rounded. The table itself is full-width, text-align left, small text (--flux-text-sm). - Header cells (th): uppercase, small (--flux-text-xs), bold (700), letter-spaced, color --flux-grey-300, with a bottom border --flux-grey-100. Left-aligned by default. - Body cells (td): color --flux-black, vertical padding ~0.75rem (--flux-space-3), bottom border --flux-grey-100 acting as the row divider. - Last row: NO bottom divider (drop the border on the final row). - Numeric / price / quantity columns: right-aligned, with font-variant-numeric: tabular-nums so figures line up. Their header cells are right-aligned too. - Reference / code columns (e.g. booking refs): Lexend Light (300), small. - Status cells: use the Flux Badge — a pill (rounded-full), small (--flux-text-xs), bold (700). Do NOT pick arbitrary status colors; use the badge color semantics: confirmed / completed → green pending / action required / on request → amber/yellow awaiting supplier → blue cancelled / rejected / expired → red - Optional striped rows: tint alternate rows with --flux-background. Keep dividers; no zebra borders. Do NOT: add heavy gridlines or a border on every cell; use vertical column borders; or invent per-status colors. Dividers are horizontal-only via --flux-grey-100, status uses badge tokens. --- ## Forms & inputs Reference: /components/input, /components/select, /components/checkbox, /components/radio, /components/switch, /components/textarea. This is the #1 place generic Tailwind leaks. The focus state is ALWAYS Flux primary teal, NEVER Tailwind's default blue ring. Keep one field height and one radius across a whole form. Text field / textarea (canonical, from InputDemo / TextareaDemo): w-full px-3 py-2 rounded border border-[var(--flux-grey-200)] bg-[var(--flux-surface)] text-sm text-[var(--flux-black)] focus:border-[var(--flux-primary-400)] focus:ring-1 focus:ring-[var(--flux-primary-300)] outline-none transition-colors Textarea adds: min-h-[100px] resize-y (vertical only). Optional char count is --flux-text-xs, --flux-black, right-aligned. - Label: block text-sm font-medium text-[var(--flux-black)] mb-1, placed above the field. Required indicator: append an --flux-error asterisk if you use one. - Placeholder: --flux-grey-300. Never use the placeholder as the only label. - Focus: border --flux-primary-400 + ring --flux-primary-300 (ring-1). Never focus:ring-blue-*. - Disabled: opacity-50 cursor-not-allowed bg-[var(--flux-grey-50)]. - Error / invalid: border --flux-error and focus ring --flux-error; helper/error text below the field is --flux-text-xs in --flux-error. - Helper / hint text: --flux-text-xs, --flux-black (or --flux-error for errors). Select / dropdown (SelectDemo) — trigger matches the text field exactly: - Same px-3 py-2, rounded, border --flux-grey-200, bg --flux-surface, text-sm. Hover border --flux-grey-300. Open: border --flux-primary-400 + ring-1 --flux-primary-300. - Chevron: w-4 h-4, --flux-grey-500, rotate-180 when open. - Option list: absolute, rounded, border --flux-grey-200, bg --flux-surface, --flux-shadow-lg. Selected option: bg --flux-primary-50, text --flux-primary-800, check icon --flux-primary-500. Hover option: bg --flux-grey-50. - Multi-select (MultiSelectDemo): same trigger; collapses to "N items selected"; option rows expose a bold --flux-primary-400 action label (e.g. "Select Only") on hover/focus; keyboard nav is ↑↓ rows, ←→ checkbox/action, Enter/Space toggle, Esc close. Checkbox / radio / switch — checked/active color is ALWAYS Flux primary: - Checkbox (CheckboxDemo): 18×18, rounded; checked bg + border --flux-primary-400 with a white check; unchecked border --flux-grey-200 on --flux-surface. Label gap 2.5 (gap-2.5), text-sm. - Radio (RadioDemo): 18×18, rounded-full; selected border-2 --flux-primary-400 with an inner --flux-primary-400 dot; unselected border --flux-grey-200. Same gap-2.5 label. - Switch (SwitchDemo): track rounded-full — on bg --flux-primary-400, off bg --flux-grey-200; white thumb with --flux-shadow-md; default track w-11 h-6, transition-colors 200ms. - Date-picker trigger (DatePickerDemo): input-with-icon — calendar icon + chevron in --flux-grey-300, --flux-radius-md, open border --flux-primary-400 with a --flux-primary-100 focus ring. Do NOT: use border-gray-*/border-slate-* or focus:ring-blue-* defaults; use placeholder text as the label; mix field heights or radii within one form; or use a non-primary color for checked/active/focus states. --- ## Components One source of truth lives at https://flux.kaptio.com/components/. Use only --flux-* tokens below; never a raw Tailwind color. The focus/active/selected color is always Flux primary teal. Buttons (/components/button): - Lexend Bold, radius --flux-radius-sm (4px), focus ring --flux-primary-300 (ring-2). Never a blue ring. - Variants: primary = bg --flux-primary-600 (hover -500, active -700, white text); secondary = bg --flux-grey-100 (hover -200, --flux-black text); outline = border + text --flux-primary-600, hover bg --flux-primary-50; ghost = transparent, text --flux-primary-600, hover bg --flux-primary-50; danger = bg --flux-error, white text, hover opacity-90. - Sizes: sm text-xs px-3 py-1.5 · md text-sm px-4 py-2 · lg text-base px-6 py-2.5. - Disabled opacity-50 cursor-not-allowed; loading keeps label + inline spinner. Compact inline buttons (card/modal footers, toolbars) may use the lighter --flux-primary-400 fill — still Flux primary. Badge (/components/badge): - Pill: rounded-full, --flux-text-xs, bold, px-2.5 py-0.5. Solid status tints use dark text on a tint token: confirmed/completed = --flux-green-200, pending/action required/on request = --flux-yellow-300, awaiting supplier = --flux-blue-200, cancelled/rejected = --flux-orange-300. - Outline variant: transparent bg, border + text in the color token. Neutral: bg --flux-primary-100, text --flux-primary-400. Same status semantics as tables. Do NOT invent per-status hexes. Card (/components/card): - rounded, border --flux-grey-100, bg --flux-surface, p-5. Header/footer dividers border --flux-grey-100. - Interactive: hover:border --flux-primary-300 + --flux-shadow-md. Muted: bg --flux-grey-50 opacity-60. - Do NOT add single-edge accent bars, heading dots, or stacked shadows/glows. Modal (/components/modal): - Backdrop fixed inset-0 bg-black/50 z-50, centered. Dialog: bg --flux-surface, rounded, --flux-shadow-xl, max-w-md. Header/footer border --flux-grey-100; footer = ghost Cancel + primary Confirm, justify-end gap-3. Close X --flux-grey-300 → --flux-black on hover. Do NOT tint the backdrop or border the dialog. Tooltip (/components/tooltip): - Dark bubble: bg --flux-primary-800, white text, --flux-text-xs, px-2.5 py-1.5, rounded, --flux-shadow-lg. Arrow matches the bubble. Positions top/right/bottom/left. Appears on hover. Note (/components/note): - rounded p-4; tint bg + matching semantic icon stroke; body text stays --flux-black. info = bg --flux-primary-100 (icon --flux-info); success = bg --flux-green-100 (--flux-success); warning = bg --flux-yellow-100 (--flux-warning); error = bg --flux-orange-100 (--flux-error). Progress / Spinner / Skeleton (/components/progress, /spinner, /skeleton): - Progress: track bg --flux-grey-100 rounded-full, fill bg --flux-primary-400. Sizes h-1/h-2/h-3. - Spinner: track --flux-grey-200, arc --flux-primary-400, animate-spin. Sizes 16/24/40. - Skeleton: shimmer --flux-grey-100 → --flux-grey-50 → --flux-grey-100, 1.5s loop. Tabs / Accordion (/components/tabs, /components/accordion): - Tabs: bar border-b --flux-grey-100; tab px-4 py-2.5 text-sm bold; active = text + 2px underline --flux-primary-400; inactive = --flux-grey-300, hover --flux-black. - Accordion: items split by a single --flux-grey-100 bottom divider (none on last); bold --flux-heading title; chevron --flux-grey-300 rotates 180 open; disabled item opacity-40. Single, exclusive, or multi modes. Avatar (/components/avatar): - Always rounded-full. Initials: bg --flux-primary-100, text --flux-primary-400, bold. Sizes sm w-8 h-8 / md w-10 h-10 / lg w-14 h-14. Status dot --flux-success ring-2 ring-white. Group: overlap -ml-2, ring-2 ring --flux-surface. Date Picker (/components/date-picker): - Trigger follows the field convention: border --flux-grey-200, --flux-radius-md; open border --flux-primary-400 + --flux-primary-100 focus ring; calendar icon + chevron --flux-grey-300. - Popover: bg --flux-surface, border --flux-grey-100, --flux-radius-lg, --flux-shadow-lg. - Day cells: selected/range ends bg --flux-primary-400 white (rounded-full); in-range bg --flux-primary-100; today text --flux-primary-400 with --flux-primary-200 ring; focus ring --flux-primary-300. Hero / Journey / Code Block (/components/hero, /journey, /code-block): - Hero: dark ground --flux-primary-800 (or photo + teal overlay); eyebrow/subtitle --flux-yellow-400, headline white, body white ~85%. Light variant = --flux-background + --flux-black heading. Do NOT use the marketing hero layout as a default product app shell. - Journey: horizontal steps, rounded (--flux-radius-sm) icon tiles in a brand/product accent, --flux-grey-200 arrows; detail opens in a Modal. - Code Block: dark ground --flux-primary-800, code text --flux-primary-100, JetBrains Mono; inline code = bg --flux-primary-100, text --flux-primary-400. Outcome patterns (/components/outcome-header, /flow-entry, /outcome-complete): - Share the --flux-flow-* tokens. Outcome Header: bar of --flux-flow-header-height on --flux-flow-header-bg with --flux-flow-header-border; bold --flux-heading label; --flux-grey-500 → --flux-primary-400 return action; optional 2px top accent bar in a product color (the only sanctioned single-edge accent). - Flow Entry: arriving state — Skeleton placeholders, an --flux-orange-100/400 error block with retry, and an --flux-green-100/400 resolved tick fading in over --flux-flow-entry-duration. - Outcome Complete: centered --flux-green-100 tick, bold achievement, primary return button (optional --flux-flow-return-countdown auto-return), outline next-step buttons. --- ## Slide design rules - Slide backgrounds: use --flux-primary-800 (#032E36) or a photographic landscape image with a teal overlay. Do NOT use white, light grey, or arbitrary dark colors as backgrounds. - Title text on dark slides: white (#FFFFFF), Lexend Bold — the ENTIRE headline. Never color headline words --flux-yellow-400 (or any accent); the whole headline stays white. - Subtitle / eyebrow on dark slides may use --flux-yellow-400 (#FFBC42), Lexend Light — but only as the single yellow accent (see the accent rule below), not for general supporting text. - Body / supporting / emphasis text on dark slides: white (or --flux-primary-100), Lexend Light — never yellow. Do NOT use --flux-yellow-400 to highlight bullet lead-ins or running text. - Accent color for highlights and CTAs: --flux-yellow-400 only — and use it ONCE per slide (a single eyebrow/subtitle OR a CTA). It is a rare accent, NOT an emphasis color for headline words, bullet lead-ins, or body text. - One kicker / eyebrow per slide, maximum. Do NOT repeat an uppercase eyebrow on every card header or sprinkle multiple kickers across a single slide — use them sparingly. - Do NOT use left-edge colored borders (strokes) on cards or panels as decoration. - Do NOT use colored heading text; headings are white (dark slides) or --flux-black (light slides). - Region / section banners: --flux-primary-500 (#056271), white bold text, wide letter-spacing. - Markers on maps: --flux-yellow-400 (#FFBC42) solid dot with matching ring. --- ## Building slide decks 1. Import the Flux tokens first (see Setup above): flux.css on line one of the global stylesheet, plus flux-tailwind.css LAST for Tailwind v4 projects. 2. NEVER free-compose a slide. For each slide, identify the content type below and CLONE the matching template, then swap only copy, images, and data. Free composition is how off-brand output happens. Routing table — fetch the raw .astro template source from the Source URL: Slide content Template Source Deck opener / title slide Cover https://flux.kaptio.com/slide-examples/source/cover.txt Section break / chapter divider Chapter https://flux.kaptio.com/slide-examples/source/chapter.txt One big idea / thesis / focus Statement https://flux.kaptio.com/slide-examples/source/statement.txt Explainer with supporting visual Content https://flux.kaptio.com/slide-examples/source/content.txt Customer / partner introduction Customer intro https://flux.kaptio.com/slide-examples/source/customer.txt Product status / progress / roadmap state Status grid https://flux.kaptio.com/slide-examples/source/status-grid.txt Before vs after / us vs them / two options Compare https://flux.kaptio.com/slide-examples/source/compare.txt Agenda / what we'll cover Agenda https://flux.kaptio.com/slide-examples/source/agenda.txt Single big number / KPI Big stat https://flux.kaptio.com/slide-examples/source/stat.txt Quote / testimonial Quote https://flux.kaptio.com/slide-examples/source/quote.txt Closing / thank-you / CTA Closing https://flux.kaptio.com/slide-examples/source/closing.txt Feature section opener (screenshots) Recap intro https://flux.kaptio.com/slide-examples/source/recap.txt Feature explainer (what/value) Feature detail https://flux.kaptio.com/slide-examples/source/feature.txt Feature with impact + product fit Feature impact https://flux.kaptio.com/slide-examples/source/feature-impact.txt Customer intro with location map Customer map https://flux.kaptio.com/slide-examples/source/customer-map.txt Two categorized lists / taxonomy Lists https://flux.kaptio.com/slide-examples/source/lists.txt Platform / product positioning panel Platform https://flux.kaptio.com/slide-examples/source/platform.txt Forward roadmap / timeline / horizons Roadmap https://flux.kaptio.com/slide-examples/source/roadmap.txt Customer logo strip / social proof Logo strip https://flux.kaptio.com/slide-examples/source/logos.txt Team / leadership Team https://flux.kaptio.com/slide-examples/source/team.txt Process / how it works / journey steps Journey https://flux.kaptio.com/slide-examples/source/journey.txt Q&A before close Q&A https://flux.kaptio.com/slide-examples/source/qa.txt Implementation / onboarding phases Implementation https://flux.kaptio.com/slide-examples/source/implementation.txt Security / trust / compliance Security https://flux.kaptio.com/slide-examples/source/security.txt Competitive feature matrix Matrix https://flux.kaptio.com/slide-examples/source/matrix.txt Growth chart / trend line Chart https://flux.kaptio.com/slide-examples/source/chart.txt Global footprint / regions Global presence https://flux.kaptio.com/slide-examples/source/global.txt Live previews: https://flux.kaptio.com/slide-examples Fallback: if no template matches the content, use the NEAREST template's structure plus the Slide design rules above — do NOT invent a new layout. Self-check for every slide (consistent with the Slide design rules above): 1. Headline on dark grounds is entirely white — never yellow/colored headline words. 2. --flux-yellow-400 appears at most ONCE per slide, as a single small accent (e.g. the cover date eyebrow) or a CTA. 3. One kicker / eyebrow per slide, maximum. 4. Lexend weights 300 and 700 only. 5. Only --flux-* tokens — no raw hex/rgb, no arbitrary values. 6. Content slides are light; cover and chapter slides are dark. 7. At most one emoji per slide (the optional Statement accent) — never in headings or as the icon system. 8. No gradient text, no glow shadows, no coral/arbitrary accent eyebrows. --- ## Common do-nots (full list: https://flux.kaptio.com/donts) - Do NOT use Spotlight theme styles, class names, or color values. - Do NOT invent token names not in this file or at /foundations/tokens. - Do NOT use one-off hex values for brand UI. - Do NOT add decorative single-edge colored borders on cards. - Do NOT color headline words or emphasis/body text --flux-yellow-400 on dark slides — the whole headline is white and body/emphasis text is white or --flux-primary-100; yellow is a single eyebrow/subtitle or CTA accent only. - Do NOT repeat an uppercase eyebrow on every card header or use multiple kickers per slide — one kicker per section, used sparingly. - Do NOT use dot/circle decorators beside headings inside cards. - Do NOT use arbitrary corner radii or spacing values outside the scale above. - Do NOT use font weights other than 300 and 700 for Lexend. - Do NOT use Tailwind color names (blue-500, gray-100, etc.) as design decisions. - Do NOT mix Flux with any other design system (Bootstrap, MUI, Spotlight, etc.). - Do NOT assume a product's accent color applies globally — product colors are scoped per product. - Do NOT invent button variants beyond primary, secondary, outline, ghost, and danger. - Do NOT maintain two status palettes — tables and badges share the same status colors. - Do NOT show a raw spinner with no context for an arriving state — use Flow Entry skeletons (reserve --flux-orange-* error / --flux-green-* resolved for those states). - Do NOT invent new section types, hero variants, or navigation models that aren't documented under Components or Patterns. --- ## Key pages for more detail - Colors and palette: https://flux.kaptio.com/foundations/colors - Typography: https://flux.kaptio.com/foundations/typography - Spacing: https://flux.kaptio.com/foundations/spacing - Shadows: https://flux.kaptio.com/foundations/shadows - Full token list: https://flux.kaptio.com/foundations/tokens - Components: https://flux.kaptio.com/components - Don'ts: https://flux.kaptio.com/donts - Slide examples: https://flux.kaptio.com/slide-examples --- ## For AI tools generating slides or prototypes 1. Always load this file as your first context step. 2. Use only the tokens and values listed here. If a value is not here, it is not in Flux. 3. If asked to use Spotlight, decline and redirect to Flux. 4. If in doubt about a color or style, check https://flux.kaptio.com/foundations/tokens. 5. The canonical Flux CSS file is importable at: https://flux.kaptio.com/tokens/flux.css (if public CSS is needed for reference). Tailwind v4 projects also import https://flux.kaptio.com/tokens/flux-tailwind.css after "@import "tailwindcss";" to reset generic Tailwind defaults onto Flux (see Setup above).