BBC · Design System
BBC.B · Blocks

65 blocks, every variant numbered.

Every block has an ID like BBC.B.027 and a deep-link to its live rendered example. Cross-references to compatible plates and required assets are listed inline. Fetch /blocks.json for the full catalog.

Openers · 4

First page. Sets the temperature for everything that follows.

BBC.B.001

Cover · 2-line dark

Default cover. Photo bg + right-side text panel with 2-line title (main + italic accent).

Use: Standard proposal cover.

plates: BBC.P.03

view live → #cover-2line
BBC.B.002

Cover · 3-line ranger

Figure-mode cover with Bumblebee Ranger on left + 3-line title (LAUNCHING / Pegasus / LEARNING CENTRE).

Use: Cinematic launch covers.

assets: BBC.A.C.01

view live → #cover-3line
BBC.B.003

Cover · light cream

Light cream bg variant. Used for soft brand pitches (sprints, foundations work).

Use: Strategy / foundations / sprint pitches.

plates: BBC.P.11

view live → #cover-light
BBC.B.004

Cover · alt figure

Alt 3-line title with Ranger stance figure on warm gradient.

Use: Different cover energy when not the headline launch.

assets: BBC.A.C.02

view live → #cover-alt

Context · 4

Frame the problem. What's at stake. What we already see.

BBC.B.010

Intro Grid · 2-card

Two-column 'have / missing' or 'what / why' grid with bulleted rows.

Use: Frame the problem in two opposing buckets.

view live → #intro-2
BBC.B.011

Intro Grid · 3-card

Three-column variant — 'What / How / Why' or similar trio.

Use: When the framing splits cleanly into 3 angles.

view live → #intro-3
BBC.B.012

Observations

3-column numbered cards (01/02/03) with eyebrow + title + body.

Use: Initial observations / 'what we noticed' section.

view live → #observations
BBC.B.013

Why Grid

3-column cards with big ghosted number + heading + body.

Use: 'Why us' / reasoning blocks.

Strategy · 16

Approach, philosophy, the people behind it. Earn trust.

BBC.B.020

Pillars · 3-col dark

Strategy pillars on dark bg, 3 cards with gradient top edge.

Use: 3 strategic commitments.

view live → #pillars-3
BBC.B.021

Pillars · 4-col dark

4-card variant for compressed / more steps.

Use: 4 commitments / steps.

view live → #pillars-4
BBC.B.022

Pillars · light cream

Cream bg variant for softer pitches.

Use: Sprint / foundations pillars.

view live → #pillars-light
BBC.B.023

Pillars · warm gradient

Glass cards on full warm-gradient bg.

Use: Vibrant strategy moment.

view live → #pillars-warm
BBC.B.024

Pillars · color blocks

Each pillar a different brand color (gold / sunset / ember / berry). Most signature variant.

Use: Showcase 4 stages with high-contrast color.

view live → #pillars-colors
BBC.B.025

Process Steps · 7-stage

Glass-card stack on warm-gradient photo bg (deck S5 pattern).

Use: Full 7-stage power-play methodology.

plates: BBC.P.09

view live → #process-7
BBC.B.026

Process Steps · 5-stage

Same pattern, fewer steps — over BBC.P.10 (eye, text-left).

Use: Sprint / shorter process.

plates: BBC.P.10

view live → #process-5
BBC.B.027

Founders

3-col layout (text-left / photo-center / text-right) on light cream bg. Ports BBC deck slide 4.

Use: Co-founder bios + composite photo.

assets: BBC.A.X.01

view live → #founders
BBC.B.028

Stats Hero

Stats grid + character figure on right (ranger stance). Photo bg.

Use: Big company-level stats with character.

assets: BBC.A.C.02

view live → #stats-hero
BBC.B.029

Stats Strip · dark

Compact 4-stat horizontal bar.

Use: Mid-section stats inserted between content.

view live → #stats-strip
BBC.B.030

Stats Strip · warm

Same compact stats strip on warm gradient.

Use: Vibrant stats moment.

view live → #stats-strip-warm
BBC.B.031

Service Grid

8-cell capabilities matrix with icons.

Use: 'What we do' overview.

view live → #services
BBC.B.032

Video Block

16:9 thumbnail with play button + caption.

Use: Founder video / launch video embed.

view live → #video
BBC.B.033

Awards

Hero image + 4 award cards (deck S6 pattern).

Use: Recognition / press section.

assets: BBC.A.X.08, BBC.A.P.01, BBC.A.P.02, BBC.A.P.05, BBC.A.P.06

view live → #awards
BBC.B.034

Big Stat Band · 3-stat

Three giant numbers on warm-gradient bg.

Use: Compounding numbers moment.

view live → #big-stat-trio
BBC.B.035

Big Stat Band · 1-stat

Single dominant stat on warm-gradient bg.

Use: One number that does all the talking.

view live → #big-stat-single

Cinematic Breaks · 8

Pause sections. Reset visual rhythm. Earn the next chapter.

BBC.B.040

Hero Break · hands

Cinematic full-bleed photo with text on left.

Use: Pause / chapter shift.

view live → #hero-break-a
BBC.B.041

Hero Break · ant

BBC.P.04 (ant carrying boulder) — labour / weight metaphor.

Use: Persistence / labour theme break.

plates: BBC.P.04

view live → #hero-break-b
BBC.B.042

Hero Break · rays

Light-rays bg for closing cinematic moments.

Use: Aspirational / triumph break.

view live → #hero-break-c
BBC.B.043

Quote Break · texture

Centered cinematic quote on textured noise bg.

Use: Manifesto-style pause.

