3. Add class "agency" (or "agency-body") on . 4. Core class names (see README.md for the full list): Shell: .ag-topbar .ag-topbar__brand .ag-topbar__nav .ag-container .ag-main .ag-footer Subnav: .ag-subnav Hero: .ag-hero .ag-eyebrow .ag-hero__title .ag-hero__subtitle .ag-meta .ag-display Section: .ag-section .ag-section__header .ag-section__title .ag-section__desc Cards: .ag-card .ag-card-grid .ag-card__title .ag-card__body KPIs: .ag-stat-grid .ag-stat .ag-stat__label .ag-stat__value .ag-stat__hint .ag-stat--data Badges: .ag-badge .ag-badge--pass .ag-badge--hold .ag-badge--kill .ag-badge--stub .ag-badge--info Tables: .ag-table-wrap .ag-table .ag-table--dense .ag-table--comfortable Callouts: .ag-callout .ag-callout--info|--success|--warn|--danger Buttons: .ag-btn .ag-btn--primary .ag-btn--ghost .ag-btn--sm Mono/UTM: .ag-mono .ag-code-chip .ag-code-block Empty: .ag-empty .ag-empty__icon .ag-empty__title .ag-empty__body Layout: .ag-cols .ag-cols--aside Utils: .ag-muted .ag-row .ag-stack .ag-demo-label Do NOT invent client campaign data — label demos with .ag-demo-label “Demo”. -->
Ad Agency · Design System

Shared · Cloudflare Pages

Design system for agency reports

Premium dark theme with champagne accent and cool data cyan. Link agency.css, use the class names below, ship client-ready dashboards without reinventing chrome.

v1 · living guide Inter + Instrument Serif Demo placeholders only

For other bots: Link /agency.css (hub) or copy from ad-agency-design-system/. Put agency on <body>. Prefer class names listed in the HTML comment at the top of this file and in README.md. Label invented numbers with ag-demo-label.

Color tokens

CSS variables on :root. Warm champagne primary · soft cyan for data.

bg--bg
surface--surface
surface-2--surface-2
border--border
text--text
muted--muted
accent--accent
accent-2--accent-2
success--success
warn--warn
danger--danger
info--info

Also defined: --radius*, --shadow*, --space-1…8, --font-sans|display|mono, --text-xs…4xl, --max-width (1120px).

Cards & card grid

.ag-card · .ag-card-grid · modifiers --2|--3|--4

Demo

Surface card

Soft elevation, subtle border. Use for report panels and narrative blocks.

Demo

Soft variant

.ag-card--soft — flatter nest for nested content.

Demo

With action

Pair with primary or ghost buttons.

View buttons

Stat / KPI tiles

.ag-stat-grid + .ag-stat · add .ag-stat--data for cyan accent bar

Demo Locator CTR 2.4% vs 14-day median
Demo Directions 186 GetDirections clicks
Demo QR scans 41 in-store cluster
Demo Gate status Learning ≥$150 or 3 live days

Badge / status pills

PASS · HOLD · KILL · stub · info · accent

PASS HOLD KILL stub info accent success warn danger

Tables

Wrap in .ag-table-wrap. Dense or comfortable density.

Comfortable · .ag-table--comfortable

Angle Campaign Status
Seltzer switch Demo ss_a_seltzer PASS
Awards claim Demo — KILL
City pilot Demo ss_pilot HOLD

Dense · .ag-table--dense

Cluster UTM content Metric Flag
treasure_valley utm_content=tv_core Locator stub
san_diego_nc utm_content=sd_nc Directions live

Callouts / alerts

.ag-callout + --info|--success|--warn|--danger

i

Info. Primary CTA remains Find Near You — no purchase events in the stack.

✓

Success. Angle cleared review gates. Ready for calendar slotting.

!

Hold. Spend gate not yet met — wait for 3 live days or $150 before kill/scale.

×

Kill. Hard fail — do not ship this angle or claim set.

Buttons

.ag-btn--primary · .ag-btn--ghost · optional .ag-btn--sm

Small primary Small ghost

Code / mono chips (UTMs)

.ag-mono · .ag-code-chip · .ag-code-block

Inline: utm_source=meta and utm_campaign=ss_<angle>

utm_source=meta&utm_medium=paid&utm_campaign=ss_a_seltzer&utm_content=tv_core

Empty state

.ag-empty with icon, title, body, optional CTA

No live metrics yet

Connect locator analytics after the first spend gate. This panel stays polished while data is stubbed.

Two-column layout

.ag-cols · .ag-cols--aside (stacks under 800px)

Demo

Main narrative

Wider column for strategy copy, week plans, or long tables. Use section headers above grids for rhythm.

Page shell reference

This page already demos topbar, container, sticky subnav, and footer.

<body class="agency">
  <header class="ag-topbar">…</header>
  <main class="ag-container ag-main">
    <header class="ag-hero">…</header>
    <nav class="ag-subnav">…</nav>
    <section class="ag-section">…</section>
  </main>
  <footer class="ag-footer">…</footer>
</body>