# Asset Usage — BBC Golden Hour

The BBC look is **asset-rich**. But the assets must be used correctly. The single biggest mistake is treating composed slide plates as if they were raw backgrounds. They aren't.

> **READ THIS FIRST:** Open `plate-guide.html` in a browser before writing any HTML. It shows every background plate with its text-safe zone overlaid. You cannot pick the right plate without seeing it.

---

## The two kinds of background

### ✅ Raw plates (text anywhere, full-bleed safe)

These three are pure backgrounds with no foreground subject. Use them when you need a clean canvas:

| File | Description |
|---|---|
| `assets/backgrounds/BBC  03.png` | Sunset mountain, full bleed, warm |
| `assets/backgrounds/BBC  09.png` | Orange wavy gradient, full bleed |
| `assets/backgrounds/BlackBG with sandand grain texture.png` | Dark wavy texture, full bleed |

You can drop a headline anywhere on these. No constraints.

### ⚠️ Composed plates (text only in the safe-zone)

These nine are **finished slide compositions** with characters or subjects already on one side. The opposite side is the text-safe zone. **Putting headline text over the character side breaks the slide.**

| File | Subject | Text-safe zone | Story / mood |
|---|---|---|---|
| `BBC  02.png` | Cliff silhouette + sunset on right | **LEFT half** | Cinematic cover, "we don't build brands" hero |
| `BBC  04.png` | Ant carrying boulder on right | **LEFT half** | Hard work, persistence, "stubborn idea" |
| `BBC  05.png` | Hand catching question mark on right | **LEFT half** | "We asked one question" / inquiry / origin |
| `BBC  06.png` | Hero in armchair with popcorn on left | **RIGHT half** | Mid-deck "watch this" / dramatic break |
| `BBC  07.png` | Hero portrait looking up on right | **LEFT half** | Capabilities, aspirational, looking forward |
| `BBC  08.png` | Flying hero + card-shape area on right | **RIGHT half (inside the card frame)** | Stat block or CTA card placed inside the framed zone |
| `BBC  10.png` | Eye close-up with BBC reflection on right | **LEFT half** | "We see it", attention, intimate |
| `BBC  11.png` | Hand holding Earth on left | **RIGHT half** | "World-changing", scale, ambition |
| `BBC  12.png` | Hand-of-light with figure on left | **RIGHT half** | Closing CTA, "Choose to bee ahead" |

---

## The text-safe zone CSS pattern

When using a composed plate, position content with explicit grid columns so it stays in the safe zone. **Do not center content over the entire plate** — that puts it over the character.

### Pattern A — text-left composed plate (BBC 02, 04, 05, 07, 10)

```html
<section class="hero-composed-left">
  <div class="bg"><img src="assets/backgrounds/BBC  02.png" alt=""></div>
  <div class="grain"></div>

  <div class="content-zone">
    <p class="eyebrow">The Bumblebee Branding Company</p>
    <h1>We don't build brands. <span class="gradient-text">We build systems that make them inevitable.</span></h1>
  </div>
</section>

<style>
  .hero-composed-left { position:relative; isolation:isolate; min-height:90vh; overflow:hidden; }
  .hero-composed-left .bg { position:absolute; inset:0; z-index:0; }
  .hero-composed-left .bg img { width:100%; height:100%; object-fit:cover; }
  .hero-composed-left .grain { position:absolute; inset:0; z-index:1;
                               background-image:url('assets/grain.png');
                               background-size:400px; mix-blend-mode:overlay;
                               opacity:.20; pointer-events:none; }
  .hero-composed-left .content-zone {
    position:relative; z-index:2;
    width:50%;
    max-width:600px;
    padding:clamp(64px,10vh,120px) clamp(24px,5vw,80px);
    display:flex; flex-direction:column; justify-content:center;
    min-height:90vh;
  }
  @media (max-width:768px) {
    .hero-composed-left .content-zone { width:100%; max-width:none; }
  }
</style>
```

### Pattern B — text-right composed plate (BBC 06, 08, 11, 12)

Same as Pattern A but flip `.content-zone` to the right via `margin-left:auto`:

```css
.hero-composed-right .content-zone {
  position:relative; z-index:2;
  width:50%;
  max-width:600px;
  margin-left:auto;
  padding:clamp(64px,10vh,120px) clamp(24px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center;
  min-height:90vh;
}
```

### Pattern C — raw plate (BBC 03, 09, BlackBG)

Full-width content allowed. Center, left, right — anywhere.

---

## When NOT to use a composed plate

- When you also want to drop `s3-superhero.png` or other character on top — the plate already has a character. Use BlackBG or BBC 09 instead.
- When the section needs a logo wall — composed plates compete with logos. Use BlackBG or BBC 09.
- When you have lots of body copy / multi-column layout — the safe-zone is too narrow. Use a raw plate.
- When the mood is wrong — every composed plate has a story (cliff, ant, eye, hero-in-chair). If your section's headline doesn't match that story, pick a different plate.

---

## Plate-by-purpose decision matrix