view live → #quote-break-a
BBC.B.044

Quote Break · sunset

Same pattern over BBC.P.03 (sunset mountain).

Use: Closing-side quote moment.

plates: BBC.P.03

view live → #quote-break-b
BBC.B.045

Manifesto · dark

Massive italic statement on deep bg.

Use: Brand promise / belief statement.

view live → #manifesto-dark
BBC.B.046

Manifesto · warm

Same statement on warm gradient.

Use: Vibrant belief moment.

view live → #manifesto-warm
BBC.B.047

Divide Break

Pure warm gradient band — no photo, no text.

Use: Visual rhythm separator.

view live → #divide-break

Plan · 4

Timeline, deliverables, print. Mechanics of the engagement.

BBC.B.050

Timeline · 7-row full

Vertical timeline with date / spine / card structure.

Use: 7-week launch timeline.

view live → #timeline-full
BBC.B.051

Timeline · 3-row mini

Sprint format — 3 milestones.

Use: Short sprint plan.

view live → #timeline-mini
BBC.B.052

Deliverables

2-col grid with icon + title + body + qty.

Use: Itemized deliverable list.

view live → #deliverables
BBC.B.053

Print Grid

4-col centered cards with quantities.

Use: Print / OOH / packaging items.

view live → #print-grid

Investment · 5

Money. Make it legible.

BBC.B.060

Pricing · 2-card

Hand-off vs end-to-end. Featured tag on second card.

Use: Standard 2-option pricing.

view live → #pricing-2
BBC.B.061

Pricing · 3-card

Sprint / Launch (Recommended) / Annual.

Use: Tiered engagement pricing.

view live → #pricing-3
BBC.B.062

Budget Tiers

3-tier ad-spend with 'Recommended' pill.

Use: Ad-spend recommendations.

view live → #budget-tiers
BBC.B.063

Add-Ons

3-column modular extras with prices.

Use: Optional line-items / upsells.

view live → #add-ons
BBC.B.064

Retainer

Card with head (price) + 3 service columns.

Use: Post-launch monthly engagement options.

view live → #retainer

Conversion · 13

Proof. Funnel that turns interest into commitment.

BBC.B.070

Funnel · 5-step

Horizontal step track with arrows + recommended highlight.

Use: Lead → enrolment funnel.

view live → #funnel-5
BBC.B.071

Funnel · 3-step

Compressed 3-step variant.

Use: High-level funnel.

view live → #funnel-3
BBC.B.072

Case Study · compact

Header + 4-stat grid.

Use: Quick comparable proof point.

view live → #case-study
BBC.B.073

Case Study · detailed

Glass card on warm gradient. Logo + tag + Challenge/What/Result + 3 metrics. Deck S8 port.

Use: Full case study with structured cols.

view live → #case-detailed
BBC.B.074

Testimonials · 2-up

Two quote cards with initials-in-circle.

Use: Two client quotes side-by-side.

view live → #testimonials-2
BBC.B.075

Testimonials · single

Centered hero quote.

Use: One marquee client quote.

view live → #testimonial-1
BBC.B.076

Comparison Table

Us vs typical agency feature comparison.

Use: Differentiation table.

view live → #comparison
BBC.B.077

Brand Work · feature

Mixed-size mockup grid (1 big + 4 small).

Use: Selected work showcase.

view live → #brand-work-feature
BBC.B.078

Brand Work · uniform

Equal cards across surfaces (3-col).

Use: Past-work gallery.

view live → #brand-work-uniform
BBC.B.079

Logo Wall · clients warm

12-logo grid on sunset bg.

Use: 'Brands that chose growth.'

view live → #logo-wall-warm
BBC.B.080

Logo Wall · clients dark

7-logo strip on deep bg.

Use: Compact client strip.

view live → #logo-wall-dark
BBC.B.081

Logo Wall · partners

Press / partner strip with dark cells.

Use: 'Featured in / Recognized by.'

view live → #logo-wall-partners
BBC.B.082

Brands Grid (33)

30-logo grid in 6×5 — deck S9 port.

Use: '100+ brands across every sector.'

view live → #brands-grid

Closers · 11

What to do next. Who's behind it. Last word.

BBC.B.090

Client Asks

What we'll need from you — 6-item checklist with timing.

Use: Set client expectations.

view live → #client-asks
BBC.B.091

Next Steps · 3 dark

3 numbered steps with timing on dark night bg.

Use: Standard close.

view live → #next-steps-3
BBC.B.092

Next Steps · 4 dark

4-step variant.

Use: More granular close.

view live → #next-steps-4
BBC.B.093

Next Steps · 3 warm

Glass cards on warm gradient.

Use: Vibrant close.

view live → #next-steps-warm
BBC.B.094

Team · composite

Centered intro + full-bleed caricature composite.

Use: 'The people who will make this happen.'

assets: BBC.A.T.99

BBC.B.095

Team Grid

Individual member cards with caricature portraits.

Use: Named team with roles.

view live → #team-grid
BBC.B.096

FAQ

Q01-Q05 list with mono numbering + italic question + body.

Use: Pre-empted questions.

BBC.B.097

CTA · dark

Centered headline + gradient pill button.

Use: Standard CTA.

BBC.B.098

CTA · warm

Full warm-gradient bg + cream outline button.

Use: High-energy close.

view live → #cta-warm
BBC.B.099

Link Cards

Cream resource link cards (Our works / Case studies / Deck).

Use: Resource menu.

view live → #link-cards
BBC.B.100

Contact

Pills + address + social — deck S12 port.

Use: Full contact section.

view live → #contact