BBC · Typography Matrix

H-MEGA · DISPLAY MEGA

Mega Display

The biggest headline available. 96px desktop, 48px mobile. Use sparingly — once per document. Hero covers, manifesto pages, breakaway statements.

H-Mega-Aplain · white

Choose to bee ahead.

SpecLeague Spartan 900 · 48–96px · -2px tracking · uppercase · color: white

H-Mega-Bgradient bumblebee

Choose to bee ahead.

SpecLeague Spartan 900 · gradient-bumblebee fill · uppercase · -2px tracking

H-Mega-Cgradient warm-rev

Choose to bee ahead.

SpecLeague Spartan 900 · gradient-warm-rev fill · uppercase

H-Mega-Dgradient sunset

Choose to bee ahead.

SpecLeague Spartan 900 · gradient-sunset (180°) fill · uppercase

H-Mega-Esolid gold

Choose to bee ahead.

SpecLeague Spartan 900 · solid color: #D4A03C (gold) · uppercase

H-HERO · HERO HEADLINES

Hero Headlines

One step down from Mega. 40–68px. Page heroes, section openers, document covers.

H-Hero-Awhite plain

Brand. Market. Scale.

SpecLeague Spartan 900 · 40–68px · -1px tracking · white

H-Hero-Bbumblebee gradient

Brand. Market. Scale.

Specgradient-bumblebee fill

H-Hero-Cwarm-rev gradient

Brand. Market. Scale.

Specgradient-warm-rev fill

H-Hero-Dwarm-rev gradient (long)

Your brand deserves a hero.

Spec3-word phrase, gradient fills entire phrase

H-Hero-Esolid amber

Brand. Market. Scale.

Specsolid color: #E8932A (amber)

H-Hero-Fsolid warm-text (peach)

Brand. Market. Scale.

Specsolid color: #FFC9A7 (warm-text)

H-H1 · PRIMARY HEADLINES

H1 — Primary

Standard page H1. 32–48px. Section heads inside documents, content pages, blog posts.

H-H1-A900 · white

From chaos to system.

SpecLeague Spartan 900 · 32–48px · uppercase · white

H-H1-B700 · white

From chaos to system.

SpecLeague Spartan 700 (lighter) · uppercase

H-H1-C500 · stencil weight

From chaos to system.

SpecLeague Spartan 500 · stencil weight · uppercase

H-H1-D300 · light/airy

From chaos to system.

SpecLeague Spartan 300 · light/airy · uppercase

H-H1-E900 · gradient bumblebee

From chaos to system.

Spec900 weight · gradient-bumblebee

H-H1-F500 · gradient warm-rev (Founded style)

Founded · 2017 · Chennai

Spec500 weight · gradient-warm-rev · this is the "Founded" slide style

H-H2 · SECTION HEADLINES

H2 — Section

Sub-section headlines inside content. 24–36px.

H-H2-A900 · white

Our seven-stage power-play.

SpecLeague Spartan 900 · 24–36px · uppercase

H-H2-B700 · white

Our seven-stage power-play.

SpecLeague Spartan 700

H-H2-C900 · gradient bumblebee

Our seven-stage power-play.

Spec900 weight · gradient-bumblebee

H-H2-D900 · solid gold

Our seven-stage power-play.

Specsolid color: #D4A03C

H-H3 · SUB-HEADLINES

H3 — Sub-Section

Card titles, service names, list headings. 18–24px.

H-H3-A700 · white

Build the brand foundation

SpecLeague Spartan 700 · 18–24px · uppercase · 0.5px tracking

H-H3-B700 · gold

Build the brand foundation

Spec700 weight · solid gold

H-H3-C700 · gradient bumblebee

Build the brand foundation

Spec700 weight · gradient-bumblebee

H-ELEGANT · CORMORANT ITALIC

Elegant — Cormorant Italic

Soft moments. Quotes, taglines, "bee" emphasis, magazine-style headlines. 32–60px.

H-Elegant-A500 italic · white

Choose to bee ahead.

