Compass Deck System
00 / 04

Living style guide · v2

One look,
every deck.

The house style for Compass presentations — a chaptered, parallax scrollytelling system. This page is the example: scroll through and you'll see every element you can reuse, in order.

Type Fraunces · DM Sans Feel warm editorial Build one HTML file, zero deps
scroll to begin

Contents

Four chapters.

Each chapter opens with a numbered parallax divider — so it's always clear where you are and that there's an order.

01

Chapter 01

Foundations

The fixed parts every deck inherits: a warm paper palette with one accent per meaning, a serif-plus-sans pairing, and four rules of voice.

colour · type · voice
Palette — one colour per meaning
Paper
#faf8f3 · canvas
Ink
#2b2a27 · text
Teal
#3d8b7a · primary
Sage
#6f9f85 · good / now
Terra
#d8694e · before
Gold
#c89c4c · index
Navy
#1c3c54 · depth
Typography — Fraunces display · DM Sans body
displayFraunces
h2

A point-first headline

eyebrowSection label
ledeThe standfirst that frames why a section matters.
bodyBody copy in DM Sans — calm, readable, 1.6 line-height.
accentan italic Fraunces aside
monoPR #1275 · case_id 469
Voice — the four rules

Lead with the point

The title is the takeaway, not the topic. "NYC now ranks #1" beats "Enrollment update."

One idea per block

If a card holds two ideas, split it into two.

Whitespace is content

A block that feels empty is usually finished.

End on a "so what"

Close each chapter with one clear next step or feeling.

02

Chapter 02

Building blocks

The everyday pieces a deck is assembled from — each does one job, and carries one accent.

cards · stats · before→now · vignettes · callouts · quotes
Cards & grids
status

A lead card with an accent rule

For the one idea a section is really about. Everything else is supporting.

PR #000tag
tag

Sub-point

One idea, a few lines.

tag

Sub-point

One idea, a few lines.

tag

Sub-point

One idea, a few lines.

Stat block
847,030NYC enrollment, now ranked #1
(Fairfax lands #12)
Before → Now
Before

The old behaviour, in one or two plain sentences.

Now

The new behaviour — what changed and why it's better.

Vignette — a self-contained before→now story

The big one · a theme

A vignette headline states the point.

A line of framing, then the contrast and the payoff.

Before

What used to happen.

Now

What happens instead.

Why it matters: the consequence, in the audience's terms.

Honest status: note anything still in flight here, plainly.

Callout & pull-quote

The takeaway

End on a clear "so what."

  • Point one to leave them with.
  • Point two to leave them with.
Define the destination strictly, let it find the road, and never drive into the lake.
— a rule of thumb, set as a pull-quote
03

Chapter 03

Evidence & detail

Where claims get grounded — clickable proof, requirements, tables, and the honest placeholders for work still in progress.

debug links · requirements · tables · lists · slots
Debug-linked examples — each opens a real case
“A real prompt the audience can click”open in debug ↗
Before what it used to do.
Now what it does, shown live.
“A second example”open in debug ↗
Before old behaviour.
Now new behaviour.
Requirement rows
R1

A labelled requirement, stated as a sentence the audience can check.

R2

The next requirement — keep each to one idea.

Data table
ScenarioProvesCoverage
A behaviour we haveR1, R2have
A behaviour to buildR3gap
Lists & pills
  • Good / done — sage bullet.
  • Attention / next — terra bullet.
  • Neutral — teal bullet.
tealsageterragoldnavy
Outline & placeholder — for sections not yet written
  • A point — with a one-line note.
Substance to fill in together — an honest, intentional placeholder.
04

Chapter 04

Structure & motion

The scaffolding that makes a long page feel like an ordered deck — and the motion that adds depth without getting in the way.

chapters · nav · parallax · reveals
The chapter system

Numbered dividers

Every chapter opens with a full-bleed divider and a giant parallax number. That's the "slide" cue — it tells the audience a new act has begun, and keeps the order obvious.

Flexible height

Content sections are as tall as they need to be — never crammed into one screen, never an endless wall. Generous padding does the pacing.

Navigation & orientation

Sticky nav

Always-present chapter links; the current one highlights as you scroll.

Progress + counter

A top progress bar, plus the 0X / 04 counter in the header.

Jump links

Tap any chapter to glide straight to its divider.

Motion — all off under reduced-motion

Parallax depth

Chapter numbers and atmospheres drift slower than the page, for quiet depth.

Staggered reveals

Blocks fade and rise as they enter — in sequence, not all at once.

Scroll-spy

The nav and counter track which chapter you're reading.

Buttons — used sparingly
Primary actionGhost action

Use this template

Copy the folder. Keep the <style>. Replace the body.

  • Start: cp -r _template <your-deck> — keep the canonical <style> block verbatim.
  • Compose: open with a cover + contents, then one chapter per act, each demoed above.
  • Stay honest: use the slot and "honest status" patterns for anything still in flight.
  • Align the rest: existing decks move onto this system by swapping in this <style> and re-tagging accents.

Full notes: docs/presentations/_template/README.md