BBC · Design System
BBC.R · References

Source docs. Prompt templates.

Canonical source files (tokens JSON, brand guides, plate guide, sample HTMLs) and ready-to-paste prompts for Claude, ChatGPT and other AI tools. Reference these when building outside this design system or onboarding a new tool.

Reference docs · 7

External + local URLs to canonical sources. Drop these into Claude's context for full brand fidelity.

BBC.R.01 bbc-brand-tokens.json
Canonical machine-readable design tokens. Colors, fonts, gradients, voice, logos. open →
BBC.R.02 Golden Hour brand guide
Full brand guide in the BBC Golden Hour visual language. open →
BBC.R.03 Plate guide (local)
Background inventory with text-safe-zone overlays — the canonical visual reference for plates. open →
BBC.R.04 Pegasus proposal sample
Full sample proposal HTML — the source structure I ported into the block library. open →
BBC.R.05 Block library (live)
Every block + variant rendered with anchor IDs. open →
BBC.R.06 BBC Intro Emailer (CC VS Code)
12-slide company emailer — original deck patterns. Local sample. open →
BBC.R.07 BBC Deck (intro slides)
1920×1080 deck slides as Figma exports. open →

Prompt templates · 3

Copy-paste-able prompts for AI tools. Replace the angle-bracket placeholders with your IDs / data.

BBC.PR.01 Build a section with a numbered block ID
Build a section in BBC brand style using block <BBC.B.XXX>.
Use the spec from https://studio.thebumblebee.in/design-system/blocks.json
and pair it with plate <BBC.P.XX> from /design-system/plates.json.

Content for the block:
{ "title": "...", "items": [...] }

Output a single self-contained HTML snippet with inline styles (no external
CSS imports). Use BBC tokens directly — gold #D4A03C, ember #B8423A, etc.
BBC.PR.02 Compose a full template
Compose a BBC <document type — proposal / audit / report / case study / emailer>
using the block sequence from template <BBC.T.XX> in
https://studio.thebumblebee.in/design-system/templates.json.

Inject this content into each block:
[ paste your data shape per block here ]

Output a single self-contained HTML file linking the BBC web fonts and using
the brand tokens from /design-system/foundations.json.
BBC.PR.03 Pick the right plate for my section
My section has text on the <left | right | centered>. Pick a plate from
https://studio.thebumblebee.in/design-system/plates.json whose safeZone
matches. List 3 candidates with their IDs, then recommend one with reason.

For AI tools

The fastest way to give Claude / ChatGPT / a code agent the full BBC system in context: pass the manifest URL.

Use the BBC Design System at https://studio.thebumblebee.in/design-system/manifest.json
to compose the next document. Cross-reference plates and blocks by their IDs.
The brand promise is "Choose to bee ahead." Tone: confident, warm, precise.