# Component Patterns — BBC Golden Hour Production-tested patterns from `bbc-deck-v2.html` and `emailer-modern.html`. Copy these, don't reinvent. ## 1. Eyebrow + headline + lede The default content block. Almost every section opens this way. ```html

How we started

We asked one question too many times.

The lede paragraph. One sentence, two at most. Sets up the rest of the section.

``` ## 2. Stat block (numbers grid) The 100+, 20+, 300%, 200% pattern from the deck. ```html

100+

Clients worldwide

``` Rules: - Stats always have a gradient-bordered top divider - Number uses `--gradient-bumblebee` text-clip - Number weight 500 (League Spartan), label DM Sans 400 uppercase ## 3. Glass card (dark surface) For content blocks on dark/photographic backgrounds: ```html

Stage 01 · Discovery

Card body copy goes here.

``` Rules: - Dark glass: `rgba(255,255,255,.12)` bg, `rgba(255,255,255,.85)` border, `blur(21px)` - Light glass: `rgba(255,255,255,.4)` bg, solid `--white` border, same blur - Always `border-radius: var(--r-btn)` (10px) ## 4. Buttons Primary, urgent, hero, secondary — pick one per section. ```html Get the deck Book the call Learn more ``` Hierarchy: - `bbc-btn-gradient` — hero CTA (one per page max) - `bbc-btn-ember` — solid urgent (e.g., "Book a call") - `bbc-btn-gold` — primary action (gold→amber gradient, black text) - `bbc-btn-outline` — secondary, on dark - `bbc-btn-outline-light` — secondary, on light Padding `14px 28px`, radius 10px, transform on hover, no harsh shadows. ## 5. Gradient divider bar The thin gradient line between sections: ```html

``` Or as a partial bar (deck pattern, ~40% width): ```html

``` ## 6. Gradient strip (slide-3 style) The angled gradient bar at the bottom of a section: ```html

``` ## 7. Skewed circle (signature shape) Use for image masks, accent shapes — never perfect circles: ```html

``` Or via the utility class: ```html

``` ## 8. Grain layer Required on every dark surface: ```html

``` The `bbc-grain` utility uses `grain.png` from `assets/grain/`. Place that file alongside the HTML. ## 9. Cover slide / hero section The first frame of every deck or emailer: ```html

The Bumblebee Branding Company

We don't build brands.
We build systems
that make them inevitable.

From chaos to system. From guesswork to growth.

thebumblebee.in | ahead@thebumblebee.in

``` ## 10. Closing slide Mirror of cover. Logo + contact + tagline. ```html

Choose to bee ahead.

thebumblebee.in · ahead@thebumblebee.in

``` ## 11. Image treatment All photographic images carry the BBC treatment: - Grain layer above the image (`mix-blend-mode:overlay; opacity:.20`) - Often combined with a vignette or partial gradient overlay - Founders/team carricatures from `assets/team/` — never use stock photography for people ## 12. Logo placement - **Top-left** of every interior slide/page (60–80px height) - **Center, large** on cover and closing - **Bottom-strip** with contact info, opacity 0.3, mix-blend-mode plus-lighter

Stage 01 · Discovery

We don't build brands. We build systemsthat make them inevitable.

Choose to bee ahead.

We don't build brands.
We build systems
that make them inevitable.