# Cue Design System — project memory This project uses the Cue by Fountain marketing design system. Read `agents/llms.txt` for the full spec; the essentials are below. ## Rules - 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. ## Where things are - `css/tokens.css` — every design token. Import it first. - `css/base.css` — the `.fx-*` primitives every section is built from. - `css/pages.css` — the composition layer: US Letter, A4, 16:9 sheets. - `sections/NN-slug.html` — 60 page sections, each a paste-ready fragment. - `agents/tokens.json`, `agents/components.json` — the same data, machine-readable. - `brand.html` — the brand system: the mark, colour, type, photography, campaign. - `collaterals.html` — finished formats: one-pagers, slides, banners, social. ## When asked to build a page or asset 1. Link `css/tokens.css` and `css/base.css` before anything else. 2. Compose from what exists. Check `agents/components.json` first — it indexes both the 60 page sections and the 12 slide archetypes. Build something new only when nothing in it covers the job. 3. Use tokens for every value. If you find yourself typing a hex, look it up. 4. Keep new classes namespaced to the block they belong to. ## Making a one-pager, a deck or a page Every section and slide is a plain HTML fragment. There is no build step. **A one-pager** — sections are 1440px wide, so each goes inside a sheet that scales the artboard to the page: ```html
``` Sheets: `sheet--letter`, `sheet--letter-landscape`, `sheet--a4`, `sheet--slide`. `sheet--auto` lets it flow across pages; without it each sheet is one page. **A deck** — slide archetypes in `templates/slides/` are already 1280x720 and need no sheet. Link `css/slides.css`, concatenate them inside ``, and they scroll-snap one at a time. **Either way**: replace the copy inside a fragment, never its structure or class names. That is what keeps it on-brand and restylable from tokens. Or, in one command: `python3 scripts/compose.py --format letter --sections 05 25 46 50 -o pitch.html` (formats: letter, letter-landscape, a4, slide, flow).