BBC.F · Foundations

Brand tokens. Set once. Honoured everywhere.

Colors, typography, gradients, voice, and logo rules. Every token has a stable ID. Use these directly when authoring HTML / CSS — they're the source of truth.

Colors · BBC.F.C.##

14 brand colors. Roles describe when (not what) to use each.

BBC.F.C.01 · gold

Primary accent · headlines on dark · stat numbers · CTA borders

#D4A03C

BBC.F.C.02 · amber

Secondary warmth · mid-gradient stop

#E8932A

BBC.F.C.03 · sunset

Energy · accent · gradient

#D46830

BBC.F.C.04 · ember

Depth · urgency · primary CTA button

#B8423A

BBC.F.C.05 · berry

Gradient anchor · sophistication

#8A2A3A

BBC.F.C.06 · night

Dark surface · card backgrounds

#1A1412

BBC.F.C.07 · deep

Page background · maximum drama

#0A0806

BBC.F.C.08 · white

Text on dark · light surfaces

#FAF6F0

BBC.F.C.09 · cream

Light page backgrounds

#F2EBE0

BBC.F.C.10 · sand

Subtle section backgrounds

#E8DFD2

BBC.F.C.11 · stone

Secondary text · muted labels · body on dark

#B8AFA2

BBC.F.C.12 · charcoal

Dark text on light backgrounds

#3A3632

BBC.F.C.13 · dusk

Sky blue · ONLY for backgrounds and photography

#1B2A4A

BBC.F.C.14 · sky

Sky blue · ONLY for backgrounds and photography

#2C4A7C

Gradients · BBC.F.G.##

3 gradients — same warm palette, three angles + uses.

BBC.F.G.01 · warm Headline accent words · stat numbers · primary gradient buttons · tags

linear-gradient(90deg, #D4A03C, #E8932A, #D46830, #B8423A)

BBC.F.G.02 · warm-diag Diagonal variant for hero CTA buttons

linear-gradient(135deg, #D4A03C, #E8932A, #D46830, #B8423A)

BBC.F.G.03 · warm-section Full-bleed warm section backgrounds (Manifesto warm, BigStatBand, divide breaks)

linear-gradient(-25deg, #e6c487 7%, #e4762f 25%, #db4c05 49%, #940300 82%, #4d0000 99%)

Typography · BBC.F.T.##

5 font families. The voice carries through — every pairing is intentional.

BBC.F.T.01 · League Spartan weights: 400, 700, 800, 900 Bold display · cover slides · hero headlines · accent words · stat numbers. ALWAYS UPPERCASE.

WE BUILD SYSTEMS

BBC.F.T.02 · Cormorant Garamond weights: 400, 500, 600 · italic Section titles · pull quotes · italic accent words inside League Spartan headlines.

make them inevitable.

BBC.F.T.03 · DM Sans weights: 300, 400, 500, 600, 700, 900 Body text · UI elements · paragraphs · captions · buttons · navigation.

From chaos to system. From guesswork to growth.

BBC.F.T.04 · Caveat weights: 400, 700 Personal highlights · storytelling moments · signature callouts · handwritten feel.

for the team at — handwritten

BBC.F.T.05 · DM Mono weights: 400, 500 Code · labels · technical text · hex values · TOC numbering.

BBC.B.001 · LETTER-SPACING 0.18em

Voice · BBC.F.V.01

How BBC sounds, in one tagline + one promise + a tone vector.

Tagline

From chaos to system. From guesswork to growth.

Promise

Choose to bee ahead.

Tone

Confident · warm · precise · occasionally poetic. Never loud.

Logos · BBC.F.L.##

Rule: Logo on every first and last slide/page of any deck or presentation.

BBC.F.L.01

horizontal-color

Primary · use on dark backgrounds

BBC.F.L.02

horizontal-alt

Alternate horizontal