Style guide
The system, laid out
Tokens, type, and every reusable component. Each specimen maps to a template part or block in the WordPress theme.
01 · Palette theme.json → settings.color.palette
-
--carbon#171717Dark ground -
--carbon-raised#1f1f1fRaised dark panels -
--voltage#4db69bGroup accent (ICD teal) -
--current#235696Deep blue (tribar facet) -
--steel#6285b4Steel blue (tribar facet) -
--paper#ffffffLight ground -
--paper-dim#f6f6f6Raised light panels -
--signal#f0523dPEP Energy accent (scoped)
02 · Typography Ubuntu 300/500 · Open Sans
.display / --text-heroEmpowering
.display / --text-h2Section heading
.display / --text-h3Card & row heading
.eyebrowThe PEP ICD Family
body / --text-leadLead paragraph — Open Sans, dimmed ink, 58ch max measure.
body / --text-bodyBody copy — Open Sans at 15–17px with 1.6–1.75 line height. All verbatim client copy renders in this role.
--font-utility03 JUL 2026 · TICKER & DATA VOICE
03 · Buttons .btn + size + tone — one template part
04 · Bias chips taxonomy: market_bias
BULLISHNEUTRAL to BULLISHNEUTRALNEUTRAL to BEARISHBEARISH
05 · The tribar brand mark — favicon, preloader, section motif
06 · Imagery graded photography · .duotone for swatches
07 · Index rows the universal list pattern — services, reports, desks, docs
08 · Stat options repeater + GSAP counter
35,000+
employees at our largest client — our smallest has 37