Collaterals

Page 1 — the hook

Reading order is header → promise → supporting paragraph → proof. A full-bleed hero band carries the eyebrow, the H1 and the trusted-by logo wall; under it the “Meet Cue” block pairs a 60–80 word paragraph with a live Cue conversation card; a four-up industry row closes the page.

8.50 × 10.98 inpage 1 of 2 Cue - One pager.pdf

Page 2 — the benefits

A structured grid of proof points: four suite modules in pale-indigo cards, then four photo metric cards each carrying one number and one customer line, then the “Ask it. Run it.” band with the CTA. The offer module the pattern describes is replaced here by a demo CTA.

8.50 × 10.98 inpage 2 of 2 Cue - One pager.pdf

The page spec

Layout rules

Variant B — the model to emulate

The source template ships two variants; the second reads faster and is the one to copy.

• The header hero is shorter — 2.14 in rather than 2.63 in. More text-first, less photo-first.
• The H1 wraps to three lines with clause breaks for rhythm instead of two.
• The benefits block moves to the bottom of page 1, inside a pale-indigo rounded card at 0.01, 6.78, 8.50 × 4.20 in. The card gives the grid a visual home and anchors the whole page.
• Page 2 opens with the pull-quote as a full-width indigo banner (0, 0, 8.5 × 1.31 in), not with the H1.
• The results trio is numeric-first — “12 → 3”, “+45%”, “8–10 hrs/week” each get their own big-number treatment.

Title · Ask it. Run it.

The cover. Eyebrow, a 128px two-tone headline and the sphere over the deep-blue panel gradient. Also the model for the back cover.

1280 × 720 .slide--dark --gradient-panel-deep .slide__watermark--light slides/01-title.html slides/TitleSlide.html

Big quote

One line on blue. A 120px sphere, the display step and a 23px answer under it. Nothing else on the slide — the tension beat before a section turns.

1280 × 720 .slide--immersive --gradient-immersive .slide__watermark--light slides/02-big-quote.html slides/BigQuoteSlide.html

Customer story

A 1.2fr / 1fr split: a 64px pull-quote and a logo byline on the left, a statline card on the right carrying the counts and what Cue replaced.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/03-customer-story.html slides/CustomerStorySlide.html

Three prompts

Intent → outcome, three across. Each card is a role dot, the prompt in the lead step, a dashed rule and a green tick with the result.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/04-three-prompts.html slides/ThreePromptsSlide.html

Origin · past → future

The dual-image frame: 1987 on the left, 2026 on the right, each a figure with a pill caption. The pair now stops at the watermark safe area.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/05-origin.html slides/OriginSlide.html

Section divider

A numbered section marker — an ordinal, a short rule and two words at the display step on a full-bleed ground. The most-used layout in the deck: it recurs five times and had no archetype at all.

1280 × 720 .slide--dark --gradient-panel-deep .slide__watermark--light slides/06-section-divider.html deck slides 3, 9, 31, 41, 46

Agenda

Table of contents. Four numbered rows on hairlines over the sky gradient, the ordinal and the label sharing one type step so the column reads as a list, not a table.

1280 × 720 .slide--sky --gradient-sky .slide__watermark--dark slides/07-agenda.html deck slide 2

Product module

The workhorse — eight slides in the deck use this shape. App icon and eyebrow, a three-line headline, three benefit blocks, and the product visual rebuilt live as a Cue thread rather than pasted in as a screenshot.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/08-product-module.html deck slides 12–17, 21, 25, 26

Agent roster

The three talent agents, portrait over a caption block, with the customer pull quote beneath. The portraits are lit on deep blue, so this one only works on a dark ground.

1280 × 720 .slide--dark --gradient-panel-deep .slide__watermark--light slides/09-agent-roster.html deck slide 18

Metric wall

A customer result: industry and product chips, the customer mark, a headline, then the quote and three tabular figures side by side under one rule.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/10-metric-wall.html deck slides 36, 40

Credentials

The trust marks as typographic chips, three up and two down, with the two policy URLs beneath. Chips rather than certification badges — the badge artwork is third-party and is not in this system.

1280 × 720 .slide--dark --gradient-panel-deep .slide__watermark--light slides/11-credentials.html deck slide 45

Before / after

Six stages across, two rows down: the manual timeline against the Fountain one. A real table with row and column headers, never an image — the times are the argument.

1280 × 720 .slide--light --neutral-white .slide__watermark--dark slides/12-before-after.html deck slide 47

One watermark rule

The five slide files this replaces each wrote their own watermark as an inline style attribute and each pointed at a different logo file. Two of those files carried transparent padding, so the same height:40px put the Fountain mark on screen at 40px on three slides and about 15.6px on the other two. The fix is structural: the geometry lives in a single rule and the image is supplied by CSS, so an archetype chooses a colour variant and nothing else.

