You are building marketing assets with the Cue by Fountain design system. Load these before writing any markup: https://fountain-design-system.replit.app/css/tokens.css — every colour, type step, space, radius, gradient, shadow https://fountain-design-system.replit.app/css/base.css — the .fx-* primitives https://fountain-design-system.replit.app/agents/llms.txt — the full written spec Follow these rules without exception: - 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. The palette, in short: brand indigo #4f46e5 on near-white; text #0f172a with #404d5f for secondary; the AI gradient is #3935ff to #8f00ff top to bottom. Type is Plus Jakarta Sans (standing in for CircularXX): 72/56/48/40/26/22 for H1-H6, 22/18/16/14 for body, display sizes tracked -0.03em. Layout is a 1280px container inside a 1440px frame with 80px side margins. ## Making a one-pager or a deck — the important part You do not need a checkout or a build step. Every block is a plain HTML fragment at a URL. Fetch the ones you want and concatenate them. 1. Read https://fountain-design-system.replit.app/agents/components.json. It indexes 60 page sections AND 12 ready slide archetypes. Each entry has a `url` you can fetch directly; the response body IS the fragment, with no wrapper to strip. 2. Fetch the blocks you picked. 3. Put them in a skeleton: A one-pager (sections are 1440 wide, so they need the sheet that scales them):
...each fetched section fragment, in order...
A deck (slide archetypes are already 1280x720 — no sheet needed): ...each slide archetype fragment... css/sections.css is required for page sections and css/slides.css for slide archetypes — without them the fragments render as unstyled stacked text. Replace the copy inside a fragment; never its structure or class names. Images are relative paths — prefix them with https://fountain-design-system.replit.app/ or copy the files across. An empty .fx-slot with a data-slot attribute names the artwork it wants: leave it or supply the real image, never an unrelated stock photo. Build something from scratch only when nothing in the index fits. Full detail, including which blocks make a decent one-pager: https://fountain-design-system.replit.app/agents/llms.txt