BBC Design System · Index
A numbered, indexed reference library of every reusable block, asset, template, and pattern in the BBC Golden Hour visual system. Built so any team member — or AI assistant — can build presentations, proposals, audits, reports, case studies, and emailers in perfect brand style.
Every block has a code like 02-A (Heroes, variant A) or 09-C (Footers, variant C). Use them when briefing: "Use 02-A for the cover, 06-B for the case study."
Open any reference page, click the copy button on a block, paste into your project. Fork document templates as starting files.
Always link tokens.css. Never hardcode colors, gradients, or font stacks. Update the token file once, every output updates downstream.
00 — 11 · Reference Pages
Twelve numbered categories. Each is a standalone reference page with copy-ready HTML for every variant.
Color swatches, gradient palette, typography scale, spacing, motion, shadow, border-radius tokens.
Top navigation patterns: minimal dark, glass overlay, cream/light, announcement bar, mega-menu, mobile burger.
10+ hero patterns: text-left over plate, text-right, centered, split-screen, character-mascot, big-statement, video.
Stats bands, capability cards, services grids, awards, link cards, founders, quote/editorial, callout.
Full-bleed quote slides, single-statement breaks, gradient transitions, chapter markers — used between dense sections to reduce monotony.
Glass-dark, solid-dark with gold border, warm-gradient, cream-bordered, image-card, profile-card, metric-card.
Stat counters, comparison tables, before/after splits, bar/progress visualisations, metric tiles, KPI grids.
Article preview cards, pull-quotes, image+caption (editorial), timeline, FAQ accordion, tabs, testimonial grids.
Contact forms (light + dark), newsletter inline, multi-step questionnaire, lead-gen, brief intake, survey patterns.
4-column site footer, compact mini-footer, contact-pill footer, light-cream footer, signature block (for emailers).
Button variants, full-width CTA banners, sticky CTAs, link cards, contact pills, action strips.
Six categories, three variants each plus the original Proposal v2. Each category includes a classic version, an alternate take, and one wild experiment that pushes format itself.
Glass-panel covers, radial breakaways, photo-quote heroes, image-led pricing intros, team composites — the dramatic blocks the Pegasus proposal pioneered.
More hero / quote / divide breaks built on the verbatim Pegasus bbc-break system. Plates 02, 04, 05, 06, 09, 10, 11. Lifted CSS, new copy, no reinterpretation.
Single product hero with mockup, 3-up product grid, feature callouts, comparison matrix, ecosystem stack. For Thoga and other product launches.
21 variants across 6 layout modes. Section A: directional overlay. B: full-bleed atmospheric. C: abstract/illustrated. D: minimal dark. E: character + plate. F: social formats (1:1 square, 9:16 story). Copy HTML per variant.
All 55 plates rendered as full-bleed heroes. Zone classification drives gradient direction automatically. Copy any block directly.
Generated tool. Drops any image into a 6×4 grid, scores each cell by brightness variance, and flags safe text-zones (green) vs subject zones (red). Re-run the script to regenerate. No more guesswork on where text can go.
Asset Library
A browsable, searchable catalog of every asset in the BBC visual system. Click to copy filepaths, preview at full resolution, see usage notes per asset.
Live examples
The Pegasus proposal rendered as a live scrollable document. The block library as a full visual catalog. Reference these when building new documents.
Full BBC Golden Hour restyle of the canonical bumblebee_final source. Tabbed caps, portfolio grid, audit score, founders with team composite, 15-logo client wall on plate background.
All sections on raw plates (BBC 09, 03, BlackBG). Audit on BBC 09. Final CTA: BBC 12 right-zone grid, character visible on left, text in safe zone.
Correct plates per asset-usage.md. Glass cards on photographic backgrounds. Gradient stat numbers. Founders on cream with caricatures.
Tokens, fonts, grain applied — no hero plate, no BBC backgrounds. Kept for comparison.
Full-bleed sample proposal showing all blocks chained into a real document. 16 sections, scrollable. The reference build.
Every block rendered with its anchor ID, grouped by category. Use this when you want to see how a block actually looks before using it.
Machine-readable
Numbered, structured references. Say "use BBC.B.027 with plate BBC.P.04" and any tool knows exactly what to render. Drop a .json URL into Claude, Figma, or Bricks to onboard it instantly.
Every numbered item with type + summary. Drop this URL into any AI tool.
14 colors, 3 gradients, 5 fonts, voice, logo rules. The brand spec.
12 background plates with text-safe-zone metadata.
Full asset library — characters, team, logos, backgrounds — with paths and use cases.
~70 blocks with category, plate-compat, asset usage and live preview URLs.
Document playbooks — block sequences for proposals, decks, reports, emailers.
External + local doc URLs and AI prompt templates for Claude / Figma / Bricks.
Numbered reference index. Foundations, plates, assets, blocks, templates.
11 · Document Templates
Open, save-as, edit. Each template assembles blocks from the libraries above into a fully-working document in BBC brand style.
Cover · intro · scope · pricing · timeline · close. For client engagements.
Classic · Performance Data · WILD: The Verdict. Three variants.
Quarterly · Annual · WILD: The Cover Story. Three variants.
Narrative · Visual Portfolio · WILD: Before vs After Showdown.
Brief Intake · GTM Workshop · WILD: The Honest Interview.
Newsletter · Announcement · WILD: The Founder Letter.
Studio Intro · From the Founder · WILD: The Anti-Deck.
25-section visual showcase. The full pattern library, single page.
Reference Docs
All 12 background plates with text-zone overlays.
When & how to use every asset.
Palette logic & pairings.
Type scale, weights, kerning rules.
Reusable patterns & combinations.
How BBC writes and speaks.
Common mistakes to avoid.
Skill manifest for Claude / Code.
Reference Samples & Source Files
A flat index of every working file in the design system — useful when you want to jump straight to a source rather than navigate through cards. Files marked ● are live, ○ are frozen reference, ⊙ are scratch/sandbox.
This page. The hub.
25-section visual showcase / pattern library.
458 assets across 10 categories.
14 categories · ~50 components.
60+ headings · 25+ buttons.
55 plates with classified text-zone overlays.
Draw text zones on any plate. Saves to browser, export to clipboard.
25-section proposal template (current).
9-section proposal (legacy backup).
Authoritative 1920×1080 reference deck.
Authoritative 600px responsive emailer.
Bare 1920×1080 deck shell to fork from.
Bare responsive page shell to fork from.
Sandbox. Broken superhero section. Ignore.