# Index Page Structure

When building the competition index (all brands on one page), use a card-grid layout.

## Card Format (per brand)
Each card shows at-a-glance visual DNA:
- Brand name (Larken, 28px)
- URL (12px, --light)
- Color palette: 3-5 horizontal swatches (32px squares)
- Typography: heading + body sample in the brand's actual fonts
- Theme indicator: dark-first / light-first / mixed (dot + label)
- Brand personality: 3-4 keyword tags
- Target audience: one italic sentence

## Grid
- 4 columns on desktop (1400px max-width is acceptable for index grids)
- 2 columns on tablet
- 1 column on mobile
- 1px gap grid with --border background (creates hairline grid lines)

## Tier Organization
When brands are organized in tiers, use section labels above each grid:
```
SECTION-LABEL: "Tier 1 — Direct Competitors"
[4-col grid of brands]

SECTION-LABEL: "Tier 2 — Adjacent Platforms"  
[4-col grid of brands]

SECTION-LABEL: "Tier 3 — Aspirational References"
[4-col grid of brands]
```

## Linking
Each card links to its full brand analysis page:
`<a href="./{{brand-slug}}/">` wrapping the card.

## Header
Same CE header pattern:
- Label: "Visual Competitive Analysis"
- H1: the sector or client name
- Subtitle: scope summary (brand count, tiers, date)
- Meta bar: date, brand count, sector, client