# Deep-Dive Page Design (index.html)
The `brief.html` is the editorial entry point. The `index.html` is the complete brand analysis — every section fully expanded, no cards, just deep research presented beautifully.
## Brief → Deep Dive Connection
Every `brief.html` must link to `index.html` in two places:
1. The header toggle: `Full`
2. The §13 vs [Client] card: `Read full analysis →`
The brief is the preview. The deep dive is the proof.
## Deep-Dive Page Principles
### Visual hierarchy
- Full-bleed section headers with brand color
- Images presented at generous sizes — never thumbnails
- Generous whitespace between sections
- Typography that signals craft: proper hierarchy, not a wall of text
### Section structure (index.html)
Each section gets:
- Section number + name (bold, brand color)
- Hero image for the section (full-width or large)
- Research content (analysis, not just facts)
- Supporting images throughout (not just at the top)
### Image treatment in deep-dive
- Section hero images: full-width, natural ratio, generous
- Supporting images: inline with text at 60–80% width
- Never use `max-height` constraints in deep-dive — this is where images breathe
- Caption every image (what it shows, what it means strategically)
### Distinguishing brief from deep-dive
| brief.html | index.html |
|-----------|-----------|
| One sentence per section (teaser) | Full paragraphs of analysis |
| Single card image | Multiple images throughout |
| Collapsed by default, click to expand | Everything visible |
| ~2 minute read | 15–20 minute read |
| For first impression / quick scan | For deep research / pre-meeting prep |
## Connecting the Two Pages in the Navigation
```html
```
## Deep-Dive Visual Standards
### What makes a stunning deep-dive page
1. **No image is decorative** — every image is chosen for what it proves
2. **Agency images dominate** — if the brand worked with a great studio, show that work prominently
3. **Campaigns have their own visual moment** — don't shrink them to thumbnails
4. **Color palette is shown, not described** — visual swatches, not hex codes in text
5. **Typography is demonstrated, not explained** — type-set headlines, not "their font is called X"
6. **The verdict is the climax** — Borrow/Watch/Reject is the most important section; give it visual weight
### Section images — recommended sizes
| Section | Image treatment |
|---------|----------------|
| §02 Positioning | Full-width, tall, cinematic. This is the brand's story. |
| §03 Brand Evolution | Timeline with images at each stage |
| §04–05 Color+Type | Full logo spread + type specimen + color in context |
| §06 Layout+UX | 4–6 product screens at natural ratio |
| §11 Campaigns | Full campaign imagery — don't shrink |
| §13 Verdict | Custom comparison table + strategic recommendation |
## Scaling Across Brands
Each brand gets its own folder:
```
public/[project]/
├── assets/brief-page.css (shared — one file for all brands)
├── [brand-a]/
│ ├── brief.html
│ ├── index.html
│ └── assets/ (brand-specific images)
├── [brand-b]/
│ ├── brief.html
│ ├── index.html
│ └── assets/
```
The shared CSS means a single update to `brief-page.css` fixes all brands at once. Per-brand theming is 3 CSS custom properties on ``. That's the system.