Los Angeles Times (latimes.com) — Brand Design System Deep Dive

1. Brand Overview

The Los Angeles Times design system is unapologetically rooted in print heritage. You can feel it the moment you land on their homepage — black and white dominance, serif headlines, restrained use of color. This isn’t a “fun” palette; it’s a serious, news-first brand. They’ve translated that old-school newspaper gravitas into digital form without losing credibility.

The vibe: authoritative, information-dense, but not sterile. Headlines sit in strong serif faces (FBKisDisplay, Georgia, Times), body and UI elements lean on workhorse sans-serifs (Proxima Nova, Benton Gothic, Arial). This duality mirrors the newsroom — the print legacy meets modern web typography.

Who’s this for? News consumers, policymakers, academics, and anyone who reads the LA Times with a certain expectation: clarity over decoration. The site isn’t trying to surprise you visually. It’s designed to deliver stories and make navigation invisible. You don’t get gradients and playful animations; you get solid borders, flat colors, and typography doing the heavy lifting.

Design philosophy:

• Keep the brand color identity anchored in black (#000000) and white (#ffffff).
• Use a single accent blue (#087da1) as the functional "action" color.
• Maintain high contrast for readability.
• Respect space economy — no oversized paddings that waste vertical real estate.
• Minimize ornamental effects — flat borders replace shadows in most places.

They’re clearly using a Tailwind CSS-based utility approach. You see class names with responsive and arbitrary values (like top-[117px]). That means the design system is componentized, tokenized, and tightly integrated into the build pipeline.

This is a newsroom site that knows its audience doesn’t come for visual candy. They come for trust, speed, and legibility. And the design system is laser-focused on delivering that.

2. Color System

2.1 Primary Colors

Primary brand color: Black (#000000). It dominates text, borders, and structural elements. Psychology-wise, black reinforces authority, seriousness, and permanence — perfect for an established newspaper.

Accent color: Blue (#087da1). This is used sparingly for links, buttons, and key interactive states. It’s not a “brand blue” in the tech sense; it’s functional. Blue says “click me” without overpowering the page.

Competitor comparison: The New York Times stays almost entirely monochrome. The Washington Post uses blue for emphasis but in a more saturated range. LA Times’ blue is muted, leaning toward teal — less corporate, more reserved.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high: black text on white backgrounds is WCAG AAA compliant. Blue (#087da1) on white is also safe, though it’s borderline for small text sizes — they keep it bold to help. Red (#eb0000) on white is high-impact but sparingly used.

Dark mode? Not implemented site-wide. They rely on light backgrounds (#ffffff, #f5f5f5) and inverse text tokens for dark sections.

2.4 Usage Guide

Do:

• Use #000000 for all primary text and borders.
• Reserve #087da1 for clickable elements.
• Use utility colors from the token set only for their defined contexts (e.g., #70d440 for success, #eb0000 for active story flags).

Avoid:

• Mixing multiple accent colors in the same component — keeps visual hierarchy clean.
• Using utility colors for main content — they’re meant for functional UI states, not decoration.

3. Typography

3.1 Font Families

The system uses multiple families:

• FBKisDisplay — Serif, heritage feel, used in headlines and links.
  • Fallbacks: TimesNewRomanAdjust, Times New Roman, Times
• Proxima Nova — Sans-serif, modern, used for headings, links, and UI labels.
  • Fallbacks: Proxima Nova Adjust, Arial, Helvetica Neue, Helvetica
• Benton Gothic / BentonGothicCond-Black — Sans-serif, condensed, strong weight for labels and small headings.
  • Fallbacks: Arial, Helvetica Neue, Helvetica
• Arial — Utility sans-serif, body text and buttons.
• Georgia — Serif, occasional body text.
  • Fallbacks: Times New Roman, Times
• Times — Serif, fallback.
• VideoJS — Used for video player captions.

No Google Fonts or Adobe Fonts — fully hosted or system fonts.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is tight. Large headlines (40px Arial) are rare — most headings fall in the 18–30px range. This keeps vertical rhythm dense — ideal for news. Bold weights (600–700) are used liberally to differentiate sections without needing extra size jumps.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. But they also use odd numbers like 7.8px (probably from rem conversions).

4.2 Layout

Breakpoints are numerous: from 320px to 1520px, covering mobile, tablet, mid-desktop, and large desktop. They’re clearly optimizing for multiple device widths, not just the common 768/1024/1440 triplet.

5. Visual Elements

Border radius system:

• 0px — square corners
• 2px — subtle rounding (buttons)
• 4px — common for inputs, buttons
• 8px — used for larger divs
• 9999px — full pill shapes (buttons, avatars)
• 50% — perfect circles

Shadows:

Almost flat design. Two notable shadows:

• rgb(230, 230, 230) 1px 0px 0px 0px — more like a divider effect than depth.
• Rare use: rgba(0, 0, 0, 0.25) 0px 2px 12px 0px — possibly modal or dropdown.

Borders are the main depth device.

6. Components

6.1 Buttons

Four main types:

1. Outline Gray Button

   • Default: transparent bg, #000 text, 4px radius, 1px solid #e6e6e6
   • Hover: bg #e6e6e6, text #076583

2. Video Player Big Play

   • Default: rgba(0,0,0,0.5) bg, white text, 0px radius, border white
   • Hover: bg #e6e6e6, text #076583

3. Carousel Nav

   • Default: white bg, black text, radius 0px 2px 2px 0px
   • Hover: bg #e6e6e6, text #076583

4. Primary Service Button

   • Default: bg #087da1, white text, 4px radius, bold
   • Hover: bg #e6e6e6, text #076583

6.2 Links

Five styles:

• Black, no underline (hover changes color)
• White, bold, no underline
• Blue (#087da1), bold, no underline
• Gray (#666666), bold, no underline
• Dark gray (#333333), underline, hover removes underline

6.3 Forms

Email input:

• Default: white bg, #333 text, 1px solid #666 border, 4px radius, padding 16px
• Focus: outline black, 1px solid #000 border

6.4 Cards

No explicit card component in extracted data, but divs use 8px radius, light gray borders, no shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-gray: #e6e6e6;
  --color-accent-blue: #087da1;
  --color-medium-gray: #666666;
  --utility-color-sweet-corn: #ffe07c;
  --cms-color-brand-border: #000000;
  --utility-color-paradiso: #2b7886;
  --utility-color-gunsmoke: #858585;
  --utility-color-dove: #666666;
  --utility-color-mine-shaft: #333333;
  --cms-page-header-color-text-inverse: #ffffff;
  --cms-color-service-text-on-dark-hover: #68d0e2;
  --utility-color-deepsky: #00acec;
  --utility-color-calypso: #076583;
  --cms-story-stream-color-active: #eb0000;
  --cms-color-service-2-background: #3dabbf;
  --utility-color-marshland: #151612;
  --utility-color-whitesmoke: #f5f5f5;
  --cms-color-neutral-6-background: #f1f1f1;
  --utility-color-lime-green: #70d440;
  --utility-color-kumera: #81672b;
  --cms-thread-color: #206743;
  --utility-color-heavy-metal: #34362f;
  --utility-color-boulder: #757575;
  --utility-color-malachite: #09b109;
  --utility-color-antique-bronze: #715617;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-divider: rgb(230, 230, 230) 1px 0px 0px 0px;
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 2px 12px 0px;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7_8: 7.8px;
  --space-8: 8px;
  --space-10: 10px;
  --space-13: 13px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-105_609: 105.609px;
  --space-149_172: 149.172px;
  --space-179_812: 179.812px;
  --space-257_5: 257.5px;
  --space-506_656: 506.656px;
}

8. AI Coding Assistant Prompt

# Los Angeles Times Design System Specification

You are a Los Angeles Times design expert. Build UIs matching their visual language exactly.

## Brand Context
The LA Times design is rooted in print heritage: black-and-white dominance, serif headlines, minimal ornamentation. Function trumps decoration. Typography carries the brand voice.

## Color Palette
- Primary Black: #000000 — Body text, borders
- White: #ffffff — Backgrounds, text inverse
- Light Gray: #e6e6e6 — Dividers, subtle borders
- Accent Blue: #087da1 — Links, primary buttons
- Medium Gray: #666666 — Secondary text
- Sweet Corn: #ffe07c — Utility highlights
- Paradiso: #2b7886 — Secondary accents
- Gunsmoke: #858585 — Neutral text/icons
- Mine Shaft: #333333 — Dark backgrounds
- Service Hover: #68d0e2 — Hover text on dark
- Deepsky: #00acec — Bright accents
- Calypso: #076583 — Secondary blue-green
- Story Active Red: #eb0000 — Active story indicator
- Service 2 BG: #3dabbf — Section background
- Marshland: #151612 — Dark accent
- Whitesmoke: #f5f5f5 — Neutral background
- Neutral-6 BG: #f1f1f1 — Light background
- Lime Green: #70d440 — Success states
- Kumera: #81672b — Brown accent
- Thread: #206743 — Green indicator
- Heavy Metal: #34362f — Dark neutral
- Boulder: #757575 — Neutral text
- Malachite: #09b109 — Success
- Antique Bronze: #715617 — Dark gold

## Typography
Font families:
- FBKisDisplay, TimesNewRomanAdjust, Times New Roman, Times — Headlines
- Proxima Nova, Proxima Nova Adjust, Arial, Helvetica Neue, Helvetica — UI, headings
- Benton Gothic, Arial, Helvetica Neue, Helvetica — Labels
- Arial — Body, buttons
- Georgia — Body serif
- Times — Fallback
- VideoJS — Video captions

Type sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 large | Arial | 40px | 400 | 1.00 | Page titles |
| H1 mid | Proxima Nova | 30px | 600 | 1.13 | Section headings |
| Link large | Proxima Nova | 30px | 600 | 1.13 | Main nav |
| H1 serif | FBKisDisplay | 30px | 700 | 1.13 | Headlines |
| Button | Arial | 26px | 400 | 1.50 | Large CTAs |
| Label | BentonGothicCond-Black | 24px | 700 | 1.08 | Condensed headings |
| ... | ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 4px, 5px, 7.8px, 8px, 10px, 13px, 16px, 18px, 20px, 24px, 30px, 40px, 50px, 60px, 105.609px, 149.172px, 179.812px, 257.5px, 506.656px

## Border Radius
- none: 0px — square corners
- sm: 2px — subtle rounding
- md: 4px — inputs, small buttons
- lg: 8px — larger containers
- full: 9999px — pills, avatars
- circle: 50% — perfect circles

## Shadows & Depth
Mostly flat design. Use borders for separation. Divider shadow: rgb(230, 230, 230) 1px 0px 0px 0px. Rare modal shadow: rgba(0, 0, 0, 0.25) 0px 2px 12px 0px.

## Components

### Primary Button
```css
.btn-primary {
  background: #087da1;
  color: #ffffff;
  padding: 0px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 16px;
}
.btn-primary:hover {
  background: #e6e6e6;
  color: #076583;
}
```

### Outline Button
```css
.btn-outline {
  background: transparent;
  color: #000000;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  font-size: 13.3333px;
}
.btn-outline:hover {
  background: #e6e6e6;
  color: #076583;
}
```

### Input Field
```css
.input-email {
  background: #ffffff;
  color: #333333;
  border: 1px solid #666666;
  border-radius: 4px;
  padding: 16px;
}
.input-email:focus {
  border-color: #000000;
  outline: 1px solid #000000;
}
```

## Layout & Responsive Rules
Breakpoints: 320px, 360px, 414px, 500px, 768px, 1024px, 1240px, 1440px, 1520px (and intermediate steps). Container widths adjust per breakpoint. Maintain 8px grid spacing across devices.

## Interaction Rules
- Hover: background and text color change on buttons and links
- Focus: 1px solid black outline for inputs
- Transition: 150ms ease for hover/focus state changes

## DO List
- Use only defined palette
- Maintain 8px grid multiples
- Keep buttons either pill or sharp — no mixing
- Use FBKisDisplay for headlines
- Bold interactive text for clarity

## DON'T List
- Add shadows where borders suffice
- Use colors outside palette
- Mix serif and sans in same heading
- Stretch images

## Code Examples

Primary Button:
```html
<button class="btn-primary">Subscribe</button>
```

Outline Button:
```html
<button class="btn-outline">Learn More</button>
```

Input:
```html
<input type="email" class="input-email" placeholder="Enter your email" />
```

9. Summary

TL;DR: The LA Times design system is print-first in spirit, digital in execution. Black, white, and a muted blue carry the entire UI. Fonts are a mix of authoritative serifs and functional sans-serifs. Borders replace shadows. Everything sits on an 8px grid.

Brand Keywords: heritage-modern, news-serious, typography-led, flat-structured, utility-focused