# Do and Don't — BBC Golden Hour

The patterns Sash has pushed back on across multiple sessions. Internalize these before writing any HTML.

## ❌ Don't

### Visual

1. **Don't use cool gradients** — no blue, purple, mint, lavender, teal. BBC is warm only (gold → amber → sunset → ember → berry → maroon).
2. **Don't use Tailwind defaults** — `from-blue-500 to-purple-600` is the AI-generic look BBC actively avoids. If you find yourself reaching for stock Tailwind colors, stop and use the BBC tokens.
3. **Don't skip the grain layer** — every dark surface needs `mix-blend-mode:overlay; opacity:.20` grain. Without it, surfaces look flat and AI-generated.
4. **Don't use pure `#000` or `#fff`** — use `--deep` (`#0a0806`) and `--white` (`#FAF6F0`). They carry warmth.
5. **Don't gradient-clip long sentences** — the gradient text-clip is for 2–5 word accent phrases inside a headline, not entire paragraphs.
6. **Don't center every layout** — BBC layouts use left-aligned content blocks with right-side hero imagery. Centered is fine for cover/closing only.
7. **Don't use perfect circles for accents** — use the skewed circle (`border-radius: 62% 38% 55% 45% / 48% 52% 48% 52%`).
8. **Don't use stock photography for people** — use the team caricatures from `assets/team/` or the BBC character art from `assets/characters/`.
9. **Don't mix multiple gradients in one view** — pick one gradient per section. `--gradient-warm` OR `--gradient-bumblebee`, not both.
10. **Don't use system fonts** — League Spartan, DM Sans, Cormorant Garamond, Caveat. Always import. Never fall back to "sans-serif" in production.

### Copy

1. **Don't use vacant superlatives** — "innovative", "cutting-edge", "world-class", "next-level"
2. **Don't use corporate sludge** — "synergize", "leverage", "unlock value", "drive impact"
3. **Don't use exclamation marks** — BBC uses periods. Confidence is quiet.
4. **Don't write in we-believe-we-strive mode** — declarative, not aspirational.
5. **Don't open with "In today's fast-paced world…"** or any variation. Get to the point.
6. **Don't use lorem ipsum** — pull copy from `references/voice-and-tone.md` anchor lines.

### Structure

1. **Don't write headlines longer than 9 words.**
2. **Don't write paragraphs longer than 4 sentences.**
3. **Don't use bullet lists for everything** — prose first, bullets only when comparing 3+ items.
4. **Don't use emoji as bullet markers** — gradient hairlines or numbers (01, 02, 03) instead.
5. **Don't repeat the logo on every slide** — top-left on interior slides is fine, but cover and closing get the centered/large treatment.

### AI-output tells (the things that scream "made by Claude")

1. **Don't use rounded-2xl on everything** — BBC uses 14px (`--r-card`) or 10px (`--r-btn`). Never 24px+.
2. **Don't use shadow-2xl glow effects** — soft `--shadow-card` for floating elements only.
3. **Don't use checkmark-emoji bullet lists**.
4. **Don't use generic "AI-style" gradient orbs in corners** — BBC uses photographic backgrounds, character art, or solid surfaces with grain.
5. **Don't write "Welcome to [thing]"** as opening copy.

## ✅ Do

### Visual

1. **Do use the BBC tokens** — `tokens.css` variables for everything.
2. **Do layer grain on every dark surface** — `bbc-grain` utility is in `tokens.css`.
3. **Do gradient-clip 2–4 word accent phrases** in headlines.
4. **Do use the skewed-circle shape** for accent images and photo masks.
5. **Do use glass cards** (`bbc-glass-dark` / `bbc-glass-light`) for content blocks on photographic backgrounds.
6. **Do use gradient hairlines** as section dividers (`border-image: var(--gradient-brand) 1`).
7. **Do place the logo top-left** on interior pages, centered/large on cover and closing.
8. **Do end every deck/emailer** with the contact strip: `thebumblebee.in | ahead@thebumblebee.in` in DM Sans 400, opacity 0.3, plus-lighter blend.

### Copy

1. **Do write in two-beat patterns** — "Brand. Market. Scale. Repeat."
2. **Do use negation + assertion** — "We don't build X. We build Y."
3. **Do use "you" and "we"** — direct, not third-person.
4. **Do use specific numbers** — "100+ clients", "300% ROI", not "many" or "significant".
5. **Do break long sentences** — if it runs over 25 words, split it.

### Structure

1. **Do open every section with an eyebrow** — DM Sans 700 uppercase, 5–10px letter-spacing.
2. **Do follow with a headline** — League Spartan 900 uppercase.
3. **Do follow with a one-sentence lede** — DM Sans 300, max 25 words.
4. **Do use Cormorant Garamond italic** for editorial/emotional vocabulary inside headlines (one word, never a phrase).
5. **Do use absolute positioning for fixed-canvas decks** (1920×1080), responsive `clamp()` for everything else.

## Quick self-check before submitting

Before handing back any HTML output, ask yourself:

1. ✅ Are all colors from BBC tokens? (no Tailwind defaults?)
2. ✅ Is grain layered on every dark surface?
3. ✅ Are accent words gradient-clipped, not whole sentences?
4. ✅ Is League Spartan used for headlines, DM Sans for body?
5. ✅ Are headlines under 9 words and paragraphs under 4 sentences?
6. ✅ Is the BBC logo on the first and last frame?
7. ✅ Is the contact strip on the last frame?
8. ✅ Did I avoid every word in the "vacant superlatives" list?
9. ✅ Are there no emoji bullets, no `rounded-2xl`, no purple gradients?
10. ✅ Does it feel like "sunset through dust" — warm, cinematic, confident?

If any answer is no, fix it before showing the user.