FivePaths/microsite

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. v2 holds all of it to WCAG AAA.

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 the reader picks with the toggle
  • Every pairing clears WCAG AAA on its least favourable ground
  • Two hues, each with exactly one job

Access

v2 is the sheet held to WCAG AAA. Most of that asks nothing of the page: every text pairing clears 7:1, standalone controls present a 44px target, and running text caps near 70 characters, all in the sheet itself. Three pieces need the page's cooperation, and this page carries all three.

.theme-toggle

<button class="theme-toggle">, live in this page's header

WCAG 1.4.8 asks that the reader be able to choose their own colours. The sheet follows the operating system on its own; the toggle is the reader's override, stored per site. It needs two small scripts: one in <head> that replays the stored choice before first paint, one at the end of <body> that drives the button. This page's source is the working example of both.

.visually-hidden

<span class="visually-hidden"> (opens in a new tab)</span>

Text for assistive technology only. A link that opens a new tab says so inside the link, where a screen reader announces it and the layout never sees it: the WCAG quick reference.

In plain language

a summary in common words, one per page (WCAG 3.1.5)

This page shows the styles that FivePaths websites share. The styles live in one file, called base.css. The page shows each part: the colours, the buttons, the cards, and the text. Under each part is the code that makes it. Copy the code onto your own page and it will look the same. The styles are made so everyone can read them: the text is dark enough to see, the lines are short enough to follow, and the buttons are big enough to press.

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"

  1. First

    A rule, a mono numeral in teal, and the copy. Quiet enough to sit next to a button without competing.

  2. Second

    The counter is generated, so reordering the markup renumbers the steps.

  3. 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.

v2 · 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.