SpecCormorant Garamond italic 500 · 32–52px · sentence case

H-Elegant-B600 italic · cream

Choose to bee ahead.

SpecCormorant italic 600 · cream

H-Elegant-C600 italic · gradient bumblebee

Choose to bee ahead.

Spec600 italic · gradient-bumblebee

H-Elegant-D600 italic · gold

Choose to bee ahead.

Spec600 italic · solid gold

H-SCRIPT · CAVEAT HANDWRITTEN

Script — Caveat

Handwritten accents. Used for asides, callouts, signatures, "we mean business" moments. Use sparingly — once per page.

H-Script-A700 · white

we mean business.

SpecCaveat 700 · 36–60px · sentence case · white

H-Script-B700 · gold

we mean business.

SpecCaveat 700 · gold

H-Script-C400 · cream (lighter)

— Sastharam & Achinthya

SpecCaveat 400 · cream · for signatures

H-Script-D700 · gradient bumblebee

we mean business.

Spec700 · gradient-bumblebee

H-MIXED · DISPLAY + ELEGANT

Mixed — Display + Elegant Italic Inline

Signature BBC pattern: League Spartan uppercase with one Cormorant italic word inserted for tonal contrast.

H-Mixed-Adisplay 900 + italic em · white

Choose to bee ahead.

SpecLeague Spartan 900 uppercase + Cormorant italic 600 inline (1.1em)

H-Mixed-Bdisplay 900 + italic em (gradient on em)

Choose to bee ahead.

Specdisplay white · italic em with gradient-bumblebee

H-Mixed-Cdisplay 900 + italic em (warm-rev on em)

Your brand deserves a hero.

Specdisplay white · italic em with gradient-warm-rev

H-Mixed-Ddisplay 900 + 2 italic words

A growth system, built for scale.

Spectwo italic em moments — second with gradient

H-PERWORD · PER-WORD COLORS

Per-Word Color Treatments

Each word gets its own color from the palette. Use for short phrases (3–4 words max). Powerful for taglines and big-statement breakaways.

H-Perword-A3 words · gold/amber/sunset

Brand. Market. Scale.

Specthree solid colors progressing through the palette · gold → amber → sunset

H-Perword-B3 words · gold/ember/maroon (warm-deep)

Brand. Market. Scale.

Specwarm progression · gold → ember → maroon

H-Perword-C4 words · alternating white + gradient

Brand. Market. Scale. Repeat.

Specplain · gradient · plain · gradient (alternating rhythm)

H-Perword-D3 words · white/gold/white

Your brand deserves.

Spechighlight middle word in solid gold · classic emphasis

H-Perword-E3 words · all gradient (different per word)

Brand. Market. Scale.

Specthree different gradients per word — bumblebee · warm · warm-rev

H-Perword-F2-line · top white, bottom gradient

We don't build brands.
We build systems.

Spectop line plain white · bottom line gradient-bumblebee · classic 2-line BBC structure

H-LIGHT · ON CREAM BACKGROUND

Light Variants

Same scale, recalibrated colors for cream/white surfaces. Use these for printed proposals, light pages, content pages.

H-Light-A900 · charcoal

From chaos to system.

SpecLeague Spartan 900 · solid #3A3632 (charcoal) · uppercase

H-Light-B900 · maroon

From chaos to system.

Spec900 · solid #940300 (maroon) · uppercase

H-Light-C900 · gradient bumblebee

From chaos to system.

Specgradient-bumblebee fill (works on cream)

H-Light-D900 · gradient warm-rev

Founded · 2017 · Chennai

Specgradient-warm-rev (works beautifully on cream)

H-Light-Eper-word · charcoal/maroon/gold

Brand. Market. Scale.

Spec3-color progression for cream backgrounds

H-Light-Fmixed · charcoal + italic gradient em

Choose to bee ahead.

Speccharcoal display · italic em with gradient · light-mode signature mix

H-Light-Gelegant · maroon italic

Choose to bee ahead.

SpecCormorant italic 600 · maroon · for soft moments on cream