.slide__watermark {
  position: absolute;
  left:   var(--slide-mark-x);   /* --space-14 · 56px */
  bottom: var(--slide-mark-y);   /* --space-12 · 48px */
  height: var(--slide-mark-h);   /* --space-10 · 40px */
  width: auto; display: block;
}
.slide__watermark--light { content: url('../assets/brand/fountain-wordmark-white.png'); }
.slide__watermark--dark  { content: url('../assets/brand/fountain-wordmark-dark.png');  }

Both source files are trimmed to their ink and normalised to 200px tall at 6.24 : 1, so height alone fixes the mark identically on either ground. scripts/build-slides.py enforces it on every render: it measures getBoundingClientRect() on each .slide__watermark, then renders each slide a second time with the mark hidden and differences the two frames to get its real painted extent — a padded logo passes the first check and fails the second. It also fails the build if any element lands inside the mark’s keep-out box. Across all 12 archetypes both numbers are 40px, spread 0.00px.

Canvas and furniture

Canvas

16:9 at 1920 × 1080. The twelve fragments are authored at 1280 × 720 — the same ratio at 0.667×, so a render scales cleanly either way. .slide fixes that box; the build fails if a fragment reports any other size.

Watermark

The Fountain logo, bottom-left of every slide, at height:40px; left:56px; bottom:48px — white variant on a dark ground, dark-blue on a light one. Never a phone number, address or URL strip beside it; title and back-cover slides use the same position.

Safe area

Every stage reserves --slide-safe at the bottom — 48 + 40 + 24 = 112px, the mark’s own box plus a space step of air. This is what the old Origin slide was missing, and it is derived from the watermark tokens rather than typed in, so the two cannot drift apart.

Surfaces

Four, all from gradient tokens: .slide--light, .slide--dark (--gradient-panel-deep), .slide--immersive (--gradient-immersive) and .slide--sky (--gradient-sky). A dark surface reassigns the ink variables wholesale, so a card or a chip never has to ask which ground it is standing on.

Page numbers

Bottom-right, on content slides only.

Type

Display CircularXX Bold 700, tracking −0.03em, leading 1.05. Body CircularXX Regular 450 at 18–22pt, leading 1.4. Eyebrows Andale Mono 11pt uppercase, +0.08em. Google Slides exports substitute Plus Jakarta Sans.

Colour

Deep-blue fill #000452 → #2F72D6 on a dark slide; pale-indigo cards #EEF2FF on a white slide.

The sphere

Always on cover and section-break slides. Never as a bullet or a micro-icon.

The slide type ramp

The deck canvas is 1280 wide against the library’s 1440 artboard, so the page scale is 1.125× too big for it. Rather than a second set of hand-picked sizes, every slide step is a page token multiplied by --slide-scale, which is calc(1280 / 1440). Two of them land on round numbers by arithmetic, not by choice.

Composition rules

1. Section breaks are typographic, not photographic. Big words, tight leading, generous margins.
2. Content slides are grids of equal tiles — three-up and four-up patterns outnumber everything else.
3. One hero number per slide. When numbers matter they dominate at 72–180pt; when they don’t, they are absent. Every figure is font-variant-numeric: tabular-nums.
4. Steppers and timelines use thin horizontal bars, never fat boxes.
5. Quotes use oversized typographic quote marks, not a grey quote card.
6. Icons are product squircles from the product icon set, not line icons.
7. A comparison is a table, never a picture of one. The before/after archetype is a real <table> with row and column headers, so the times stay selectable, tabular and translatable.

The pattern library behind the archetypes

The first five archetypes are rebuilds of the sample slides shipped with the Marketing Design System, which are themselves drawn from a 19-slide sales-deck template. Slides 13–19 of that deck are its reusable layout library; these are the patterns worth inheriting when a new deck needs a slide the twelve archetypes don’t cover.

Cue is here · orb left

Orb bleeding off the left edge, headline and “Try it now” pill stacked on the right. The wider of the two web banners.

1872 × 562 3.33 : 1 assets/banners/banner-cue-is-here-left.png

Cue is here · orb right

Mirror image: headline left, orb right, the pill sitting inside the orb’s glow. The flattest of the set — the one that survives a narrow slot.

1982 × 500 3.96 : 1 assets/banners/banner-cue-is-here-right.png

Launch banner · 16:9

The master visual: sphere, “Ask it. Run it.”, and a real frontline intent sitting in the composer pill with the cursor still on the send button.

1280 × 720 16 : 9 assets/banners/cue-launch-banner.png

