DESIGN.md — Business WireLegacy format

### Colors

#### Brand Palette

| Token | Hex | RGB | Usage |

| ----------------- | --------- | ---------------- | ------------------------------------------ |

| primary | #21275c | 33, 39, 92 | Primary navy — nav, headings, hero overlays |

| primaryMed | #2459a9 | 36, 89, 169 | Interactive blue — links, CTA borders, buttons |

| primaryLight | #ebf5ff | 235, 245, 255 | Lightest blue — subtle highlights |

| tertiaryBright | #f2b036 | 242, 176, 54 | Amber gold — primary CTA, accent borders |

| secondaryLight | #1ab4e2 | 26, 180, 226 | Cyan — secondary accents |

#### Neutral Palette

| Token | Hex | RGB | Usage |

| ------------- | --------- | ---------------- | ------------------------------- |

| white | #ffffff | 255, 255, 255 | Page canvas, card surfaces |

| blue100 | #f7fafd | 247, 250, 253 | Tinted background sections |

| blue200 | #e8f0fb | 232, 240, 251 | Alternate section backgrounds |

| gray250 | #d9dceb | 217, 220, 235 | Blue-tinged gray backgrounds |

| gray300 | #e7e7e7 | 231, 231, 231 | Borders, dividers |

| fontBasic | #333333 | 51, 51, 51 | Body text |

| fontDark | #1c1b1f | 28, 27, 31 | Headings, emphasis |

| gray600 | #464646 | 70, 70, 70 | Secondary body text |

| gray800 | #4b4f5b | 75, 79, 91 | Muted text |

#### Semantic Colors

| Token | Hex | RGB | Usage |

| --------- | --------- | ---------------- | ------------------------ |

| link | #2459a9 | 36, 89, 169 | Hyperlinks (= primaryMed)|

| error | #e02424 | 224, 36, 36 | Error states |

| success | #25a249 | 37, 162, 73 | Success states |

| neutral | #9ea2a3 | 158, 162, 163 | Disabled, placeholder |

#### Utility Colors

| Token | Value | Usage |

| --------------- | --------------------------- | ----------------------------- |

| separator | hsla(0, 0%, 80%, 0.5) | Section dividers |

| overlay | rgba(0, 0, 0, 0.4) | Modal/hero overlays |

| hover-accent | #e6f2fd | Hover state background tint |

### Gradients

```css

/ Hero gradient overlays /

background: linear-gradient(to bottom, var(--tw-gradient-stops));

background: linear-gradient(to right, var(--tw-gradient-stops));

/ Gradient from primary navy to transparent, used over hero images /

--tw-gradient-from: rgba(33, 39, 92, 1);

--tw-gradient-to: rgba(33, 39, 92, 0);

```

---

### Grid System

• Framework: Tailwind CSS utility-first

• Container: Centered with mx-auto, max-width varies by section

• Columns: Flexbox-based, not CSS Grid. Common patterns:

• 2-column split: lg:flex-row with 50/50

• 3-column cards: flex-wrap with calc(33.33% - 23px)

• Stacked mobile: flex-col → lg:flex-row

### Responsive Breakpoints

| Breakpoint | Width | Behavior |

| ---------- | -------- | ----------------------------------- |

| Mobile | < 640px | Single column, stacked layout |

| Tablet | 640px | Modest reflow |

| Desktop | 768px | Two-column starts |

| Large | 1024px | Full desktop layout, mega nav |

| XL | 1280px | Max content width |

---

• Photography: Professional corporate imagery — diverse teams in offices, data visualizations, business meetings

• Delivery: Next.js ` optimized via CloudFront CDN (d1k42caodqw8lr.cloudfront.net`)

• Format: WebP with quality 75

• Hero images: Full-bleed, overlaid with navy gradient

• Pattern: SVG wave background (bg-wave.svg) used on alternating content sections for visual rhythm

• Aspect ratio: Hero images use pb-[56%] (16:9 ratio padding trick)

---

```css

/ Standard interaction transitions /

transition-duration: 200ms; / delay-200 /

transition-duration: 820ms; / duration-[820ms] — entrance animations /

transition-timing-function: ease;

```

• Cards: hover shadow lift transition

• Navigation: mega-menu slide/fade

• Scroll-triggered section reveals with longer duration

---

Authoritative. Trustworthy. Information-first.

BusinessWire's design language conveys institutional credibility through:

1. Deep navy primary (#21275c) — gravitas without being oppressive

2. Amber-gold accent (#f2b036) — warmth and energy against the cool palette

3. Generous whitespace — content breathes despite information density

4. Serif-free clarity — Figtree for display impact, Oxygen for reading comfort

5. Pill-shaped CTAs — approachable and modern against the corporate backbone

6. Alternating section rhythms — white → blue-tint → navy creates visual chapters

7. Wave SVG pattern — subtle branded texture that softens corporate rigidity

The overall aesthetic sits between a financial services platform and a modern SaaS marketing site — professional enough for Fortune 500 IR teams, approachable enough for SMB press releases.