Style guide – PEP ICD Family

01 · Palette theme.json → settings.color.palette

--carbon #171717 Dark ground · night acts
--carbon-raised #1f1f1f Raised dark step (credo, footer)
--paper #ffffff Light ground · day act
--paper-dim #f6f6f6 Bone step (proof, intel)
--voltage #4db69b ICD Energy Managers · group accent
--signal #f0523d PEP Energy
--steel #6285b4 PEP-ICD
--current #235696 Cumbria Utilities

02 · Typography Hanken Grotesk 200/500 · variable body · titles in Name Case

.display / --text-hero

Empowering

.display / --text-h2

Section heading

.display / --text-h3

Card & row heading

Name Case — h1–h4 / .display / .menu-link

An entirely integrated approach to energy cost mitigation

Every word of a title is capitalised via text-transform: capitalize — author copy in sentence case and the theme applies the casing. Tracked-caps utility voices (eyebrows, labels, tickers) are exempt and keep their own transform.

.eyebrow

The PEP ICD Family

body / --text-lead

Lead paragraph — Hanken Grotesk, dimmed ink, 58ch max measure.

body / --text-body

Body copy — Hanken Grotesk at 15–17px with 1.6–1.75 line height. All verbatim client copy renders in this role.

--font-utility

03 JUL 2026 · TICKER & DATA VOICE

03 · Buttons .btn + size + tone — one template part

Large outline Small outline Small solid Ghost (header)

04 · Bias chips taxonomy: market_bias

BULLISHNEUTRAL to BULLISHNEUTRALNEUTRAL to BEARISHBEARISH

05 · The tribar brand mark — favicon, preloader, scene epicentre

06 · Imagery graded photography · .duotone for swatches

07 · Index rows the universal list pattern — services, reports, desks, docs

08 · Stat options repeater + GSAP counter · #2c7d67 on light grounds

35,000+

employees at our largest client — our smallest has 37

09 · The band field pepicd_band_field() — one motif, three treatments

Filled — dark scenes (family, profiles)

.field-lines — ambient backdrops

.field-lines on paper (market intel)

10 · Rail segments family progress rail · profile family nav · hero register ticks

11 · Company identities pepicd_company_epithet() — accent · spine · count · epithet

01

ICD Energy Managers

02

PEP Energy

03

PEP-ICD

04

Cumbria Utilities

12 · Tonal acts home-page grounds — night · dawn · day · night

One dawn boundary (family → services), gentle paper/bone steps through the day act, and the dark ticker band bridging back into the footer. Never alternate full-contrast grounds section by section.