IMDb Brand Design System Deep Dive

1. Brand Overview

IMDb’s design language is exactly what you’d expect from the world’s largest movie database: bold, high-contrast, and unmistakably cinematic. The first thing that hits you is the yellow — that very specific #f5c518 — sitting against deep blacks. It’s not subtle. It’s not trying to disappear. This is a brand that wants instant recognition, whether you’re scrolling on your phone or watching trailers fullscreen.

The vibe is utilitarian with a touch of personality. The site is packed with content — posters, ratings, cast lists — but the design system does a lot of heavy lifting to keep it organized. They lean on strong typographic hierarchy, consistent spacing, and a very controlled use of color to make dense information scannable. There’s no ornamental fluff here; if something is styled, it’s styled because it needs to guide the user’s eyes.

The philosophy feels like “functional brand presence.” IMDb doesn’t want to be a silent UI. The yellow buttons scream “click me,” the white-on-black links are legible in any context, and the typography is clean, modern, and neutral enough to sit alongside any movie artwork without clashing. This is a design system built for scale — hundreds of thousands of pages, millions of assets — but it keeps the IMDb personality intact.

It’s also a system that’s very much anchored in its Amazon-owned ecosystem. Vuetify components are scattered throughout, SVG icons are the standard, and breakpoints are tuned for a responsive experience that works from tiny phones to large cinema displays. This is not experimental design — it’s production-hardened, built to support constant content churn, and it prioritizes speed and clarity over visual experimentation.

2. Color System

2.1 Primary Colors

The primary brand color is #f5c518 (rgb(245, 197, 24)). This is the IMDb yellow — bright, saturated, and impossible to miss. Psychologically, yellow is about optimism, attention, and action. Here, it’s primarily used for CTAs (call-to-action buttons), accents in navigation, and the logo background. Competitors like Rotten Tomatoes lean on red and green, while Metacritic uses muted blues and grays. IMDb’s yellow is more aggressive; it’s a stoplight telling you “this is the thing to click.”

2.2 Complete Palette

2.3 Color Relationships

They maintain high-contrast pairings: yellow (#f5c518) against black (#000000) or white (#ffffff) for maximum legibility. Link blue (#0000ee) is the classic browser default, which is unusual — most brands override this. The palette covers functional states: success (#67ad4b), error (#fb3c3c), warning (#ff7503), and various accent shades for decorative or secondary emphasis.

Accessibility-wise, black text on yellow passes WCAG AA easily. White text on dark gray (#121212) also passes. The only caution is the link blue — on white it’s fine, but on dark backgrounds, it might need a lighter variant for contrast.

2.4 Usage Guide

• Do pair #f5c518 with either #000000 or #ffffff — it pops and stays readable.
• Do use accent greens and reds for semantic states only — don’t mix them into decorative elements.
• Avoid using multiple accents together — green + orange feels like a traffic light.
• Avoid putting link blue on dark backgrounds without adjusting brightness.
• Dark mode uses #121212 as the base, with white text and yellow accents.

3. Typography

3.1 Font Families

• Primary: Roboto
• Fallbacks: Helvetica, Arial
• Secondary: Times (occasional use in headings)
• Source: No Google Fonts import detected, likely system Roboto or bundled.

Roboto is a safe choice here — modern, neutral, geometric enough for UI clarity but flexible enough to sit next to varied poster typography. Times is only used in specific contexts, possibly for editorial or quote styling.

3.2 Type Scale

3.3 Hierarchy

They use size jumps of 32px → 24px → 20px → 16px → 14px → 12px to create a clear hierarchy. Larger sizes (32px, 24px) are for page and section titles. 20px is subheadings. 16px is body and buttons. 14px and below is for captions and metadata. The consistent Roboto family keeps it unified, and weight changes (400, 500, 600) give emphasis without introducing new typefaces.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. They use multiples and occasional non-standard values.

4.2 Layout

Breakpoints: 479px, 480px, 599px, 600px, 1023px, 1024px, 1279px, 1280px. This gives tight control over tablet/desktop shifts. Likely fluid widths between breakpoints with fixed grid gaps based on the spacing scale.

5. Visual Elements

Border Radius

Shadows

Only 3 shadow values, all subtle:

1. rgba(0,0,0,0.12) 0px 0px 1px 0px
2. Multi-layer soft shadow for small elevation
3. Multi-layer deeper shadow for modals/popups

Mostly flat design with occasional depth for emphasis.

Borders & Dividers

Thin 1px borders with low-opacity white or black, used sparingly. Dividers use rgba(255,255,255,0.2).

6. Components

6.1 Buttons

Search Submit Button

• Default: white bg, rgba(0,0,0,0.54) text, 4px radius
• Hover: rgb(247, 221, 149) bg
• Font: 16px, weight 400

Primary CTA

• Default: #f5c518 bg, black text, 24px radius, 0px border
• Hover: rgb(247, 221, 149) bg
• Active: black text
• Focus: outline from --ipt-focus-outline-on-baseAlt

Icon Button

• Default: transparent bg, 50% radius, padding 11px
• Hover: light yellow bg

Pager Button

• Default: semi-transparent dark bg, white text, 4px radius, white border

Scroll-to-top

• Default: light gray bg, black text, 16px radius, deep shadow
• Hover: light yellow bg

6.2 Links

White, black, or colored depending on context. No underline. Hover states mostly absent — possibly handled globally.

6.3 Forms

Text inputs: transparent bg, white or black text depending on theme, no border radius. Padding varies by type.

6.4 Cards

Not explicitly detailed, but 4px and 12px radii are common. Shadows minimal or absent.

7. Design Tokens

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-accent-green: #67ad4b;
  --color-black: #000000;
  --color-dark-gray: #121212;
  --color-error-red: #fb3c3c;
  --color-brand-yellow: #f5c518;
  --color-white: #ffffff;
  --color-accent2-blue: #0e63be;
  --color-accent5-orange: #ff7503;
  --color-accent4-green: #007207;
  --color-accent6-purple: #981f83;
  --color-light-shade2: #f0f0f0;
  --color-blockquote-accent2: #e7eff9;
  --color-blockquote-accent1: #fef9e8;
  --color-blockquote-accent3: #f8e9e6;
  --color-blockquote-accent4: #e6f3e6;
  --color-blockquote-alt-accent4: #1f3417;
  --color-blockquote-alt-accent2: #111f30;
  --color-blockquote-alt-accent1: #312705;
  --color-blockquote-alt-accent3: #320c0c;

  /* Typography */
  --font-primary: "Roboto", Helvetica, Arial;
  --font-secondary: "Times";
  --font-size-xxl: 32px;
  --font-size-xl: 24px;
  --font-size-lg: 20px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /* Spacing */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5-25: 5.25px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-70: 70px;
  --space-97: 97px;
  --space-113-031: 113.031px;
  --space-113-047: 113.047px;
  --space-154: 154px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.12) 0px 0px 1px 0px;
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 5px 8px 0px, rgba(0, 0, 0, 0.12) 0px 1px 14px 0px;
}