Launch banner · square

The same composition squared up for a feed, with the positioning line above the orb and six worker capsules ringing the frame.

1080 × 1080 1 : 1 assets/banners/cue-launch-banner-1080.png

What governs them

The three-beat sequence

one story, three cards cropped from assets/brand-guidelines/campaign-social.jpg

The boards

Social board — three stories, nine cards

Three stories run the formula: a crew called out on a construction site, two baristas called out mid-service, a weekend delivery surge. Each row is one story, each column is one beat, and the colour field of the middle card is sampled from the photograph beside it.

1200 × 1251 assets/brand-guidelines/campaign-social.jpg

Out-of-home — shelter and wallscape

Portrait format, one worker, the same two-lines-plus-“Run it.” structure, with the Fountain logo under the copy. At this size the photograph takes the top two-thirds and the copy block sits in a colour field below it.

1200 × 1418 assets/brand-guidelines/campaign-ooh.jpg

Billboard — landscape

The landscape cut: photograph left, copy right, eyebrow above the headline, logo under it. Three lines maximum — situation, outcome, “Run it.” — because it has to read at speed.

1200 × 917 assets/brand-guidelines/campaign-billboard.jpg

The one production-sized square

Of everything on this page, cue-launch-banner-1080 is the only square asset that exists at a real export size. Any feed card that isn’t on the “Run it.” formula starts from this composition.

1080 × 1080 assets/banners/cue-launch-banner-1080.png

Past · staff schedule, 1987

The “before” half of every past → future composition: a whiteboard rota, a wall of paper, a manager with a marker.

2048 × 1117assets/scenes/past-staff-schedule-1987.png

Future · manager, 2026

The “after” half, shot in the same room from the same angle so the pair can sit side by side in one frame.

2048 × 1117assets/scenes/future-manager-2026.png

Aurora · dark

Soft blue aurora wash for a dark panel. Already 16:9, so it drops straight behind a slide or a launch banner.

1280 × 720assets/backgrounds/blue-aurora-dark.png

Aurora · light

The light counterpart — a pale wash that keeps a white page from going flat without pulling it into the blue world.

2048 × 1332assets/backgrounds/blue-aurora-light.png

Wallpaper · deep blue

A 4K deep-blue field. The only background asset large enough for an OOH or wallscape crop.

3840 × 2160assets/brand/wallpaper-blue.png

Worker capsules

Transparent PNGs, already circle-cropped with the thin white ring, sized for placement over blue. Six of them ring the square launch banner and the hero compositions; they are the only cut-out people in the library.

111 × 111 (worker-portrait-guy is 136 × 136) assets/templates/avatars/ from Marketing Design System assets/avatars/

The rules

The page

The type ramp

Heading 1 is the one place the document and its own stylesheet disagree: the specimen paragraph is 18 pt bold, the style definition behind it is 17 pt SemiBold. A writer using the style menu gets 17.

Its palette does not match this system

Worth knowing before the template is used as a colour reference. Two of its eight swatches are a single hex digit away from a brand token — close enough that they were almost certainly eyedropped rather than copied, and far enough that a document and a web page put side by side will not match.

The fix is a decision, not a patch: either the two near-misses are corrected to the tokens and the accent set is folded into tokens.css, or the document palette is declared deliberately separate and documented as such. Left alone until someone chooses.

python3 scripts/compose.py --format letter \
    --sections 02 10 46 50 -o one-pager.html

python3 scripts/compose.py --format slide \
    --sections 02 25 46 33 -o deck.html

python3 scripts/compose.py --format flow \
    --sections 01 02 09 51 -o landing.html

Sheet geometry

The section budget is the tallest a 1440-wide section can be before the sheet clips it. On a 16:9 slide that is 810px, and 36 of the 51 library sections fit. The 15 that overflow are 04, 08, 10, 11, 12, 13, 19, 20, 21, 22, 34, 43, 44, 45, 46 — put those on a letter or A4 page, or split them.

letter — one flowing page

Four sections stacked in a single 816px column that grows to its content. Printing breaks it across pages; the sheet never clips.

816 × auto examples/example-one-pager.html

slide — one section per sheet

A fixed 1280 × 720 sheet with the section scaled to 0.889×. Anything taller than 810px on the artboard is cut off at the bottom edge — the reason the budget column above exists.

1280 × 720 examples/example-deck.html

Which typeface, by output

A hard rule, and the one most easily got wrong when an asset moves between tools.

This site is in the third row and takes the fallback: css/tokens.css self-hosts Plus Jakarta Sans as a deliberate stand-in, so the library renders identically offline and in print. Swap the @font-face block for the CircularXX .otf files to get a true match.