H-WARM · ON WARM GRADIENT

On Warm Gradient

Headings designed for warm-rev / warm gradient backgrounds. Cream is the safest text color; gold and white work for emphasis.

H-Warm-A900 · cream

From chaos to system.

SpecLeague Spartan 900 · cream · the default on warm

H-Warm-B900 · white (max contrast)

From chaos to system.

Spec900 · pure white · max contrast on warm

H-Warm-C500 · cream (stencil)

Founded · 2017 · Chennai

Spec500 stencil · cream

H-Warm-Dmixed · cream + italic gold

Choose to bee ahead.

Speccream display · italic em in solid gold

H-Warm-Eelegant · cream italic

Two people. One idea.

SpecCormorant italic 600 · cream

BTN-GRAD · GRADIENT FILLS

Gradient Buttons

Primary CTAs use brand gradients. Bumblebee for default, warm-rev for high-energy moments, brand for inline links.

BTN-Grad-Abumblebee gradient

Specbackground: var(--grad-bumblebee) · color: white · 14px 24px · 8px radius

BTN-Grad-Bwarm-rev gradient

Specbackground: var(--grad-warm-rev) · color: white · for high-energy CTAs

BTN-SOLID · SOLID COLORS

Solid Buttons

Single-color fills for secondary actions and inverse contexts.

BTN-Solid-Asolid gold (on dark)

Specbackground: gold · color: deep · for affirmative on dark

BTN-Solid-Bsolid maroon (on cream)

Specbackground: maroon · color: cream · for primary on cream

BTN-Solid-Ccream (inverse on warm)

Specbackground: cream · color: maroon · 1px ember border

BTN-Solid-Dnight (on cream)

Specbackground: night · color: white · 1px subtle border

BTN-GHOST · GHOST / OUTLINE

Ghost Buttons

Transparent fills for secondary actions, "alternative" CTAs, and dual-action sections.

BTN-Ghost-Aghost light (on dark)

Spectransparent · 1px white-40% border · color: white

BTN-Ghost-Blink with arrow

Read the case study

Specno background · color: gold · auto arrow suffix · for inline links

BTN-GLASS · GLASS / BLUR

Glass Buttons

Backdrop-blur translucent buttons for hero overlays and warm-gradient backgrounds.

BTN-Glass-Aglass on warm

Specbackground: rgba(255,255,255,.12) · backdrop-filter: blur(20px) · 1px white-40% border

BTN-PILL · ROUNDED / PILL SHAPES

Pill Buttons

200px border-radius for friendly, conversational CTAs. Use for newsletters, contact strips, soft asks.

BTN-Pill-Apill · gradient bumblebee

Specborder-radius: 200px · gradient fill

BTN-Pill-Bpill · cream

Specborder-radius: 200px · cream fill

BTN-Pill-Cpill · warm-rev

Specborder-radius: 200px · warm-rev gradient · arrow

BTN-SIZES · SIZE SCALE

Sizes

Three sizes — small for inline rows, medium for default, large for hero CTAs.

BTN-Size-Ssmall · 10px 18px · 11px text

Specpadding: 10px 18px · font-size: 11px

BTN-Size-Mmedium · 14px 24px · 13px text (DEFAULT)

Specpadding: 14px 24px · font-size: 13px · this is the default

BTN-Size-Llarge · 18px 30px · 14px text

Specpadding: 18px 30px · font-size: 14px · for hero/landing CTAs

BTN-CREAM · ON CREAM BACKGROUND

Cream-Surface Buttons

Recalibrated buttons for cream/light backgrounds. Same patterns, different contrast logic.

BTN-Cream-Agradient on cream

Specgradients work as-is on cream

BTN-Cream-Bsolid maroon

Specmaroon background · cream text

BTN-Cream-Cghost dark on cream

Spectransparent · 1px black-30% border · color: charcoal

BTN-Cream-Dsolid night (max contrast)

Specnight background · white text · for max contrast actions

BTN-Cream-Elink · maroon

Read the case study

Specmaroon · auto arrow · for inline links on cream