Internal reference
Design System
Colours, type, and components used across the Patrol website. Every element below is rendered with the live classes — if a token changes, this page changes with it.
Color
Patrol Navy
#131f3b · primary brand
Navy Deep
#0b1426 · page banners
Navy Mid
#16264a · cards on dark
Patrol Blue
#31598a · icons, stats, accents
Patrol Yellow
#ffe900 · rules, primary buttons
Golden Yellow
#FFB81C · secondary accent
Page Background
#eef1f6 · light sections
Card Surface
#f6f8fc · content cards
Text Primary
#1b2230 · body copy
Accent Red
#be1e2d · not in brand guide — confirm
Typography
Oswald for headings, Acumin for body copy. Each sample below carries its live class name.
ds-h1-page
Page title
ds-banner-title
Banner title
ds-h1-section
Section heading
ds-h3
Card heading
Body & Supporting Text
ds-eyebrow
Small label above a heading
ds-lead
Introductory sentence that opens a page or section, set slightly larger than body copy.
ds-body
Standard paragraph text used for the bulk of page content across the site.
ds-caption
Smaller supporting text for file types, notes, and secondary detail.
Buttons
On navy backgrounds, use is-ghost for the secondary button.
Components & Patterns
ds-card-content
Standard content card — surface fill, blue left border, used for most grids across the site.
ds-payrow
Label on the left
Value
Label and value pairs — salary tables, service numbers.
ds-req-item
1
Numbered step or requirement.
ds-group
Group label
Divides long link lists into labelled sections.
Rules of Thumb
ds-nav needs wh-nav-links and ds-nav-link alongside it; the responsive rules come from the old Navbar's stylesheet, so don't delete that component without testing the header at mobile width first. (This is the hamburger menu that appears in mobile view)