CBS News Design System Deep Dive

1. Brand Overview

CBS News is a heritage news brand. It’s been around long enough that its logo is basically part of American visual culture. The website reflects that — the design system is built for authority, clarity, and trust. No fluff. No playful color gradients. This isn’t a startup trying to look “disruptive.” It’s a newsroom.

The vibe is serious modernism. Black, white, and a single functional blue (#0079d3) carry the brand’s voice. That blue is not decorative — it’s a signal. Links, CTAs, and certain interactive elements use it to pull you into action. Everything else sits in strong neutral tones.

Typography is equally no-nonsense. Headlines use Publico Headline — a serif with weight and gravitas. Supporting text and UI labels lean on Proxima Nova and Helvetica — sans-serifs for clarity and accessibility. This mix says: “We’re authoritative, but we’re also readable at speed.”

Spacing is tight but consistent. The 8px grid is everywhere. You can feel the rhythm — 8px, 16px, 24px, 40px — no random gaps. It keeps the content dense without being cramped, which matters when you’re pushing live news updates.

Borders and shadows are minimal. Shadows are used sparingly and lightly (rgba(0,0,0,0.1) for small lifts). Most separation is done with thin (1px) light gray (#e8e8e8) rules. This matches the brand’s restrained tone — depth is functional, not decorative.

Buttons are utilitarian. There’s a primary (blue background, white text) and a secondary (white background, blue text). Both have the same structure — 5px radius, 16px text, 600 weight. States are clear but not flashy: hover goes light gray, active darkens the text.

This is a design system that prioritizes clarity over personality. It’s meant to scale across breaking news, investigative journalism, and video content without distraction. Everything you see is there to guide the eye and reinforce trust.

2. Color System

2.1 Primary Colors

The hero here is #0079d3 (rgb(0,121,211)). It’s the only vivid color in the palette, and it’s used almost exclusively for interactive elements — primary buttons, certain links, focus outlines. This is smart. In a sea of black and white, that blue pops hard.

Psychologically, blue conveys trust, stability, and professionalism. CBS News’ choice is slightly saturated — enough to stand out in digital contexts without skewing toward playful or techy. Compare it to BBC News (red) or CNN (deep red). Blue feels cooler, calmer, less alarmist — fitting for a brand positioning itself as steady.

2.2 Complete Palette

2.3 Color Relationships

The contrast between #0079d3 and #ffffff is strong — easily above WCAG AA for normal text. The same goes for #101010 on white. Links that go from black (#101010) to darker gray (#333333) on hover maintain readability but don’t scream. The hover gray backgrounds (#f2f2f2) are subtle enough to not break the page’s visual rhythm.

Dark mode isn’t evident here — the system seems fixed in light mode. This makes contrast even more important, and they’ve nailed it.

2.4 Usage Guide

• Good combinations:

  • #0079d3 background + #ffffff text (CTA clarity)
  • #101010 text on #ffffff background (body copy)
  • Light gray borders (#e8e8e8) on white surfaces (subtle separation)

• Avoid:

  • Blue on black — too low contrast.
  • Gray text on gray background — risks falling below accessibility thresholds.
  • Mixing primary blue with hover gray background — reduces the blue’s impact.

3. Typography

3.1 Font Families

• Publico Headline — Serif. Heavy weights for headlines. No fallbacks listed.
• Publico Text — Serif. Lighter for longer reads.
• Proxima Nova — Sans-serif. Used for UI labels, small headings, links.
• Helvetica (with Arial fallback) — Sans-serif. Used in utilitarian UI text.
• Times — Occasional usage for legacy or embedded elements.

No Google or Adobe fonts detected. Likely custom-hosted.

3.2 Type Scale

3.3 Hierarchy

They use big jumps: 56px for main headlines, then drop to 32px and 24px for subheads. This creates clear visual hierarchy on dense pages. Smaller sans-serif sizes (14–18px) handle navigation and metadata. The serif/sans mix clearly signals “content vs. interface.”

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Variants in multiples and half-steps.

4.2 Layout

Breakpoints:

320, 375, 412, 420, 480, 767, 768, 769, 812, 992, 1020, 1024, 1359, 1360, 1440, 1800, 1920px.

They’re covering every major mobile and desktop width. Likely fluid grid with max width around 1440–1920px.

5. Visual Elements

Borders

• Thin light gray (#e8e8e8) for separators.
• 1px solid white used for certain inverted button states.
• Occasional medium gray (#dcdcdc) for softer dividers.
• Outset/inset styles appear in legacy or embedded components (rare).

Border Radius

Shadows

Minimal use:

• rgba(0,0,0,0.1) 0px 2px 4px 0px — small lifts (cards, banners)
• Rare heavier shadows (rgba(0,0,0,0.25) or rgba(16,16,16,0.15)) — bottom edges.

6. Components

6.1 Buttons

Primary (blue background):

• Default:
  • bg: #0079d3
  • text: #ffffff
  • border: 1px solid #0079d3
  • radius: 5px
  • font: 16px, weight 600
• Hover: bg #f2f2f2, text inherit, border none.
• Active: text color #1766b9.
• Focus: outline 2px transparent, focus text color #1766b9.

Secondary (white background):

• Default:
  • bg: #ffffff
  • text: #0079d3
  • border: 1px solid #0079d3
  • radius: 5px
  • font: 16px, weight 600
• Same hover/active/focus behavior as primary.

6.2 Links

Multiple link styles:

1. Black (#101010) text, bold (700). Hover: darker gray (#333333) underline.
2. White text (#ffffff), regular (400). Hover: #333333 underline (odd contrast — likely for dark bg).
3. Dark gray (#181818) regular (400).
4. Blue (#0079d3) semibold (600).

6.3 Forms

No complex input styling detected. Likely native inputs with minimal custom styling.

6.4 Cards

No explicit card component detected, but shadow and border patterns suggest:

• bg: white
• border-radius: 4–8px
• border: 1px solid light gray
• padding: multiples of 8px
• subtle shadow for elevation.

7. Design Tokens

:root {
  /* Colors */
  --color-text-black: #101010;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-blue: #0079d3;
  --color-live-bg: #0674c8;
  --color-gray-light: #e8e8e8;
  --color-gray-medium: #dcdcdc;
  --color-focus-blue-dark: #1766b9;
  --color-hover-gray: #f2f2f2;
  --color-link-gray-hover: #333333;
  --color-alt-text-gray: #181818;

  /* Typography */
  --font-publico-headline: "Publico Headline";
  --font-publico-text: "Publico Text";
  --font-proxima-nova: "Proxima Nova";
  --font-helvetica: "Helvetica", "Arial";
  --font-times: "Times";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-8_44: 8.44px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15_96: 15.96px;
  --space-16: 16px;
  --space-18_08: 18.08px;
  --space-20: 20px;
  --space-22_77: 22.7696px;
  --space-31: 31px;
  --space-40: 40px;
  --space-60: 60.0096px;
  --space-168_75: 168.75px;
  --space-231_51: 231.51px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-16-top: 16px 16px 0 0;
  --radius-20: 20px;
  --radius-50: 50%;
  --radius-100: 100%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 2px 4px 0px;
  --shadow-md: rgba(0,0,0,0.25) 0px -4px 12px 0px;
  --shadow-md-dark: rgba(16,16,16,0.15) 0px -4px 12px 0px;
}

8. AI Coding Assistant Prompt

# CBS News Design System Specification

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

## Brand Context
CBS News’ design philosophy is clarity, authority, and restraint. Typography mixes authoritative serif headlines with functional sans-serif UI text. Color is almost monochrome, with a single functional blue for interaction cues. Spacing is tight but consistent, on an 8px grid.

## Color Palette
- Text Black: #101010 — Primary text
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — Logos, icons
- Primary Blue: #0079d3 — CTAs, links, primary buttons
- Live Indicator Blue: #0674c8 — Live stream badges
- Light Gray: #e8e8e8 — Borders, dividers
- Medium Gray: #dcdcdc — Secondary borders
- Focus Blue Dark: #1766b9 — Button active/focus text
- Hover Gray: #f2f2f2 — Hover backgrounds
- Link Gray Hover: #333333 — Link hover color
- Alt Text Gray: #181818 — Secondary text

## Typography
- Publico Headline — Headlines
- Publico Text — Body serif
- Proxima Nova — UI sans
- Helvetica, Arial — Utility text
- Times — Legacy content

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | Publico Headline | 56px | 900 | 1.00 | Main headline |
| H2 | Publico Headline | 32px | 900 | 1.00 | Section headline |
| ... | ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale: 1, 2, 4, 5, 6, 8, 8.44, 9, 10, 12, 15.96, 16, 18.08, 20, 22.77, 31, 40, 60, 168.75, 231.51px.

## Border Radius
- sm: 4px — list items, anchors
- md: 5px — buttons
- lg: 8px — cards
- full: 50% — circles
- pill: 100% — pill spans

## Shadows & Depth
- Small: rgba(0,0,0,0.1) 0px 2px 4px
- Medium: rgba(0,0,0,0.25) 0px -4px 12px

## Components

### Primary Button
Default: bg #0079d3, text #ffffff, border 1px solid #0079d3, radius 5px, font-weight 600, font-size 16px.  
Hover: bg #f2f2f2, text inherit, border none.  
Active: text #1766b9.  
Focus: outline 2px transparent, text #1766b9.

### Secondary Button
Default: bg #ffffff, text #0079d3, border 1px solid #0079d3, radius 5px, font-weight 600, font-size 16px.  
Same hover/active/focus as primary.

### Navigation Links
Black text (#101010), bold 700, no underline default. Hover: #333333 underline.

## Layout & Responsive Rules
Breakpoints: 320, 375, 412, 420, 480, 767, 768, 769, 812, 992, 1020, 1024, 1359, 1360, 1440, 1800, 1920px.

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: visible outline for keyboard nav
- Hover: subtle color change or underline

## DO
- Use only colors from palette
- Maintain 8px grid
- Use Publico Headline for headlines
- Keep hover states subtle
- Use border radius consistently

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Reduce contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0079d3;
  color: #ffffff;
  border: 1px solid #0079d3;
  border-radius: 5px;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f2f2f2;
  color: inherit;
  border: none;
}
.btn-primary:focus {
  outline: 2px solid transparent;
  color: #1766b9;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #0079d3;
  border: 1px solid #0079d3;
  border-radius: 5px;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-secondary:hover {
  background: #f2f2f2;
  color: inherit;
  border: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 4px;
}
```

9. Summary

TL;DR — CBS News’ design system is all about authority and clarity. It’s a restrained palette (black, white, blue), a tight 8px grid, and a serif/sans type pairing that signals “serious content.” Buttons are functional, shadows are minimal, and every pixel reinforces trust.

Brand Keywords:

• trust-first
• serious-modernist
• news-authoritative
• restrained-functional
• clarity-driven