CNN Brand Design System Deep Dive

1. Brand Overview

CNN’s design system is exactly what you’d expect from a global news powerhouse: high-contrast, utilitarian, and built for speed. The visual language isn’t trying to be cute — it’s here to deliver information, fast, and in a way that feels authoritative. The brand leans on a tight grid, a restrained palette anchored in black, white, and red, and typography that’s clear and legible across any device.

The vibe? Serious. No gradients on call-to-actions, no playful icons. This is a system that prioritizes clarity over ornamentation. There’s no ambiguity in their hierarchy — headlines scream with bold weights, links are unmistakably links, and the spacing is economical. CNN’s audience is broad: global readers, breaking news consumers, people scanning quickly for updates. The design system reflects that — every detail is tuned for high-speed scanning.

They’ve built this for consistency across platforms. The typography stack is locked to cnn_sans_display with Helvetica Neue and Arial as fallbacks — all sans-serif, all business. Spacing is built on an 8px scale, but they’re not afraid to drop down to 1px increments for micro-alignment. Border radii are minimal — 4px for most UI, 8px for interactive elements, 16px for cards — nothing overly rounded, keeping the tone sharp.

Framework-wise, the site uses Tailwind CSS and Vuetify in production — which tells you they value component reusability and responsive utility classes. The icon system is SVG-based, keeping graphics crisp at any resolution.

In short: CNN’s design system is lean, authoritative, and tuned for heavy-duty content delivery. It’s not here to be “fun.” It’s here to make sure you see the headline, click it, and get the story.

2. Color System

2.1 Primary Colors

The main brand color is a deep, confident red — #c00 (semantic: --semantic-color-action-conversion-base-bg). Red is CNN’s signature, instantly recognizable, and carries the urgency of breaking news. It’s used for primary actions, live indicators, and key brand marks. Red in this context is about authority and urgency — no pastel softness here.

