--- name: bbc-design-system description: BBC Golden Hour design system for The Bumblebee Branding Company. ALWAYS use this skill whenever the user asks for ANY visual output — HTML page, email, deck, slide, presentation, document, proposal, landing page, component, dashboard, poster, social card, or anything that could carry BBC branding. Trigger even if the user does not say "BBC" explicitly, as long as the work is being done for Sash, Bumblebee, BBC, Thoga, or any in-house product. Trigger for emailers, intro decks, client proposals, internal docs, brand assets, and any HTML artifact. Loads tokens, typography, components, voice, and reference samples so output matches BBC Golden Hour aesthetic ("sunset through dust") instead of generic AI styling. Do not skip this skill if a task involves visual or written brand output — its rules and tokens are mandatory for brand consistency. --- # BBC Golden Hour Design System The canonical brand system for The Bumblebee Branding Company (BBC). Use this skill for every visual or written deliverable carrying BBC branding. > **Core idea**: "Sunset through dust." Cinematic warmth. Confident, never loud. Brand. Market. Scale. Repeat. --- ## When this skill triggers Use this skill for any output that involves: - HTML pages, emailers, decks, slides, presentations - Client proposals, internal docs, one-pagers, reports - Components, landing pages, dashboards, forms - Social cards, posters, badges, business cards - Any artifact that could carry the BBC mark If the task is for Sash, Bumblebee, BBC, or any in-house product (Thoga, AdmissionOS, Omni5, etc.), default to this system unless explicitly told otherwise. --- ## The non-negotiable rules These six rules are how BBC output stops looking like generic AI work. 1. **Tokens only.** Never invent a hex code, font stack, or radius. Pull from `tokens.json` / `tokens.css`. Use CSS variables, not hardcoded values. 2. **Three typefaces, three jobs.** League Spartan for display headlines (uppercase, weight 900). DM Sans for body and UI. Cormorant Garamond italic for elegant moments. Caveat is a rare flourish. Never use system fonts as the primary face. 3. **Gradient text-clip on accent words.** Headlines lead with white/cream, accent words use `var(--gradient-bumblebee)` clipped to text. Never gradient an entire long sentence. 4. **Grain overlay on every dark surface.** `mix-blend-mode:overlay; opacity:.20` over a dark background. Without grain, dark surfaces look flat and sterile. 5. **Logo on first and last frame.** Every deck, emailer, document. No exceptions. Pick the right variant from `assets/logo/`. 6. **ASSETS, NEVER SOLID COLORS for hero frames.** Every cover/hero frame must use a photographic background plate from `assets/backgrounds/` (not a solid color), and at least one foreground asset (character art, team caricature, or illustration). The "asset-density" rule: background plate + foreground asset + grain + logo on every hero. See `references/asset-usage.md` for the full mapping. --- ## Default workflow When the user asks for a visual deliverable: 1. **Read `tokens.json`** to confirm current colors, type scale, gradients 2. **Read `references/asset-usage.md`** FIRST — this tells you which background plate, character art, team caricatures, and logo variant to use. Do this *before* writing HTML. Asset choice drives layout choice. 3. **Pick the format**: responsive (default — emailer/web/doc) or fixed-canvas (1920×1080 deck only when explicitly asked) 4. **Pick the surface**: dark hero with photographic plate (`assets/backgrounds/BBC ##.png` — never solid color for hero), or light editorial (`--cream` for founders/note sections) 5. **Read other reference files** as needed: - `references/typography.md` for type-pairing rules - `references/color-system.md` for which colors go where - `references/component-patterns.md` for buttons, cards, stat blocks, glass panels - `references/voice-and-tone.md` for copywriting moments - `references/do-and-dont.md` for the things that get pushback 6. **Use a template** from `templates/` as scaffold instead of writing from blank 7. **Cross-check against `samples/`** — these are the production HTMLs the system is derived from --- ## File map ``` bbc-design-system/ ├── SKILL.md ← you are here ├── tokens.json ← machine-readable design tokens (read first) ├── tokens.css ← drop-in CSS variables + utility classes ├── references/ │ ├── asset-usage.md ← READ FIRST: which assets to use when (logo, bg, character, team) │ ├── typography.md ← type system + pairing rules │ ├── color-system.md ← when each color is used │ ├── component-patterns.md ← buttons, cards, stats, glass, dividers │ ├── voice-and-tone.md ← language rules + brand copy moments │ └── do-and-dont.md ← anti-patterns that get pushback ├── templates/ │ ├── responsive-page.html ← starter for web pages, emailers, proposals │ └── fixed-deck.html ← starter for 1920×1080 pixel-perfect decks ├── samples/ │ ├── bbc-deck-1920x1080.html ← reference: full agency deck │ └── bbc-emailer-responsive.html ← reference: responsive emailer └── assets/ ├── logo/ ← BBC logo, 6 variants ├── fonts/ ← Caveat, Cormorant Garamond, DM Sans (self-hosted fallback) ├── backgrounds/ ← BBC-treated background plates + textures ├── characters/ ← BBC superhero illustration assets ├── team/ ← team caricatures (founders, staff) ├── client-logos/ ← agency client logo wall └── grain/ ← grain.png — REQUIRED on dark surfaces ``` --- ## Format choice — when to use what | Asked for | Format | Template | |---|---|---| | Web page, emailer, proposal, doc, dashboard | Responsive (clamp, grid, mobile-first) | `templates/responsive-page.html` | | Investor deck, pitch deck, client deck for projection | Fixed 1920×1080 absolute-positioned | `templates/fixed-deck.html` | | Quick reference, internal note, anything <1 page | Responsive (light surface, no hero) | `templates/responsive-page.html` | **Default to responsive.** Fixed canvas only when the user says "deck", "slides", "presentation", "1920×1080", or "for projection." --- ## What "BBC look" means in one paragraph Dark page (`--deep` #0a0806 or `--night` #1A1412) overlaid with grain (`mix-blend-mode:overlay; opacity:.20`). League Spartan 900 uppercase headline in cream-white, with one or two accent words gradient-clipped through the bumblebee gradient (`#D4A03C → #E8932A → #D46830 → #B8423A → #8A2A3A`). DM Sans 300/400 body in `--white` or `--stone`. An eyebrow label above the headline in DM Sans 700 uppercase, 5–10px letter-spacing, often muted to 30–50% opacity. Glass cards (`backdrop-filter:blur(21px)`) for content blocks. Gradient hairlines (`border-image`) as section dividers. Logo bottom-center or top-left. Bottom-strip contact: `thebumblebee.in | ahead@thebumblebee.in`. That's the recipe. Everything else is variation on it. --- ## Anti-patterns — instant rejection The user has flagged these repeatedly. Avoid them at all costs. Full list in `references/do-and-dont.md`. - Generic Tailwind blue/purple gradient (`from-blue-500 to-purple-600`) - All-caps body text (uppercase is for display only) - Centered everything — BBC layout uses left-aligned content blocks with right-side hero imagery - Emoji in headlines or as bullet markers - "Glassmorphism" without grain — looks like generic AI output - Stock photos in lieu of the BBC character/team art - Soft pastels, mint, lavender — BBC is warm gold-to-plum, never cool - Lorem ipsum — pull copy from `references/voice-and-tone.md` --- ## Quick start (for Claude Code) ```bash # 1. Drop the skill folder into your project or ~/.claude/skills/ # 2. In any prompt, say: "Build me a BBC proposal page" # 3. Claude will auto-read SKILL.md, load tokens, and output BBC-styled HTML ``` For Claude.ai chats, this skill is uploaded once via the skill installer and triggers across all conversations. --- ## Voice cheat-sheet - **Tagline**: From chaos to system. From guesswork to growth. - **Promise**: Choose to bee ahead. - **Tone**: Confident, warm, precise, occasionally poetic. Never loud. - **Contact**: thebumblebee.in | ahead@thebumblebee.in - **Founded**: 2017, Chennai - **Founders**: Achinthya Suresh (Co-Founder & Growth Marketing Strategist), Sastharam Ravendran (Co-Founder & Brand Strategist) Always end decks/emailers with the contact strip in DM Sans 400, 2px letter-spacing, opacity 0.3–0.5, mix-blend-mode plus-lighter on dark.