# Cue by Fountain — Design System A marketing design system for Cue, Fountain's frontline-operations AI. 60 page sections, a token set, a brand system and a set of document templates, all as plain HTML and CSS with no build step and no framework. Site: https://fountain-design-system.replit.app/ Tokens (JSON): https://fountain-design-system.replit.app/agents/tokens.json Components (JSON): https://fountain-design-system.replit.app/agents/components.json Stylesheets: https://fountain-design-system.replit.app/css/tokens.css, /css/base.css, /css/sections.css, /css/slides.css, /css/pages.css ## How to build with this system - Every colour, size, space, radius, gradient and shadow is a CSS custom property in css/tokens.css. Use var(--token). Never hard-code a hex that a token covers. - Sections are authored at 1440px wide, the width of the Figma frame. To place one on a page or a slide, wrap it in .sheet + .sheet__frame from css/pages.css; the wrapper scales the artboard. Do not re-lay-out a section for a new canvas. - Shared primitives live in css/base.css and are prefixed .fx-: .fx-section, .fx-container, .fx-h1 to .fx-h6, .fx-p-xl to .fx-p-s, .fx-btn, .fx-card, .fx-grid, .fx-slot, .fx-eyebrow, .fx-orb, .fx-pill, .fx-knockout. Extend these with a modifier; never redefine them. - Each section's own classes are namespaced to its slug (.fx-comparison__row). Keep that convention or sections will collide when stacked. - Images sit in .fx-slot, a fixed-size box. A photograph fills it (object-fit: cover); a logo, badge or wordmark is letterboxed inside it (contain). Cropping a mark is always wrong. - The Cue mark is a glass sphere on transparent alpha. It never gets a background, never a border-radius of its own, and always carries its bloom halo. Use .fx-orb with assets/brand/cue-orb.png. If a parent's overflow would clip the halo, give the parent room rather than shrinking the mark. - Headings carry negative tracking: -0.03em at the display sizes, -0.02em at H3 and H4. Body copy is untracked. - The brand typeface is CircularXX. This build substitutes Plus Jakarta Sans, self-hosted in assets/fonts. Jakarta sets about 2% wider, so a line that fits in Figma may wrap here. - Copy voice: short declarative sentences. State what the system did, not what it could do. The campaign formula is a problem line, a resolution line, then the two words "Run it." ## Where to look, and in what order Read this before fetching anything else. The system is five surfaces of very different weight, and reading them in the wrong order is the main way an agent burns its context here. Each surface is a separate URL — fetch only what the job needs, and stop as soon as you have enough. - START HERE, ALWAYS: this file. It carries the rules, the full token set, the component index and the link map. Most jobs never need to fetch a second URL. Never crawl the rendered .html pages: they are views for people and cost one to two orders of magnitude more context than the flat files for the same facts. - A WEB PAGE OR LANDING PAGE → components first. agents/components.json, then the section URLs it lists for the blocks you picked. Add agents/tokens.json only if you are writing new CSS rather than composing existing blocks. Almost never needs anything else: the sections already carry their own artwork. - A ONE-PAGER, DECK, BANNER, EMAIL OR SOCIAL CARD → collaterals. These are finished formats, not parts. The recipes and the sheet sizes are in this file under Composition; the deck archetypes are in components.json under "slides". Compose from sections, wrap in a sheet. - A COLOUR, TYPE, SPACING OR LOGO QUESTION → brand. agents/tokens.json answers it. The rendered brand.html adds rationale a human wants and an agent does not. - ARTWORK FOR AN EMPTY SLOT → illustrations, and go there LAST. assets/library/manifest.json lists 252 stills and assets/motion/manifest.json 16 animations. This is by far the heaviest surface in the system. Go only when a block you have already chosen has an empty slot, and fetch the manifest — never the rendered page. The distinction that matters: COMPONENTS are the parts you build with, COLLATERALS are the finished things you produce. If you are assembling, you want components. If you are producing a deliverable in a fixed format, you want collaterals. Asking for collaterals when you meant components is the most common wrong turn. ## Links, and the two kinds of document - Every anchor carries data-cta="" naming where it goes, and agents/links.json maps each key to a URL. Never invent a URL, and never leave href="#" in a finished asset. To point a document somewhere else — a campaign page, a tracked link — override the key rather than editing the markup: doclinks.resolve(html, {"demo": "https://get.fountain.com/?utm_source=..."}) Run `python3 scripts/check-links.py ` on anything you build; it exits non-zero if a button in a finished document goes nowhere. - A key with no URL yet stays href="#". Say so in your handover instead of guessing; that same command prints which keys are still waiting. - A one-pager is used two ways, and they are not the same document: digital emailed, or read as a PDF on a screen. The buttons are live links; this is the default and nothing is added. leave-behind handed to a person on paper, where a link is worth nothing. doclinks.variant(html, "leave-behind") adds a QR code and the URL in type under the closing CTA. Build both when an asset will be used both ways. ## Tokens ### color.brand --brand-50: #eef2ff --brand-100: #e0e7ff --brand-600: #4f46e5 --brand-800: #3730a3 --gradient-ai: linear-gradient(180deg, #3935ff 0%, #8f00ff 100%) ### gradient --gradient-hero: linear-gradient(0deg, #ffffff -47.85%, #177dd5 13.53%, #483dc4 62.01%, #111f63 93.79%) --gradient-immersive: linear-gradient(145.365deg, #2922aa 0.03%, #2c88d7 100.03%) --gradient-sky: linear-gradient(180deg, #ffffff 0%, #d0deff 50.96%, #ffffff 100%) --gradient-hero-radial-center: radial-gradient(939.836px 782.19px at 50% 50%, #59aff8 12.5%, #5d77e0 38.46%, #2f72d6 54.81%, #000452 100%) --gradient-hero-radial-left: radial-gradient(1351.228px 1153.33px at 5.38% 52.76%, #59aff8 17.69%, #4242ff 31.25%, #1e49c3 59.62%, #000452 100%) --gradient-hero-diagonal: linear-gradient(112.567deg, #000452 11.89%, #2f72d6 63.3%, #59aff8 111.44%) --gradient-panel-deep: linear-gradient(107.436deg, #0e3575 0%, #030121 100%) --gradient-panel-blue: linear-gradient(109.271deg, #130e75 0.01%, #2c88d7 100.01%) --gradient-app-icon: linear-gradient(180deg, #293fcf 0%, #59aff8 100%) --gradient-footer: linear-gradient(90deg, #010d5a 0%, #0d42a1 100%) --fade-to-white: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%) --scrim-slate: linear-gradient(90deg, #0f172a 0%, rgba(15,23,42,0.3) 100%) --gradient-brand: var(--gradient-ai) --gradient-ai-600: var(--gradient-ai) --gradient-wash: var(--gradient-sky) --wash-blue: #d0deff ### glass --glass-fill: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.3) 100%) --glass-solid: rgba(255, 255, 255, 0.3) --glass-quiet: rgba(255, 255, 255, 0.1) --glass-blur: blur(14.498px) ### color.neutral --neutral-900: #0f172a --neutral-600: #404d5f --neutral-400: #687281 --neutral-300: #b7c0cb --neutral-200: #e2e8f0 --neutral-100: #f1f5f9 --neutral-50: #f8fafc --neutral-white: #ffffff ### color.accent --green-50: #d8f9d3 --green-600: #4ea441 --green-800: #145b2f --amber-50: #fff8e1 --amber-600: #f68006 --amber-800: #92400e --lemon-50: #fffee1 --lemon-600: #ffcf23 --lemon-800: #664f00 --rose-50: #fff1f2 --rose-600: #e11d48 --rose-800: #9f1239 --purple-50: #f4e6ff --purple-600: #a738ff --purple-800: #5b00a3 --teal-50: #e3fafa --teal-600: #39d4d6 --blue-50: #e7f3ff --blue-600: #357fef --blue-800: #0c4497 --blue-500: #54a4f3 ### type.family --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif ### type.size --h1: 72px --h2: 56px --h3: 48px --h4: 40px --h4-sm: 32px --h5: 26px --h6: 22px --text-xl: 22px --text-l: 18px --text-m: 16px --text-s: 14px --text-xs: 12px ### type.leading --lh-display: 1 --lh-tight: 1.1 --lh-snug: 1.3 --lh-body: 1.4 ### type.tracking --track-display: -0.03em --track-tight: -0.02em --track-none: 0 ### space --space-0: 0px --space-05: 2px --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px --space-5: 20px --space-6: 24px --space-8: 32px --space-10: 40px --space-12: 48px --space-14: 56px --space-16: 64px --space-20: 80px ### layout --container-large: 1280px --max-width-large: 768px --max-width-xsmall: 400px --frame-width: 1440px --margin-lr: 80px --margin-tb: 64px --section-pad-small: 48px --section-pad: 80px ### radius --radius-lg: 8px --radius-2xl: 16px --radius-full: 999px ### elevation --shadow-5: rgba(0, 0, 0, 0.05) --shadow-15: rgba(0, 0, 0, 0.15) --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.05) --shadow-sm: 0 1px 8px 0 rgba(0, 0, 0, 0.05) --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.05) --shadow-lift: 0 1px 8px 0 rgba(0, 0, 0, 0.15) --shadow-base: 0 1px 2px 0 var(--shadow-15) --shadow-card: 0 4px 24px 0 rgba(15, 23, 42, 0.06) --shadow-glow: 0 1px 73px 0 rgba(135, 150, 197, 0.55), 0 4px 76px 0 rgba(191, 202, 230, 0.8) --shadow-glass: inset 0 0 10.356px 0 rgba(255, 255, 255, 0.25) --shadow-bloom: 0 0 187.81px 0 #aacdff --ring-default: inset 0 0 0 1px var(--neutral-200) --ring-strong: inset 0 0 0 1px var(--neutral-300) --ring-focus: inset 0 0 0 1px var(--brand-600), 0 0 0 3px rgba(79, 70, 229, 0.15) ### other --black: #000000 ## Components Each is a self-contained HTML fragment at the given path, 1440px wide. - 01-site-header — Site header — nav bar (88px tall) file: sections/01-site-header.html figma: 1:1842 - 02-hero-primary — Hero / Primary (738px tall) file: sections/02-hero-primary.html figma: 1:1855 - 03-hero-about — Hero — About us, photo right (762px tall) file: sections/03-hero-about.html figma: 1:1892 - 04-hero-careers — Careers hero + mission / vision cards (1099px tall) file: sections/04-hero-careers.html figma: 1:1903 - 05-hero-centered — Hero — centered heading, no visual (373px tall) file: sections/05-hero-centered.html figma: 1:1925 - 06-cta-banner — CTA banner — centered on gradient (450px tall) file: sections/06-cta-banner.html figma: 1:1938 - 07-cta-prompts — CTA split — copy left, prompt chips right (450px tall) file: sections/07-cta-prompts.html figma: 1:1948 - 08-hero-cue — Hero — Cue prompt console with tabs (804px tall) file: sections/08-hero-cue.html figma: 1:1967 - 09-clients-logo-strip — Client logo strip (210px tall) | 1 empty image slots file: sections/09-clients-logo-strip.html figma: 1:2015 - 10-proof-stat-cards — Proof stats — 2×2 photo cards (1032px tall) file: sections/10-proof-stat-cards.html figma: 1:2035 - 11-results-stat-tiles — Results stats — mixed tiles (866px tall) file: sections/11-results-stat-tiles.html figma: 1:2083 - 12-category-stage — Category stage — Ask it. Run it. (1079px tall) | 2 empty image slots file: sections/12-category-stage.html figma: 1:2120 - 13-suite-tabs — Suite tabs — product switcher (1006px tall) file: sections/13-suite-tabs.html figma: 1:2153 - 14-architecture-scroll — Architecture — scrolling steps (778px tall) file: sections/14-architecture-scroll.html figma: 1:2216 - 15-orchestration-split — Orchestration split — image right (746px tall) file: sections/15-orchestration-split.html figma: 1:2332 - 16-demo-split — Demo split — image left (746px tall) file: sections/16-demo-split.html figma: 1:2382 - 17-industry-cards — Industry cards — 4-up photo tiles (661px tall) file: sections/17-industry-cards.html figma: 1:2454 - 18-related-posts — Related posts — 4-up blog cards (768px tall) file: sections/18-related-posts.html figma: 1:2600 - 19-how-it-works — How it works — 3 capability cards (950px tall) file: sections/19-how-it-works.html figma: 1:2608 - 20-agent-trio — AI agent cards — 3 up (895px tall) file: sections/20-agent-trio.html figma: 1:2724 - 21-agent-duo — AI agent cards — 2 up (948px tall) file: sections/21-agent-duo.html figma: 1:2757 - 22-story-carousel — Customer story carousel — KPI cards (876px tall) file: sections/22-story-carousel.html figma: 1:2781 - 23-press-quote — Press quote — logo strip (373px tall) | 2 empty image slots file: sections/23-press-quote.html figma: 1:2825 - 24-quote-pair — Testimonial pair — bordered quote cards (420px tall) file: sections/24-quote-pair.html figma: 1:2873 - 25-problem-columns — Problem list — 4 numbered columns (568px tall) file: sections/25-problem-columns.html figma: 1:2893 - 26-bento-capability-cards — Capability cards — 4-cell bento on gradient (505px tall) file: sections/26-bento-capability-cards.html figma: 1:2916 - 27-enterprise-trust-4up — Trust pillars — 4 up with icons (464px tall) file: sections/27-enterprise-trust-4up.html figma: 1:2950 - 28-enterprise-trust-6up — Trust pillars — 6 up with icons (464px tall) file: sections/28-enterprise-trust-6up.html figma: 1:2976 - 29-awards-row — Awards row — 5 badges with citations (585px tall) file: sections/29-awards-row.html figma: 1:3012 - 30-press-row — In the press — intro plus 3 article cards (414px tall) file: sections/30-press-row.html figma: 1:3047 - 31-testimonial-carousel — Testimonial carousel — dark gradient (482px tall) file: sections/31-testimonial-carousel.html figma: 1:3084 - 32-stats-band — Stat band — 3 metrics over client logos (464px tall) | 5 empty image slots file: sections/32-stats-band.html figma: 1:3129 - 33-billboard-cta — Billboard CTA — full-bleed closing band (472px tall) file: sections/33-billboard-cta.html figma: 1:3199 - 34-benefits-grid — Benefit grid — 3×3 glass cards on gradient (1142px tall) file: sections/34-benefits-grid.html figma: 1:3211 - 35-analyst-recognition — Analyst recognition — Gartner panel (656px tall) file: sections/35-analyst-recognition.html figma: 1:3275 - 36-quote-panel-lead — Quote panel — lead quote with CTA (530px tall) file: sections/36-quote-panel-lead.html figma: 1:3276 - 37-quote-panel-long — Quote panel — long quote, no CTA (432px tall) file: sections/37-quote-panel-long.html figma: 1:3288 - 38-careers-panel — Careers panel — recruiting CTA with hiring cards (506px tall) | 1 empty image slots file: sections/38-careers-panel.html figma: 1:3299 - 39-certifications-panel — Certification panel — five badge tiles (504px tall) file: sections/39-certifications-panel.html figma: 1:3379 - 40-recognition-panel — Recognition panel — award tiles and review ratings (648px tall) file: sections/40-recognition-panel.html figma: 1:3402 - 41-investors-panel — Investor panel — copy with 2×2 logo grid (537px tall) file: sections/41-investors-panel.html figma: 1:3466 - 42-icp-agent-spotlight — ICP agent spotlight — portrait card (707px tall) file: sections/42-icp-agent-spotlight.html figma: 1:3482 - 43-success-stories-bento — Success stories bento — video tile + 2 quotes (831px tall) | 1 empty image slots file: sections/43-success-stories-bento.html figma: 1:3484 - 44-ats-capability-trio — ATS capability trio — 3 cards with UI stills (920px tall) | 3 empty image slots file: sections/44-ats-capability-trio.html figma: 1:3513 - 45-suite-modules — Suite modules — 4 cards around ATS tile (891px tall) file: sections/45-suite-modules.html figma: 1:3595 - 46-comparison-table — Comparison table — manual vs agentic ATS (1118px tall) file: sections/46-comparison-table.html figma: 1:3683 - 47-why-switch-table — Why switch table — Anna vs human vs agency (771px tall) file: sections/47-why-switch-table.html figma: 1:3787 - 48-faq-accordion — FAQ accordion — headline left, questions right (701px tall) file: sections/48-faq-accordion.html figma: 1:3920 - 49-run-it-cta — Closing CTA — full-bleed video (721px tall) file: sections/49-run-it-cta.html figma: 1:3943 - 50-ready-cta — Ready CTA — full-bleed portrait (749px tall) file: sections/50-ready-cta.html figma: 1:3950 - 51-footer — Footer — brand block + link columns (456px tall) | 5 empty image slots file: sections/51-footer.html figma: 1:3975 - 52-resource-hub-hero — Resource hub hero — breadcrumb, filters, photo (Nonepx tall) | 1 empty image slots file: sections/52-resource-hub-hero.html figma: 1:16650 - 53-featured-resource — Featured resource — dark card with result panel (Nonepx tall) file: sections/53-featured-resource.html figma: 1:16706 - 54-resource-card-grid — Resource card grid — 4-up tools and skills (Nonepx tall) file: sections/54-resource-card-grid.html figma: 1:16746 - 55-comparison-directory — Comparison directory — vs-competitor index (Nonepx tall) | 8 empty image slots file: sections/55-comparison-directory.html figma: 1:16785 - 56-glossary-panel — Glossary panel — term pills on navy (Nonepx tall) file: sections/56-glossary-panel.html figma: 1:16876 - 57-stat-tiles-band — Stat tiles band — headline plus 4 metrics (Nonepx tall) file: sections/57-stat-tiles-band.html figma: 1:14784 - 58-story-video-row — Customer story video row — 3 photo cards (Nonepx tall) | 6 empty image slots file: sections/58-story-video-row.html figma: 1:14805 - 59-newsroom-split — Newsroom split — lead release plus compact list (Nonepx tall) | 1 empty image slots file: sections/59-newsroom-split.html figma: 1:14853 - 60-featured-editorial-row — Featured editorial row — lead piece plus two (Nonepx tall) | 3 empty image slots file: sections/60-featured-editorial-row.html figma: 1:14734 ## Deck archetypes Twelve ready slide layouts, each a fragment on a fixed 1280x720 canvas. Fetch one, replace its copy, done. They share css/slides.css. - 01-title — Title · Ask it. Run it. https://fountain-design-system.replit.app/templates/slides/01-title.html - 02-big-quote — Big quote https://fountain-design-system.replit.app/templates/slides/02-big-quote.html - 03-customer-story — Customer story https://fountain-design-system.replit.app/templates/slides/03-customer-story.html - 04-three-prompts — Three prompts https://fountain-design-system.replit.app/templates/slides/04-three-prompts.html - 05-origin — Origin · past → future https://fountain-design-system.replit.app/templates/slides/05-origin.html - 06-section-divider — Section divider https://fountain-design-system.replit.app/templates/slides/06-section-divider.html - 07-agenda — Agenda https://fountain-design-system.replit.app/templates/slides/07-agenda.html - 08-product-module — Product module https://fountain-design-system.replit.app/templates/slides/08-product-module.html - 09-agent-roster — Agent roster https://fountain-design-system.replit.app/templates/slides/09-agent-roster.html - 10-metric-wall — Metric wall https://fountain-design-system.replit.app/templates/slides/10-metric-wall.html - 11-credentials — Credentials https://fountain-design-system.replit.app/templates/slides/11-credentials.html - 12-before-after — Before / after https://fountain-design-system.replit.app/templates/slides/12-before-after.html ## Making a one-pager or a deck This is the main thing to know. You do NOT need a checkout, a build step or a framework. Every section and every slide is a plain HTML fragment at a URL. Fetch the ones you want, concatenate them into a skeleton, and you have the document. Three steps: 1. Pick your blocks. For a one-pager or a web page: choose from ## Components above. For a deck: choose from ## Deck archetypes above. The full index is at https://fountain-design-system.replit.app/agents/components.json — every entry carries a `url` you can fetch directly. 2. Fetch each fragment over HTTP. The body of the response IS the block; there is no wrapper to strip. curl https://fountain-design-system.replit.app/sections/02-hero-primary.html curl https://fountain-design-system.replit.app/templates/slides/06-section-divider.html 3. Drop them into this skeleton. Nothing else is required. ### A one-pager (US Letter, prints to PDF)
css/sections.css is not optional. Each section's layout lives there; without it every block renders as unstyled stacked text. Same for css/slides.css and the slide archetypes. Sheet classes: sheet--letter, sheet--letter-landscape, sheet--a4, sheet--slide. Add sheet--auto to let a page grow and break across pages; leave it off to clip each block to exactly one page. ### A deck (16:9, one archetype per slide) body class="deck" scroll-snaps one slide at a time on screen. Slide archetypes are already 1280x720, so they need no sheet wrapper. Section fragments are 1440 wide and DO need one: wrap each in sheet sheet--slide > sheet__frame to put a web section on a slide. ### Which blocks make a decent one-pager A worked starting point, if you have no other steer: 05-hero-centered, 25-problem-columns, 46-comparison-table, 50-ready-cta And a deck: 01-title, 06-section-divider, 08-product-module, 10-metric-wall, 12-before-after, 02-big-quote ### Rules when composing - Replace the copy inside a fragment. Do not change its structure or class names — that is what keeps it on-brand and what lets it be restyled later from tokens. - Images are relative paths (assets/...). Either prefix them with https://fountain-design-system.replit.app/ or copy the files alongside your output. - An empty .fx-slot with a data-slot attribute is a deliberate gap: it names the artwork it wants. Leave it, or supply a real image. Never fill it with an unrelated stock photo. ### If you do have a local checkout scripts/compose.py does all of the above in one command: python3 scripts/compose.py --format letter --sections 05 25 46 50 -o pitch.html python3 scripts/compose.py --format slide --sections 02 25 10 46 33 -o deck.html python3 scripts/compose.py --format flow --sections 01 02 09 51 -o page.html Formats: letter, letter-landscape, a4, slide (1280x720), flow (1440 web).