| Section type | First choice | Second choice | Avoid |
|---|---|---|---|
| Cover slide / hero with text-left | `BBC 02` (cliff) | `BBC 03` (raw) + `s3-superhero.png` overlay | `BBC 06`/`08` (text on wrong side) |
| Cover slide / hero with text-right | `BBC 11` or `BBC 12` | `BBC 06` | Any text-left plate |
| "We asked one question" / origin | `BBC 05` | — | — |
| Stats band | `BBC 09` (orange waves) | `BlackBG` | Any plate with a character |
| Founders intro | Solid `--cream` | `BBC 09` flipped subtle | Any composed plate |
| Capabilities / "what we do" | `BBC 07` (looking up) | `BBC 04` (effort) | — |
| Mid-deck dramatic break | `BBC 06` (popcorn hero) | `BBC 04` (ant) | — |
| Client logo wall | `BlackBG` or `--deep` | `BBC 09` | Any composed plate |
| Stat-card panel | `BBC 08` — stat card inside frame | Glass card on `BlackBG` | — |
| Closing CTA | `BBC 12` (hand of light, text right) | `BBC 11` | — |

---

## Foreground asset rules

### Characters

| File | Description | Use |
|---|---|---|
| `characters/s3-superhero.png` | Iconic superhero pose | Drop ONLY on raw plates (BlackBG, BBC 09, BBC 03) — never on composed plates |
| `characters/BBC_CH1.png` | Character 1, alternate pose | Same rule — raw plates only |

**Never combine s3-superhero with a composed plate.** That puts two characters in one frame.

### Team caricatures

22 individuals + 2 group shots in `assets/team/`.

- **Founders pattern**: Achinthya + Sash, side-by-side, `--cream` background, no other characters.
- **Team grid**: 4-col grid of individuals on `--cream` or `BBC 09`.
- **Sizing**: render at full opacity (no grayscale, no filter), max-width 240–360px. Don't crop into circles — let the illustration breathe.

### Logos

| Position | File | Size | Surface |
|---|---|---|---|
| Top-left interior | `logo/BBC New Color 1-05.png` | 40–60px | Dark |
| Top-left interior | `logo/BBC New Color 1-02.png` | 40–60px | Light (cream) |
| Center cover | `logo/BBC New Color 1-01.png` | 80–120px | Dark hero |
| Center closing | `logo/BBC New Color 1-04.png` | 100–140px | Closing |
| Icon / favicon | `logo/BBC New Color 1-03.png` | 32–48px | Anywhere |
| Watermark | `logo/BBC New Color 1-07.png` | 32px @ opacity 0.3 | Anywhere |

### Client logos

54 client logos in `assets/client-logos/`.

**Critical fix from previous version**: Do NOT apply `filter:grayscale(1) brightness(1.6)` to client logos. It washes out branded clients (TVS red, Audi rings, Naturals green) into invisible white blobs. Keep them full color, on a surface dark enough to read against (BlackBG, `--deep` solid, or `BBC 09` deep-right area).

```html
<section class="logo-wall-section">
  <div class="bg"><img src="assets/backgrounds/BlackBG with sandand grain texture.png" alt=""></div>
  <div class="grain"></div>
  <div class="container">
    <p class="eyebrow">Trusted by</p>
    <h2>100+ clients. <span class="gradient-text">20+ industries.</span></h2>
    <div class="logo-wall">
      <img src="assets/client-logos/TVS.png" alt="TVS">
      <img src="assets/client-logos/Audi.png" alt="Audi">
      <!-- ... -->
    </div>
  </div>
</section>

<style>
  .logo-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
               margin-top:48px; align-items:center; }
  @media (min-width:768px) { .logo-wall { grid-template-columns:repeat(6,1fr); } }
  .logo-wall img { max-height:48px; max-width:140px; margin:0 auto; opacity:.9; }
</style>
```

---

## Industry packs (logo walls)

| Audience | Logos |
|---|---|
| Hospitality | Naturals, Cinnamon Spice, Thalappakatti, Dindukkal Thalappakatti, Red Dragon, Loko Poko |
| Education | VIT, Tiruchy Public School, Moulya, KNMS, Swami Educations, Mahatma |
| Enterprise/B2B | TVS, Audi, Xerox, The Hindu, Axiscades, Geekaysys, Synerheal |
| Real estate | KS, RKG, Srivaru, Jasmi |
| Consumer | Naturals, Page3, Wassup, Loko Poko, Gumchak, Milia |

---

## Workflow checklist

Before submitting any BBC HTML output, verify:

1. [ ] Did I open `plate-guide.html` and pick the right plate?
2. [ ] Is my headline copy in the plate's text-safe zone?
3. [ ] Am I avoiding placing `s3-superhero` on a composed plate?
4. [ ] Are client logos NOT grayscaled?
5. [ ] Does every dark surface have grain (`mix-blend-mode:overlay; opacity:.20`)?
6. [ ] Logo top-left on every interior section?
7. [ ] Logo + tagline on closing?
8. [ ] On mobile, did I switch composed plates to raw plates (or stack content above the bg)?

---

## The "asset density" rule (revised)

Every BBC frame should have at least two visual layers:

1. **Background**: a plate (raw OR composed) OR a real cream/dark surface — never `#000` solid
2. **Content layer**: typography in the right zone, plus optionally a foreground asset (character on raw plates only, team caricatures on cream, logo wall on raw or solid)

Plus always: grain overlay + logo placement.

**The single rule that prevents 80% of mistakes**: if the plate has a character or subject in it, your headline goes on the OTHER side. Never both sides at once.