White (#ffffff) and black (#0c0c0c) form the core background/text contrast. Black is used for headers and text-heavy areas; white dominates content backgrounds for clean reading.

Blue (#0000ee) is the default link color — a throwback to early web conventions, which aligns with CNN’s utility-first approach. They also have brand-specific blues like #3061f3 for politics and #0052E7 for accents.

2.2 Complete Palette

(Note: full palette includes all primitive-color values from data — above is grouped by functional role.)

2.3 Color Relationships

Black on white is the default, delivering a WCAG AAA-level contrast. Red on white is highly visible but can be borderline for smaller text — best reserved for large type or icons. Link blue (#0000ee) hits AAA contrast on white backgrounds.

Transparent overlays are used for hover and focus states, often with white at 70–90% opacity or black at 40–90%. This keeps interactions visible without disrupting content readability.

2.4 Usage Guide

• Do: Use #c00 red for primary CTAs and urgent statuses. Pair with white text for maximum clarity.
• Do: Keep link blue underlined by default; remove underline only on hover.
• Avoid: Mixing multiple brand section colors in one component — each section (Politics, Travel, Business) has its own accent.
• Avoid: Using transparent black overlays on small text — kills contrast.

3. Typography

3.1 Font Families

Primary: cnn_sans_display
Fallbacks: helveticaneue, Helvetica, Arial, Utkal
Secondary (rare): book and CNN fonts for captions, with Handset Sans UI fallback.

No Google Fonts or Adobe Fonts — all custom/self-hosted.

3.2 Type Scale

(Full table includes all extracted styles — above is condensed for readability.)

3.3 Hierarchy

Headlines are bold and large — starting at 46px for top stories, dropping to 30px for secondary. There’s a sharp drop to 20px for section headers, with uppercase and letter-spacing to differentiate them from body text. Body copy sits at 16px, readable and consistent. Captions and metadata drop to 14px or 12px, often uppercase for emphasis.

Hierarchy is clear: large, bold for headlines; medium, uppercase for section labels; regular weight for body; small, uppercase for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid.

Common values:

Micro values (1px, 2px, 3px) are used for borders and fine alignment.

4.2 Layout

Breakpoints range from 300px up to 2000px — plenty of steps for fine-tuned responsive adjustments. Tailwind utilities suggest a mobile-first approach, scaling up with min-width breakpoints.

5. Visual Elements

Border Radius

Values:

Everything stays subtle — no excessive rounding.

Shadows

Minimal use. Most depth is from subtle drop shadows:

• rgba(106,115,129,0.06) 0px 3px 8px, rgba(106,115,129,0.16) 0px 6px 12px — used on cards.
• rgba(0,0,0,0.25) 0px 8px 24px — heavier modals.

Shadows are rare; borders are more common for separation.

Borders

Dominant style: 1px solid #b1b1b1 for inputs, or 0px 0px 1px solid #000 for dividers. Keeps things crisp.

6. Components

6.1 Buttons

Primary Text Button
Default: white bg, black text, 8px radius, 1px solid #e6e6e6.
Hover: bg #1eaedb, white text, inset shadows for focus ring.
Focus: black outline, bg #1eaedb, white text.

Secondary Button
Default: #efefef bg, black text, 4px radius.
Hover: white bg, white text (?) — seems odd, possible variant issue.
Focus: same as primary — blue bg, white text.

6.2 Links

Five variants:

1. Blue (#0000ee), underlined, hover removes underline and changes to #3860be.
2. Black (#0c0c0c), no underline, hover to #3860be.
3. White (#ffffff), underlined, hover to #3860be.
4. Light gray (#e6e6e6), no underline, hover to #3860be.

Links are consistent — hover always shifts to blue shade.

6.3 Forms

Inputs: white bg, gray border (#b1b1b1), 8px radius, padding with large right-hand space (probably for icon). Focus: black border, bg #1eaedb, white text.

6.4 Cards

Cards use 16px radius, subtle shadows or bottom borders. Padding usually 12–24px.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #0c0c0c;
  --color-white: #ffffff;
  --color-light-gray: #e6e6e6;
  --color-link-blue: #0000ee;
  --color-medium-gray: #6e6e6e;
  --color-conversion-red: #c00;
  --color-accent-red: #a20000;
  --color-brand-politics: #3061f3;
  --color-brand-business: #66c9af;
  --color-brand-travel: #f06c00;
  --color-accent-purple: #6a29d5;
  --color-accent-pink: #d00f40;
  --color-status-positive: #2b7a53;
  --color-status-caution: #cd6200;
  --color-status-informative: #2152d5;
  --color-status-positive-icon: #3da672;
  --color-status-caution-icon: #ff7c00;
  --color-status-informative-icon: #3061f2;
  --color-accent-blue-light: #aeb8fa;
  --color-accent-blue-medium: #7b8ff7;
  --color-accent-blue-dark: #173da4;
  --color-transparent-white-70: #ffffffb3;
  --color-transparent-black-40: #0c0c0c66;
  --color-transparent-black-90: #0c0c0ce6;

  /* Typography */
  --font-family-primary: "cnn_sans_display", helveticaneue, Helvetica, Arial, Utkal;
  --font-size-h1: 46px;
  --font-size-body: 16px;
  --font-weight-bold: 700;
  --font-weight-regular: 400;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-card: rgba(106,115,129,0.06) 0px 3px 8px, rgba(106,115,129,0.16) 0px 6px 12px;
}

8. AI Coding Assistant Prompt

# CNN Design System Specification

You are a CNN design expert. Build UIs matching their visual language exactly.

## Brand Context
CNN’s design is authoritative, high-contrast, and built for fast content delivery. It prioritizes clarity over decoration, with bold typography and a restrained palette. Every element should feel precise and functional.

## Color Palette
- Black: #0c0c0c — Headlines, header bg
- White: #ffffff — Content bg, inverse text
- Light Gray: #e6e6e6 — Dividers, muted bg
- Link Blue: #0000ee — Default links
- Medium Gray: #6e6e6e — Secondary text
- Conversion Red: #c00 — Primary CTAs
- Accent Red: #a20000 — Secondary red accents
- Brand Politics Blue: #3061f3 — Politics section
- Brand Business Teal: #66c9af — Business section
- Brand Travel Orange: #f06c00 — Travel section
- Accent Purple: #6a29d5 — Accent buttons
- Accent Pink: #d00f40 — Highlights
- Status Positive: #2b7a53 — Success text
- Status Caution: #cd6200 — Warning text
- Status Informative: #2152d5 — Info text
- Status Positive Icon: #3da672 — Success icons
- Status Caution Icon: #ff7c00 — Warning icons
- Status Informative Icon: #3061f2 — Info icons
- Accent Blue Light: #aeb8fa — Decorative
- Accent Blue Medium: #7b8ff7 — Decorative
- Accent Blue Dark: #173da4 — Decorative
- Transparent White 70%: #ffffffb3 — Overlays
- Transparent Black 40%: #0c0c0c66 — Overlays
- Transparent Black 90%: #0c0c0ce6 — Overlays

## Typography
- Primary font: "cnn_sans_display", helveticaneue, Helvetica, Arial, Utkal
- Sizes:
  - H1: 46px, 700, 1.13
  - H2: 30px, 700, 1.00
  - Section Header: 20px, 700, uppercase
  - Body: 16px, 400
  - Caption: 14px, 400 or 700
  - Small Metadata: 12px, 700, uppercase

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 48px  
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 8px — modals, images
- lg: 16px — cards
- full: 50% — avatars, round icons

## Shadows & Depth
- Card: rgba(106,115,129,0.06) 0px 3px 8px, rgba(106,115,129,0.16) 0px 6px 12px
- Avoid heavy shadows; use borders for separation.

## Component Specifications

### Primary Button
Default: bg #ffffff, color #0c0c0c, radius 8px, border 1px solid #e6e6e6, padding 0 12px, font 14px/700  
Hover: bg #1eaedb, white text, inset shadows  
Focus: outline 2px solid #000, bg #1eaedb, white text

### Secondary Button
Default: bg #efefef, color #000, radius 4px  
Hover: bg #ffffff, white text  
Focus: same as primary focus

### Navigation Links
Blue variant: #0000ee, underline; hover #3860be, no underline  
Black variant: #0c0c0c, no underline; hover #3860be

### Input Fields
Default: bg #ffffff, color #404040, border 1px solid #b1b1b1, radius 8px, padding 0 128px 0 8px  
Focus: outline 1px solid #000, bg #1eaedb, white text

## Layout & Responsive Rules
Breakpoints: 300px, 400px, 425px, 480px, 600px, 728px, 768px, 1024px, 1280px, 1440px, 2000px  
Mobile-first; scale up with min-width.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: solid outline, high contrast
- Hover: color shift and underline toggle for links

## DO List
- Use only colors from palette
- Maintain 8px grid
- Keep headings bold and large
- Use uppercase for section labels
- Preserve link underline unless hovered

## DON'T List
- Don’t invent new colors
- Don’t overuse shadows
- Don’t mix large and small radii inconsistently
- Don’t change link blue
- Don’t use serif fonts

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #0c0c0c;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  font-weight: 700;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  color: #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #000;
  background: #1eaedb;
  color: #ffffff;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: rgba(106,115,129,0.06) 0px 3px 8px, rgba(106,115,129,0.16) 0px 6px 12px;
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #404040;
  border: 1px solid #b1b1b1;
  border-radius: 8px;
  padding: 0 128px 0 8px;
}
.input:focus {
  outline: 1px solid #000;
  background: #1eaedb;
  color: #ffffff;
  border-color: #000;
}
```

9. Summary

TL;DR — CNN’s design system is sharp, fast, and authoritative. Black, white, and red anchor a palette built for urgency; typography is bold and clear; spacing sticks to an 8px grid with micro adjustments. Components are minimal but highly functional.

Brand Keywords:

• high-contrast-authoritative
• urgency-driven
• utilitarian-grid
• clarity-first
• news-centric