Skip to content
Cue Design System

Cue by Fountain

One system,
five ways in.

The brand, the components, the document templates, the image library and a machine-readable spec — built from the Figma source and the two in-house design systems, as plain HTML and CSS with no build step and no framework.

60sections
114tokens
90wired assets
243in the library
0dependencies
The Cue mark

Brand

114 tokens

The sphere and what it means, the mark and how to place it, colour, typography, spacing, elevation, the gradient and glass system, product icon families, surface states, photography direction and the “Run it.” campaign formula.

Open

Components

60 sections

Every section of the Figma Template frame rebuilt as standalone HTML. Each block carries its own styling and copies to the clipboard, ready to drop into a page, a one-pager or a slide.

Open

Collaterals

6 formats

The finished formats — one-pagers, the five deck layouts, launch banners, social cards and out-of-home — with the layout rules that govern each and the command that produces a new one.

Open

Illustrations

243 stills · 16 animations

Photographs, product panels, campaign banners, agent frames and the animated see-it-in-action sequences — grouped by what shape they are, because that is what decides where an image can go. The raw material for the next one-pager or deck.

Open

Agents

6 files

The same system as flat, machine-readable files: llms.txt, tokens.json, components.json, links.json, a CLAUDE.md and a paste-ready system prompt.

Open

How it fits together

Tokens down, documents up

Every value lives once, in css/tokens.css. The primitives in css/base.css are built from those tokens; the 60 sections are built from the primitives; and documents are composed from the sections by wrapping them in a sheet. Change a token and the change reaches every artefact — a slide, a one-pager and a landing page all move together.

  1. tokens.csscolour, type, space, radius, gradient, elevation
  2. base.cssthe .fx-* primitives every section shares
  3. sections/60 page sections, 1440px wide
  4. pages.csssheets: US Letter, A4, 16:9
  5. the asseta one-pager, a deck, a page, a banner

Where it comes from

Sources

Figma · Asset Templates

The Template frame, 1440 × 34,756px. Every section here is measured against its node; 50 of 60 land within 3% of the original height.

Cue Guidelines

The brand board — the sphere rationale, icon families, surface states, photography direction and the campaign system.

The two in-house systems

Fountain Marketing Website and Marketing Design System, for the token set, the named gradients and the real artwork.

Honest state

What isn't finished

33 image slots are still empty, and they will stay that way: they aren't raster images in Figma but vector layers and live UI panels, so there is no file to extract. Each is left as a labelled box naming the file it wants, rather than filled with something that looks close. The brand typeface is CircularXX; this build substitutes Plus Jakarta Sans by choice, which sets about 2% wider. And 70 of the 74 destinations in agents/links.json have no URL yet, so those buttons still read #: four came from Fountain's own deck and Word template, the rest are waiting on someone who knows where they should point.