8. AI Coding Assistant Prompt

# IMDb Design System Specification

You are an IMDb design expert. Build UIs matching their visual language exactly.

## Brand Context
IMDb’s design is bold and functional. It uses high-contrast yellow/black pairings, clean Roboto typography, and a strict 8px spacing grid. Color is purposeful: yellow for CTAs, green/red for semantic states, and minimal shadows for depth.

## Color Palette
- Brand Yellow: #f5c518 — Primary CTAs, logo background
- Link Blue: #0000ee — Hyperlinks
- Accent Green: #67ad4b — Positive states
- Black: #000000 — Text, icons
- Dark Gray: #121212 — Dark backgrounds
- Error Red: #fb3c3c — Errors, alerts
- White: #ffffff — Text on dark, backgrounds
- Accent2 Blue: #0e63be — Highlights
- Accent5 Orange: #ff7503 — Warnings
- Accent4 Green: #007207 — Positive states
- Accent6 Purple: #981f83 — Decorative
- Light Shade2: #f0f0f0 — Surfaces
- BlockQuote colors: various for backgrounds

## Typography
Primary font: "Roboto", Helvetica, Arial  
Secondary font: "Times"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Button | 32px | 400 | 0.75 | Hero buttons |
| H1 | 32px | 500 | 1.25 | Page titles |
| H2 | 24px | 600 | 1.20 | Section headings |
| Subhead | 20px | 600 | 1.20 | Subsection |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Caption | 14px | 400 | 1.43 | Metadata |
| Small | 12px | 400 | 1.33 | Footnotes |

## Spacing & Grid
Base: 8px  
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 70px, 97px, 113px, 154px  
Apply to paddings, margins, gaps.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 12px — cards, images
- lg: 24px — pill buttons
- full: 50% — icons, avatars

## Shadows & Depth
- Small: rgba(0,0,0,0.12) 0px 0px 1px
- Medium: multi-layer shadow for small elevation
- Large: multi-layer shadow for modals

## Component Specifications

### Primary Button
Default: bg #f5c518, color #000000, padding 0px 32px, radius 24px, border none, font-size 14px, font-weight 500  
Hover: bg rgb(247, 221, 149)  
Active: color #000000  
Focus: outline var(--ipt-focus-outline-on-baseAlt)

### Secondary Button (Search Submit)
Default: bg #ffffff, color rgba(0,0,0,0.54), radius 4px, font-size 16px  
Hover: bg rgb(247, 221, 149)

### Icon Button
Default: transparent bg, color rgba(0,0,0,0.5), padding 11px, radius 50%  
Hover: bg rgb(247, 221, 149)

### Input Fields
Default: transparent bg, color #ffffff (dark mode) or rgba(0,0,0,0.87) (light), no border-radius, padding ~8px  
Focus: no change (minimal focus styling)

### Cards
Radius 4px or 12px, minimal shadow, padding based on 8px grid

## Layout & Responsive Rules
Breakpoints: 480px, 600px, 1024px, 1280px  
Mobile padding: 16px  
Desktop padding: 24px  
Grid gap: 8px multiples

## Interaction Rules
- State transitions: 150ms ease
- No loud focus rings — subtle outlines
- Hover states change bg color only

## DO List
- Use only colors from palette
- Keep spacing multiples of 8px
- Use Roboto for all UI text
- Maintain consistent radius per component type
- Reserve yellow for CTAs and logo
- Use semantic colors only for their meaning

## DON'T List
- Don't use custom colors
- Don't mix sharp and rounded corners in one component
- Don't apply shadows to every element
- Don't underline links unless necessary
- Don't change default link blue without context

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #f5c518;
  color: #000000;
  padding: 0 32px;
  border-radius: 24px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(247, 221, 149); }
.btn-primary:focus { outline: 2px solid #000; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Search Submit Button
```css
.btn-search {
  background: #ffffff;
  color: rgba(0,0,0,0.54);
  border-radius: 4px;
  font-size: 16px;
  border: none;
}
.btn-search:hover { background: rgb(247, 221, 149); }
```

### Input Field
```css
.input {
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 8px;
}
.input:focus { outline: none; }
```

9. Summary

TL;DR: IMDb’s design system is all about high-contrast yellow/black branding, clean Roboto typography, and an 8px spacing grid. Colors are purposeful, shadows minimal, and components tuned for dense content without losing clarity.

Brand Keywords: bold-functional, cinematic-utilitarian, high-contrast, content-first, scalable-production