CNBC Brand Design System Deep Dive

1. Brand Overview

CNBC’s visual language is a strange mix of corporate authority and live-data urgency. This is a news brand built for finance, markets, and business audiences, and everything about the design reinforces speed, precision, and trust. The site is heavy on functional components — tickers, tables, watchlists — and the design system feels engineered for data density rather than lifestyle storytelling.

They’re not trying to seduce you with gradients or soft shadows. Most of the UI is flat, sharp, and high-contrast. Black and white dominate, with deep blues and strategic pops of red, green, and gold for market movement and interaction cues. The palette works because it’s functional first — green means up, red means down — but it’s also consistent with legacy broadcast graphics.

Type is almost entirely Proxima Nova, with Helvetica and Arial as fallbacks. This is a pragmatic choice. Proxima Nova is modern but neutral, readable at small sizes, and versatile enough for heavy headlines and dense tables. There’s also Lyon for some link and caption contexts, which adds a touch of editorial refinement.

Spacing is tight. You can tell the layout grid is based on an 8px logic, but they’re not afraid to drop down to odd values like 6.5px or 12.992px for specific alignments. That’s a signal this system evolved over time rather than being rebuilt from scratch.

If you’re building for CNBC, think: high data density, minimal decoration, and instant state changes. The brand speaks to traders, executives, and analysts — people who want numbers, not fluff. Everything in the UI should feel like it belongs on a trading floor display.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(0, 0, 0) (#000000). That’s unusual — most brands use a color for primary. Here, black is the foundation. It’s text, borders, and sometimes background. This works for CNBC because their content is so varied — black anchors everything.

Their most brand-recognizable hue is actually the deep corporate blue #005594 (rgb(0, 85, 148)), which appears in nav menus and active market states. It’s a classic finance blue — conservative, trustworthy, and easy to pair with white.

2.2 Complete Palette

2.3 Color Relationships

The palette is functional. Blue for navigation and neutral trust, red and green for market movement, gold for emphasis. Contrast is strong — black text on white backgrounds, white text on blue or black buttons. Accessibility-wise, most primary text/background combos hit WCAG AA easily.

Hover states often shift blue hues (#005594 → #3860BE). That’s a safe delta for accessibility while giving clear interaction feedback.

Dark mode isn’t implied here — the system is built for a light background with dark text. If you tried to invert, the red/green market colors would hold, but blue links might need rethinking.

2.4 Usage Guide

• Works well: White background + corporate blue nav + black text. Strong, professional.
• Works well: Black background + gold accent for video/play elements — feels premium.
• Avoid: Mixing navy (#002F6C) and corporate blue (#005594) in the same nav context — too close, can look like a mistake.
• Avoid: Using gold for non-interactive elements — it signals emphasis/action.

3. Typography

3.1 Font Families

• Primary: Proxima Nova — Helvetica, Arial fallbacks.
• Editorial Accent: Lyon Text / Lyon
• Icons: icomoon

No Google Fonts or Adobe Fonts sources detected — likely self-hosted.

3.2 Type Scale

Here’s a condensed table of extracted styles (only unique sizes/weights shown):

3.3 Hierarchy

They lean heavily on weight and uppercase transforms to build hierarchy. Size jumps are modest; a 40px headline isn’t huge in this context. High-weight (800, 900) uppercase headings make even small sizes feel assertive. This works for markets data where you don’t want giant headlines overshadowing numbers.

Body copy is rare — most text is label-like. That’s why you see so many 14px–16px weights. Captions in Lyon give a subtle shift for more editorial or feature content.

4. Spacing & Layout

4.1 Spacing Scale

Base logic is 8px, but the dataset shows lots of exceptions:

Odd values like 6.5px and 12.992px are probably legacy or component-specific alignments.

4.2 Layout

Breakpoints are granular — they’ve defined dozens (e.g., 320px, 375px, 768px, 1024px, 1280px, 1850px). This suggests highly tuned responsive layouts, not a simple mobile/tablet/desktop split.

5. Visual Elements

Border Radius

Mostly sharp edges. Values:

• 0–2px: default for most buttons and inputs
• 4px: occasional rounded spans
• 50px: search bar pill

This keeps the UI crisp. The 50px pill is a clear outlier for a specific component.

Shadow System

Minimal shadows; flat design dominates. A few subtle shadows appear on hover or focus:

• rgba(0, 0, 0, 0.08) 0px 1px 3px 1px
• rgba(0, 0, 0, 0.25) 0px 2px 4px 0px

These are functional, not decorative.

Borders & Dividers

Heavy reliance on 1px and 2px solid lines, often black or gray. Gold (#FCB700) is used for active market indicators. Dashed lines appear for some card or section separators.

6. Components

6.1 Buttons

Four main variants extracted:

1. Search Toggle Button

   • Default: bg #001E5A, white text, no border, padding-left 20px, radius 0.
   • Hover: bg #1EAEDB, border 2px solid #FCB700, subtle shadow, opacity 0.9.
   • Focus: Outline 2px solid black, border 1px solid black, bg #1EAEDB.

2. Quote Finder Submit

   • Default: white bg, black text, padding-top 20px, radius 0.
   • Hover/Focus: Same as above.

3. Card Placeholder

   • Default: bg #D7E1E4, white text, no border, radius 0.
   • Focus: outline none.

4. Black Solid Button

   • Default: bg black, white text, padding 12px 10px, radius 2px, border black.
   • Hover/Focus: Same blue/gold treatment as above.

6.2 Links

Multiple color variants:

• Blue (#002F6C) → hover #3860BE
• White → hover #3860BE
• Black → hover #3860BE
• Gray variants for secondary text

No underlines in default; hover keeps it off except for purple link variant.

6.3 Forms

Search inputs:

• Default: white bg, navy text, radius 1px, padding 1px 2px 1px 10px.
• Focus: border 1px solid black, bg #1EAEDB, white text.

6.4 Cards

No dedicated “card” object extracted, but given the flat design, cards likely have white backgrounds, 1px borders, minimal radius (0–4px), and tight padding (10–20px).

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-corporate: #005594;
  --color-gray-mid: #747474;
  --color-charcoal-dark: #171717;
  --color-gray-dim: #696969;
  --color-navy: #002f6c;
  --color-red-decline: #ce2b2b;
  --color-gray-light-bg: #f3f5f7;
  --color-gray-dark: #2e2e2e;
  --color-blue-medium: #3860be;
  --color-gold: #fcb700;
  --color-green-gain: #008456;
  --color-gray-light: #dedede;
  --color-navy-deep: #071d39;
  --color-neutral-dark: #4a4a4a;
  --color-neutral-gray: #808080;

  /* Typography */
  --font-primary: "Proxima Nova", Helvetica, Arial;
  --font-editorial: "Lyon Text";
  --font-icon: "icomoon";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-6-5: 6.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-12-992: 12.992px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-17: 17px;
  --radius-50: 50px;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.08) 0 1px 3px 1px;
  --shadow-medium: rgba(0, 0, 0, 0.25) 0 2px 4px 0;
}

8. AI Coding Assistant Prompt

# CNBC Design System Specification

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

## Brand Context
CNBC’s design is functional, data-driven, and high-contrast. It’s built for financial content, prioritizing legibility, speed, and clarity. The tone is corporate and authoritative, with minimal decoration and high data density.

## Color Palette
- Black: #000000 — Primary text, borders
- White: #ffffff — Background, text on dark
- Corporate Blue: #005594 — Navigation, active markets
- Mid Gray: #747474 — Secondary text
- Dark Charcoal: #171717 — Neutral text
- Dim Gray: #696969 — Section headers
- Navy: #002f6c — Links, watchlist buttons
- Red Decline: #ce2b2b — Negative market changes
- Light Gray BG: #f3f5f7 — Background alt
- Dark Gray: #2e2e2e — Secondary surfaces
- Medium Blue: #3860be — Link hover
- Gold: #fcb700 — Play button, emphasis borders
- Green Gain: #008456 — Positive market changes
- Light Gray: #dedede — Dividers
- Deep Navy: #071d39 — Arrows, flyouts
- Dark Neutral: #4a4a4a — Secondary labels
- Neutral Gray: #808080 — Table elements

## Typography
- Primary: "Proxima Nova", Helvetica, Arial
- Editorial Accent: "Lyon Text"; "Lyon"
- Icons: "icomoon"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 40px | 700 | 1.00 | Page titles |
| H2 | 32px | 800 | 0.94–1.25 | Section headings |
| H3 | 30px | 600 | 1.20 | Subheadings |
| Label | 24px | 800 | 1.21 | Uppercase labels |
| Caption | 14px | 500–700 | 1.14–2.14 | Metadata |
| Body | 16px | 400–600 | 1.00–1.50 | Main text |

## Spacing & Grid
Base: 8px. Scale includes 1, 2, 3, 5, 6, 6.5, 8, 10, 12, 12.992, 14, 15, 16, 17, 20, 24, 25, 30, 35, 40px.
All spacing in multiples of these units.

## Border Radius
- sm: 1px — Inputs
- md: 2px — Small buttons
- lg: 4px — Small UI elements
- pill: 50px — Search bar

## Shadows & Depth
Minimal shadows; flat design preferred. Use:
- rgba(0, 0, 0, 0.08) 0px 1px 3px 1px for subtle elevation
- rgba(0, 0, 0, 0.25) 0px 2px 4px 0px for hover

## Component Specifications

### Primary Button
Default:
```css
background: #001e5a;
color: #ffffff;
padding: 0 0 0 20px;
border-radius: 0;
border: none;
font-weight: 400;
font-size: 13.3333px;
```
Hover:
```css
background: #1eaedb;
border: 2px solid #fcb700;
box-shadow: rgba(130,130,130,0.2) 0 2px 4px 0;
opacity: 0.9;
```
Focus:
```css
outline: 2px solid #000000;
border: 1px solid #000000;
background: #1eaedb;
```

### Secondary Button
Default: white bg, black text, padding-top 20px.
Hover/Focus: same blue/gold treatment as primary.

### Input Field
Default:
```css
background: #ffffff;
color: #071d39;
border-radius: 1px;
padding: 1px 2px 1px 10px;
```
Focus:
```css
border: 1px solid #000000;
background: #1eaedb;
color: #ffffff;
```

### Links
Blue (`#002f6c`) with hover `#3860be`, no underline.

## Layout & Responsive Rules
- Breakpoints: 320px up to 1850px, granular steps.
- Maintain 8px grid.

## Interaction Rules
- Transition: 150ms ease on background, border, color changes.
- Focus: always visible outline for accessibility.

## DO
- Use only palette colors.
- Keep sharp corners unless radius token specified.
- Maintain high contrast for text.
- Use uppercase for headings/labels as per type specs.
- Align to 8px grid.

## DON'T
- Add custom colors.
- Overuse shadows.
- Mix rounded and square corners arbitrarily.
- Lower contrast for text.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #001e5a;
  color: #fff;
  padding: 0 0 0 20px;
  border-radius: 0;
  border: none;
  font-size: 13.3333px;
  font-weight: 400;
}
.btn-primary:hover {
  background: #1eaedb;
  border: 2px solid #fcb700;
}
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 2px;
  padding: 20px;
}
```

Input:
```css
.input {
  background: #ffffff;
  color: #071d39;
  border-radius: 1px;
  padding: 1px 2px 1px 10px;
}
.input:focus {
  border: 1px solid #000000;
  background: #1eaedb;
  color: #ffffff;
}
```

9. Summary

TL;DR — CNBC’s design system is flat, functional, and built for speed. It uses a black/white/blue core with red/green for market signals and gold for emphasis. Type is Proxima Nova-heavy, uppercase, and weight-driven. Spacing is tight, corners are sharp, and shadows are rare.

Brand Keywords:

• data-first
• corporate-authoritative
• high-contrast
• sharp-edged
• news-driven