One sheet, every FivePaths microsite.

Tokens, type, and the two dozen components the product marketing sites actually use — hosted once, versioned, and written so a dark band is a token remap rather than a second set of rules.

See the components Read base.css

/* dark bands remap tokens; components adapt */
.on-dark {
  --fp-bg: var(--fp-board);
  --fp-ink: var(--fp-board-ink);
  --fp-accent: var(--fp-board-accent);
}

Follows prefers-color-scheme, or pin it per site
Every pairing clears WCAG AA
Two hues, each with exactly one job

Foundations

Tokens

Every colour in the system is a custom property. Components never name a hex value, which is what lets a dark band re-point the palette and have the rest follow.

Neutrals

--fp-bg
--fp-bg-alt
--fp-ink
--fp-ink-soft
--fp-ink-mute
--fp-rule

Backgrounds, body text, quiet text, hairlines.

The two hues

--fp-amber · fill only
--fp-accent · text accent
--fp-bronze · amber as text
--fp-amber-wash

Amber fills; teal carries links, tags, ticks, focus rings.

Board (scheme-independent dark)

--fp-board-deep
--fp-board
--fp-board-2
--fp-board-line
--fp-board-accent

Heroes, CTA bands, footers, code blocks — identical in both schemes.

Route blips

--fp-route-blue
--fp-route-green
--fp-route-red
--fp-route-orange
--fp-route-purple

Data only — route badges, series keys. Never chrome.

Buttons

Bare .btn is the amber primary. Everything else is one modifier, and none of them need a dark-band variant.

.btn .btn-ink .btn-teal .btn-ghost .btn-sm

The same five on a dark ground, unchanged in the markup:

.btn .btn-ink .btn-teal .btn-ghost .btn-sm

Components

Cards, steps, feature rows, split panels, checklists, screenshots.

.card-grid / .card / .card-link

<div class="card-grid"> <a class="card card-link">…

A linked card

The whole surface is the link; the affordance sits at the bottom in teal.

Follow it →

Eyebrow

A plain card

Same surface, no link. On .section-alt it picks up a hairline shadow.

Third card

The grid is auto-fit by default; .cols-3 and .cols-4 pin a count once there is room.

.steps

<ol class="steps"><li>… — or divs with class="step"

First
A rule, a mono numeral in teal, and the copy. Quiet enough to sit next to a button without competing.
Second
The counter is generated, so reordering the markup renumbers the steps.
Third
Works on <li> or on .step elements.

.feature-row + .ticks

Copy beside media

Two equal columns by default; .uneven makes it 5/7 and .flip puts the media second on wide screens only.

Metro-stop dots are drawn in CSS, not a glyph
.checks swaps them for a tick where the list means "verified"
Stacks to one column below 56rem

.ticks.checks — conformance, not wayfinding
Same spacing, same teal, different mark
Pick one per site and stay with it

.split / .split-panel

On the page ground

A bordered panel for an either/or choice.

Ghost button

With .on-dark

One class. The border, the ticks, the buttons and the focus ring all re-point themselves.

No override rules behind this

Amber button

.proof — the one place amber is allowed to be text, because on the board it lands at 10:1.

v1 · cdn.fivepaths.com

.cta-band closes the page.

Centred, dark, and the last thing before the footer.

Primary ask Secondary

Fine print sits under the buttons in .fine.