Warner Bros Design System Deep-Dive

1. Brand Overview

Warner Bros is one of the most recognizable entertainment brands in the world — the shield logo, the blue and gold, the cinematic heritage. The website reflects that heritage but in a stripped-down, functional way. This isn’t a glossy, overloaded UI trying to wow visitors with visual tricks. It’s a platform for discovery: films, TV shows, games, merchandise. The design leans on clarity and brand recognition rather than heavy ornamentation.

The vibe: modern corporate entertainment. The Montserrat typeface gives it a contemporary, geometric feel. Colors are mostly neutral with one strong accent — that gold (#fec200) — which plays against deep blues in some components. The site doesn’t drown you in blue and gold; instead, it uses white and black neutrals as the canvas, letting the accents pop where needed.

Design philosophy: keep the brand identity locked in but don’t let it get in the way of content. Typography is consistent and sans-serif, spacing follows an 8px base grid, and components are cleanly defined. Corners are mostly rounded at 15px in high-usage areas — a choice that softens the interface without making it playful. Buttons are bold in interaction but restrained in form.

Audience: the global mass market — from kids checking out animated films to adults looking for HBO dramas. The UI needs to be readable, accessible, and adaptable across devices from 320px wide phones to 2000px desktop screens.

What I like: they’ve kept the shield logo intact and visible without over-branding every surface. The palette is tight — only a handful of colors — which keeps things consistent. The typography stack is clear and safe: Montserrat with Arial/Helvetica fallbacks. They’ve stuck to an 8px spacing scale, which makes the whole system predictable for developers.

What surprised me: the primary button variant is dark with white text — not the gold or blue you might expect from the logo — while the secondary button is outlined in blue with gold text. It’s a reversal of typical brand-first CTA design, and it works because it makes the secondary button visually distinct without overpowering the primary.

2. Color System

2.1 Primary Colors

The palette is dominated by neutrals: pure white (#ffffff) is everywhere — backgrounds, text in dark contexts. Black (#000000) is used for text and some borders. The only strong brand accent is #fec200 (gold), used sparingly in buttons and highlights. There’s also a mid-gray (#555555) and a very light gray (#e5e5e5) for secondary surfaces.

Oddly, the website doesn’t lean heavily into the Warner Bros signature blue in the extracted palette data — the blue shows up in specific button borders (rgb(1, 92, 254)) and hover states, but it’s not a core background color.

Primary brand color here: #fec200 — psychologically, gold conveys prestige, value, heritage. Against the neutrals, it stands out without feeling cheap.

Compared to competitors (Disney, Netflix): Netflix is red/black heavy. Disney uses bright blue and white. Warner Bros here is more restrained — less saturated backgrounds, more focus on white space and typography.

2.2 Complete Palette

2.3 Color Relationships

White (#ffffff) on black (#000000) is maximum contrast — WCAG AAA compliant. Gold (#fec200) on white has low contrast (ratio ~1.5:1) — so it’s used for accents, not body text. Black text (#000000) on light gray (#e5e5e5) is readable but not as strong — good for secondary text.

Dark mode: not present. The current palette is light-first, with some dark backgrounds in components.

2.4 Usage Guide

• Gold works best on dark backgrounds — use for decorative accents, not for large text blocks.
• Blue border (#015cfe) + gold text is the secondary button formula — avoid using this combo outside CTAs.
• White text on blue or black backgrounds is safe and readable.
• Avoid gold text on white — fails accessibility contrast.
• Use light gray for subtle separators or background panels.

3. Typography

3.1 Font Families

Single family across the board: Montserrat, fallbacks Arial, Helvetica. No Google Fonts or Adobe Fonts detected — likely self-hosted or system-provided Montserrat.

Montserrat is geometric, modern, and works well for a corporate entertainment brand. Arial/Helvetica fallbacks keep it safe for environments without custom fonts.

3.2 Type Scale

3.3 Hierarchy

Headings range from 24px to 16px, with weights from 300 to 800. The uppercase 800 weight version at 24px is the most emphatic. Buttons are relatively large — up to 21px — which makes CTAs prominent. Captions and links drop down to ~13px, keeping them subtle.

Readability is solid: line heights are mostly tight (1.0–1.1) for headings, looser (1.5–2.0) for body/link text.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints range from small phones (399px) up to ultra-wide screens (2000px). The step sizes suggest careful tuning for specific devices: 426px, 768px, 1024px, 1400px, etc. This means layouts are adapted at many points, not just the usual mobile/tablet/desktop triad.

5. Visual Elements

Border Radius

High-frequency: 15px — used in most divs and cards. Smaller radii (2px, 3px) for buttons and inputs. Full circles (50%) for avatars or round icons.

Values:

• 0px — flat edges
• 2px — small controls
• 15px — main UI cards
• 16px — pill-ish buttons
• 50% — circular elements

Shadows

Minimal use — 4 shadow styles, subtle:

• rgba(0, 0, 0, 0.2) -2px 2px 3px, rgba(0, 0, 0, 0.2) 2px 2px 3px
• rgb(153, 153, 153) 0px 2px 10px -3px
• rgb(199, 197, 199) -3px -3px 5px -2px
• rgb(199, 197, 199) 0px 0px 12px 2px

They’re used sparingly — mostly flat design with occasional depth.

Borders

1px solid white for dark backgrounds. Accent borders in blue (#015cfe) and green (#32ae88) appear in low frequency. Some inset styles for embedded elements (iframes).

6. Components

6.1 Buttons

Primary Button

• Default: background: rgb(14,14,14) (near black), color: white, padding 1px 6px, radius 0px, no border.
• Hover: background: rgb(30,174,219) (bright cyan), opacity 0.9.
• Focus: outline: 2px solid black, background cyan, border 1px solid black.

Secondary Button

• Default: transparent background, color: gold (#fec200), padding 6px 13px 4px, radius 16px, border 3px solid #015cfe.
• Hover: scale 1.08, color: rgb(34,133,247), white background, box-shadow glow.
• Active: dark green background, white text, 1px semi-transparent border.
• Focus: cyan background, white text, outline black.

6.2 Links

Three variants:

• White text → hover blue (#3860be)
• Black text → hover blue
• Blue text (#0078d6) → hover blue

No underlines in any state.

6.3 Forms

No text inputs defined in extracted data — likely styled minimally with 1px borders (light gray).

6.4 Cards

Rounded 15px, padding 15px or 180px for large sections. Occasional subtle shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #e5e5e5;
  --color-black: #000000;
  --color-dark-gray: #555555;
  --color-gold: #fec200;
  --color-blue-border: #015cfe;
  --color-blue-hover: #1eaedb;

  /* Typography */
  --font-family-primary: 'Montserrat', Arial, Helvetica;
  --font-size-xxl: 24px;
  --font-size-xl: 21px;
  --font-size-lg: 16px;
  --font-size-md: 14.4px;
  --font-size-sm: 14px;
  --font-size-xs: 13px;
  --font-size-xxs: 12px;
  --line-height-tight: 1.0;
  --line-height-snug: 1.1;
  --line-height-normal: 1.5;
  --line-height-loose: 1.63;
  --line-height-extra-loose: 2.0;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-32: 32px;
  --space-100: 100px;
  --space-180: 180px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 15px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-1: rgba(0,0,0,0.2) -2px 2px 3px, rgba(0,0,0,0.2) 2px 2px 3px;
  --shadow-2: rgb(153,153,153) 0px 2px 10px -3px;
  --shadow-3: rgb(199,197,199) -3px -3px 5px -2px;
  --shadow-4: rgb(199,197,199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Warner Bros Design System Specification

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

## Brand Context
Warner Bros values clarity, brand heritage, and functional design. The UI is built on a clean neutral base with gold and blue accents used sparingly. Typography is geometric and modern, spacing follows an 8px grid.

## Color Palette
- White: #ffffff — Backgrounds, text on dark
- Light Gray: #e5e5e5 — Secondary backgrounds, dividers
- Black: #000000 — Text, outlines
- Dark Gray: #555555 — Secondary text, icons
- Gold: #fec200 — Accent text, highlights
- Blue Border: #015cfe — Secondary button border
- Blue Hover: #1eaedb — Primary button hover/focus background

## Typography
Font family: 'Montserrat', Arial, Helvetica

| Level     | Size   | Weight | Line Height | Use For |
|-----------|--------|--------|-------------|---------|
| Heading-1 | 24px   | 300    | 1.10        | Page titles |
| Heading-1 | 24px   | 700    | 1.10        | Strong headings |
| Heading-1 | 24px   | 800    | 1.00        | Uppercase emphasis |
| Button    | 21px   | 300    | 1.00        | Large CTAs |
| Heading-1 | 21px   | 700    | 1.00        | Section titles |
| Link      | 16px   | 300    | 1.63        | Navigation links |
| Caption   | 14px   | 600    | 1.50        | Labels |
| Button    | 12px   | 700    | 1.00        | Small CTAs |

## Spacing & Grid
Base: 8px
Scale: 1px, 5px, 6px, 8px, 10px, 15px, 16px, 20px, 30px, 32px, 100px, 180px
Use multiples of base for all layout spacing.

## Border Radius
- none: 0px — flat edges
- sm: 2px — small controls
- md: 15px — cards
- lg: 16px — pill buttons
- full: 50% — avatars, circular icons

## Shadows & Depth
Light shadows only:
- rgba(0,0,0,0.2) -2px 2px 3px, rgba(0,0,0,0.2) 2px 2px 3px
- rgb(153,153,153) 0px 2px 10px -3px
- rgb(199,197,199) -3px -3px 5px -2px
- rgb(199,197,199) 0px 0px 12px 2px

## Component Specifications

### Primary Button
Default:
```css
background: rgb(14,14,14);
color: #ffffff;
padding: 1px 6px;
border-radius: 0px;
border: none;
font-weight: 400;
font-size: 13.3333px;
```
Hover:
```css
background: #1eaedb;
opacity: 0.9;
color: #ffffff;
```
Focus:
```css
outline: 2px solid #000000;
background: #1eaedb;
border: 1px solid #000000;
```

### Secondary Button
Default:
```css
background: transparent;
color: #fec200;
padding: 6px 13px 4px;
border-radius: 16px;
border: 3px solid #015cfe;
font-weight: 300;
font-size: 21px;
```
Hover:
```css
transform: scale(1.08);
color: rgb(34,133,247);
background: #ffffff;
box-shadow: #ffffff 0px 0px 5px 0px;
```
Active:
```css
background: rgb(44,100,21);
color: #ffffff;
border: 1px solid rgba(162,192,169,0.5);
```

### Navigation Links
No underline. Color varies by context.
Hover: change to #3860be.

### Cards
background: #ffffff;
border-radius: 15px;
padding: 15px;
optional subtle shadow.

## Layout & Responsive Rules
Breakpoints: 399px, 426px, 768px, 1024px, 1400px, 2000px.
Adjust layouts progressively, not just mobile/tablet/desktop.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes.
- Focus indicators: solid outlines in black.

## DO List
- Use ONLY colors from the palette — no extras.
- Maintain 8px grid — spacing must be a multiple.
- Keep buttons consistent in radius and padding.
- Use Montserrat for all text.
- Apply shadows sparingly.

## DON'T List
- Don't use gold text on white backgrounds.
- Don't mix sharp and rounded corners in one component.
- Don't add custom blues or reds.
- Don't overload shadows.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: rgb(14,14,14);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 0;
  border: none;
  font-weight: 400;
  font-size: 13.3333px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  opacity: 0.9;
}
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #fec200;
  padding: 6px 13px 4px;
  border-radius: 16px;
  border: 3px solid #015cfe;
  font-weight: 300;
  font-size: 21px;
  transition: transform 150ms ease;
}
.btn-secondary:hover {
  transform: scale(1.08);
  background: #ffffff;
  color: rgb(34,133,247);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 15px;
  padding: 15px;
  box-shadow: var(--shadow-2);
}
```

9. Summary

TL;DR: Warner Bros’ web design system is neutral-first with gold and blue accents, Montserrat type, an 8px grid, and restrained component styling. Buttons are bold in interaction but simple in form. Shadows are minimal, and spacing is consistent.

Brand Keywords:

• heritage-modern
• neutral-base
• accent-disciplined
• grid-consistent
• typography-precise