Switch between the rendered Visual preview and the Raw DESIGN.md.
CNN's design system embodies urgent, authoritative news delivery through a bold, high-contrast aesthetic. The visual language prioritizes legibility and information hierarchy in fast-paced environments, combining deep blacks and whites with strategic crimson accents that command attention. The system reflects a professional, trustworthy news organization that must communicate complex stories with clarity and immediacy. Clean typography, decisive color blocking, and restrained visual flourishes create a modern, digital-native platform that feels both established and contemporary.
Key Characteristics
#D50000): Primary brand accent, breaking news badges, high-priority calls-to-action#A20000): Secondary accent for hover states and emphasis#A4001E): Deep contextual emphasis and dark mode variants#0000EE): External links, interactive elements requiring distinction#6A29D5): Premium content, subscriber-exclusive sections#CDB6F1): Supporting purple tints, backgrounds for premium zones#E5DBF8): Light background surfaces for purple-themed sections#66C9AF): Positive actions, trending indicators, supplementary highlights#0000EE): All hyperlinks in body text#0C0C0C): Primary interactive element text#404040): Secondary interactive labels#000000): Heavy structural element, deep shadows#0C0C0C): Primary text color, main content#404040): Secondary text, muted labels#6A7381): Tertiary text, placeholder text#6E6E6E): Input borders, dividers#B1B1B1): Form borders, subtle dividers#808080): Disabled states#E6E6E6): Light borders, subtle backgrounds#FFFFFF): Primary background, card surfaces#FFFFFF): Primary surface for content containers#B1B1B1): Standard input and card borders#E6E6E6): Minimal visual separation#FF3F3F): Validation errors, destructive warnings#CC0000): High-severity alerts, error states#D50000): Breaking news, critical informationPrimary: CNN Sans Display
font-family: 'cnn_sans_display', 'Roboto', sans-serif;
Secondary: Arial / System
font-family: 'Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Fallback stack supports web font loading failures and system font rendering.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | CNN Sans Display | 36px | 700 | 38px | 0px | Page titles, major headlines |
| Heading / H2 | CNN Sans Display | 20px | 700 | 24px | 0px | Section headlines, card titles |
| Subheading / H3 | CNN Sans Display | 16px | 700 | 22px | 0px | Article subheadings, breaking news labels |
| Label / H4 | CNN Sans Display | 14px | 600 | 21px | 0px | Form labels, badges, metadata |
| Caption / H5 | CNN Sans Display | 12.992px | 600 | 19.488px | 0px | Image captions, timestamps |
| Body | CNN Sans Display | 16px | 400 | 22px | 0px | Article body, primary content |
| Body Small | CNN Sans Display | 15px | 500 | 20px | 0px | Secondary descriptions, card metadata |
| Button / CTA | CNN Sans Display | 16px | 700 | 1.0 (normal) | 0px | All button labels |
| Input / Form | Arial | 13.333px | 400 | 24px (input fields) | 0px | Form input text, placeholder |
Primary Button (Subscribe / CTA)
background-color: #0C0C0C (or rgba(12, 12, 12, 1))color: #FFFFFFfont-size: 16pxfont-weight: 700font-family: cnn_sans_displaypadding: 12px 24pxborder-radius: 4pxborder: noneheight: 44pxline-height: normalcursor: pointerPrimary Button Hover
background-color: #404040color: #FFFFFFPrimary Button Active
background-color: #000000color: #FFFFFFSecondary Button (Ghost)
background-color: transparentcolor: #0C0C0Cfont-size: 16pxfont-weight: 700font-family: cnn_sans_displaypadding: 12px 24pxborder-radius: 4pxborder: 1px solid #0C0C0Cheight: 44pxline-height: normalSecondary Button Hover
background-color: #F5F5F5color: #0C0C0CDanger Button (Breaking News)
background-color: #D50000color: #FFFFFFfont-size: 14pxfont-weight: 600font-family: cnn_sans_displaypadding: 8px 16pxborder-radius: 4pxborder: noneheight: 32pxline-height: 21pxDanger Button Hover
background-color: #A20000Icon Button
background-color: transparentcolor: #0C0C0Cfont-size: 13.333pxpadding: 0pxborder: noneborder-radius: 0pxheight: 32pxwidth: 32pxcursor: pointerIcon Button Hover
color: #D50000Standard Card
background-color: #FFFFFFcolor: #0C0C0Cborder: 1px solid #E6E6E6border-radius: 0pxpadding: 0pxbox-shadow: noneCard with Hover
border-color: #B1B1B1box-shadow: 0px 3px 8px rgba(106, 115, 129, 0.06), 0px 6px 12px rgba(106, 115, 129, 0.16)Breaking News Container
background-color: #FFFFFFborder-left: 4px solid #D50000padding: 16pxmargin-bottom: 16pxPremium Content Card
background-color: #E5DBF8border-left: 4px solid #6A29D5padding: 16pxText Input
background-color: #FFFFFFcolor: #404040font-size: 16pxfont-weight: 400font-family: cnn_sans_displaypadding: 10px 16pxborder: 1px solid #B1B1B1border-radius: 8pxheight: 48pxline-height: 24pxText Input Focus
border-color: #0000EEoutline: 2px solid rgba(0, 0, 238, 0.1)box-shadow: 0px 0px 0px 3px rgba(0, 0, 238, 0.06)Text Input Error
border-color: #FF3F3Fcolor: #404040Text Input Disabled
background-color: #E6E6E6color: #808080border-color: #B1B1B1cursor: not-allowedSearch Input
background-color: #FFFFFFcolor: #404040font-size: 16pxpadding: 0px 16px 0px 8pxborder: 1px solid #B1B1B1border-radius: 8pxheight: 48pxwidth: 100%line-height: normalSearch Input Focus
border-color: #0000EEbox-shadow: 0px 0px 0px 3px rgba(0, 0, 238, 0.06)Form Label
color: #0C0C0Cfont-size: 14pxfont-weight: 600font-family: cnn_sans_displayline-height: 21pxmargin-bottom: 8pxForm Label Required
::after { content: '*'; color: #D50000; }Navigation Bar
background-color: #FFFFFFborder-bottom: 1px solid #E6E6E6padding: 0px 20pxheight: 56pxNavigation Link
color: #0C0C0Cfont-size: 15pxfont-weight: 500font-family: cnn_sans_displaypadding: 0px 16pxline-height: 56pxtext-decoration: noneNavigation Link Active
color: #D50000border-bottom: 3px solid #D50000padding-bottom: 0pxNavigation Link Hover
color: #A20000Mobile Menu Button
background-color: transparentcolor: #0C0C0Cborder: nonepadding: 8px 12pxheight: 40pxMobile Menu Button Hover
color: #D50000Breaking News Badge
background-color: #D50000color: #FFFFFFfont-size: 12pxfont-weight: 600font-family: cnn_sans_displaypadding: 4px 12pxborder-radius: 4pxline-height: 16pxtext-transform: uppercaseletter-spacing: 0.5pxPremium Badge
background-color: #6A29D5color: #FFFFFFfont-size: 12pxfont-weight: 600padding: 4px 12pxborder-radius: 4pxAnalysis Badge
background-color: #E6E6E6color: #0C0C0Cfont-size: 12pxfont-weight: 600padding: 4px 12pxborder-radius: 4pxBody Link
color: #0000EEfont-size: 16pxfont-weight: 400font-family: cnn_sans_displaytext-decoration: underlineline-height: 22pxBody Link Hover
color: #6A29D5Body Link Active / Visited
color: #6A29D5Base Unit: 8px
Scale:
4px — Micro spacing (icon padding, internal button spacing)8px — Tight spacing (form control margins, badge padding)12px — Small spacing (component margins, list items)16px — Standard spacing (card padding, section margins)20px — Medium spacing (major component padding)24px — Large spacing (section breaks, container padding)32px — Extra large spacing (major section separation)40px — Jumbo spacing (hero sections, major layout divisions)48px — XL spacing (page-level sections)Usage Context:
1376px (primary content container)1440px (viewport full width)20px on desktop, 16px on tablet, 12px on mobileCNN's layout employs aggressive whitespace to combat cognitive overload in high-information environments. Generous margins between content blocks create visual breathing room, while tight internal component spacing emphasizes hierarchy. Whitespace hierarchically separates: articles from sidebars, sections from each other, and content from chrome. This prevents the interface from feeling cluttered despite abundant information density.
0px — Cards, large containers, full-width elements (default, sharp edges)4px — Buttons, badges, form inputs, small interactive elements6px — Secondary buttons, alternative card styles8px — Search bars, large text inputs, expanded modals12px — Rounded corner accents (optional for premium sections)| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, no elevation | Default cards, body text, static content |
| Raised (L1) | 0px 3px 8px rgba(106, 115, 129, 0.06), 0px 6px 12px rgba(106, 115, 129, 0.16) | Hovering cards, dropdown menus, interactive states |
| Modal (L2) | 0px 12px 32px rgba(0, 0, 0, 0.2) | Modal dialogs, full-screen overlays, popovers |
| Overlay (L3) | 0px 20px 48px rgba(0, 0, 0, 0.3) | Navigation drawers, toast notifications |
Shadow Philosophy
CNN employs minimal, subtle shadows to maintain the high-contrast, news-focused aesthetic. Shadows appear only on interactive elements—hovering cards, dropdowns, modals—to signal elevation and interactivity. The color palette uses neutral gray (#6A7381) at low opacity to avoid competing with content. Shadows are reserved for functional affordance, never decorative flourish. This restraint preserves the authoritative, professional tone essential to news delivery.
#D50000, #A20000) for non-urgent, non-breaking content—it dilutes the emergency signal12px 24px; preserve touch target accessibility (minimum 44px height)#6A29D5, #CDB6F1) for general UI; reserve for premium/subscriber-exclusive zones| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single-column layout, 4px spacing reduction, 16px nav height, hamburger menu active |
| Tablet | 768px–1199px | 8-column grid, 20px horizontal padding, consolidated sidebars, 48px nav height |
| Desktop | 1200px–1919px | 12-column grid, 80px columns, dual sidebars, 56px nav height, max-width 1376px content |
| Large Desktop | 1920px+ | Centered layout with side padding, fixed max-width enforced, expanded whitespace |
44px (WCAG 2.5 recommendation)48px (square icon buttons)8px minimum around all link text48px (minimum)40px × 40px (including padding)8px minimum gap to prevent mis-taps20px × 20px with 8px label paddingMobile (< 768px)
Tablet (768px–1199px)
Desktop (1200px+)
#D50000)#0000EE)#0C0C0C)#0C0C0C)#404040)#6A7381)#FFFFFF)#B1B1B1)0px 3px 8px rgba(106, 115, 129, 0.06), 0px 6px 12px rgba(106, 115, 129, 0.16)#6A29D5)#FF3F3F)font-family: 'cnn_sans_display', 'Roboto', sans-serif as default#D50000), white text, 12px weight 600, uppercase badge labelpadding: 12px 24px minimum; use border-radius: 4px#0000EE) in body text; apply underline; hover to Purple (#6A29D5)48px height, padding: 10px 16px, border 1px solid #B1B1B1, border-radius: 8px#0C0C0C → #F5F5F5), whites (#FFFFFF → #0C0C0C), maintain red accent (#D50000 unchanged)