People Brand Design System Deep-Dive

1. Brand Overview

People.com isn’t shy about what it is — celebrity news, human interest stories, entertainment culture. It’s a high-volume content brand with a long history in print, translated into a fast, image-heavy web experience. The design system reflects that heritage: bold masthead typography, clear hierarchy, and a functional but not overly decorative UI.

The vibe is media-first. Black and white dominate, with flashes of saturated colors from the palette: yellows for callouts, rich blues for actions, and pops of red, purple, and green for functional states (social icons, alerts, sales). It’s a UI that doesn’t try to be invisible — it frames content aggressively. Border lines are used instead of heavy shadows for separation. The typography is confident, with Limerick Serial in uppercase for headlines — it’s wide, chunky, and unapologetic.

The target audience is broad: People readers are not tech insiders; they want clarity and immediacy. The design system prioritizes large type sizes, high-contrast color combinations, and clear tap targets. You can see this in the button styles — thick borders, no rounded corners unless it’s a circular navigation control. It’s a brand that trades minimalism for recognizability.

Responsiveness is handled via a traditional breakpoint set: mobile from 320px, tablet at 768px, desktop over 1024px, with an extra large breakpoint at 1366px. Nothing radical here — they stick to tried-and-true widths.

If you’re building for People’s brand, you’re building something loud but ordered. Headlines should feel like cover lines. CTAs should pop. Dividers should be visible. And the palette — while wide — should be applied with clear functional rules.

2. Color System

2.1 Primary Colors

The main semantic primary is rgba(0, 0, 0, 0.95) — essentially near-black. This is the workhorse: headlines, body text, borders. It’s paired with white (#ffffff) for high contrast. This works because People is a content-heavy site and black-on-white is the most legible combination.

The secondary semantic color is transparent (rgba(0, 0, 0, 0)), used for overlays or invisible hit areas.

Compared to competitors like Entertainment Weekly (which leans red) or Vanity Fair (which leans black and serif), People’s primary color feels more neutral. The real accent comes from functional colors: bright blues for links/actions, spotlight yellows for emphasis, rich reds for sales/warnings.

2.2 Complete Palette

Here’s the full extracted palette with roles and usage:

2.3 Color Relationships

Black/white is the base. Accent colors are used deliberately, often isolated for specific functions (social icons, warning backgrounds). This helps avoid visual noise. Contrast ratios are strong for text — black on white is ~21:1. Accent colors like #fff100 (Spotlight) require dark text for legibility.

Dark mode isn’t explicit here — the palette is built for light backgrounds.

2.4 Usage Guide

• Use #000000 for most text.
• Only use #009ed8 for links; don’t use it for buttons unless specified.
• Backgrounds for alerts: #ffecd3 (warning), #e5f1fd (info), #f1faf5 (success).
• Avoid mixing too many accents in one view — keep them functional.
• Keep social brand colors pure; don’t desaturate.

3. Typography

3.1 Font Families

Headlines, links, captions: Limerick Serial, fallback to Geneva. This is a custom display face — wide, bold, and very “magazine cover.”
Buttons and some headings: Arial or Helvetica for utility text.
Body/captions in some contexts: Helvetica with Arial fallback.

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

3.2 Type Scale

All extracted sizes:

3.3 Hierarchy

Huge headline sizes (64–66px) for hero stories. Strong uppercase for emphasis. Body/link text drops to 16–18px — still generous for readability. Captions range from 10–14px, often uppercase for labels. The hierarchy is magazine-like: big, bold titles, then a steep drop to body size.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

They keep multiples of 4/8 — consistent rhythm.

4.2 Layout

Breakpoints: 320, 480, 757, 768, 1024, 1200, 1366px. Standard mobile-first approach. Grid likely collapses at ~768px to single-column, expands to multi-column at desktop.

5. Visual Elements

Border Radius: Mostly square corners (0px). Small radii at 4px and 8px for cards and containers. Pills at 100px and 50% for circular buttons/images.

Shadows: Minimal use — rgba(0, 0, 0, 0.15) at 0px 3px 9px or 0px 2px 6px. Depth is subtle; borders do most of the separation.

Borders: Heavy use. 1px solid black for buttons, dividers. Transparent black for subtle lines.

6. Components

6.1 Buttons

Variant 1 — White background, black border:

• Default: bg #fff, text rgba(0,0,0,0.95), padding 6px 16px, border 1px solid rgba(0,0,0,0.95), radius 0.
• Hover: bg #0074e8, text #fff, translate(-0.5rem, -0.5rem), shadow 0 1px 4px #000.
• Active: bg #004e9c, text #0074e8.
• Focus: outline #4d90fe solid 2px, bg #0074e8, text #fff.

Variant 2 — Yellow background, black border:

• Default: bg #fff100, text rgba(0,0,0,0.95), padding 14px 32px, border 1px solid #0d0d0d.
• Hover/active/focus same as Variant 1.

Variant 3 — Navigation circular button:

• Default: bg #0d0d0d, text #fff, radius 100px, no border, transform matrix(0,-1,1,0,0,-18).
• Hover: bg rgba(255,255,255,0.2).
• Focus: outline 3px solid #014ecb.

6.2 Links

Two base styles:

• Black text, no underline, weight 400.
• White text, no underline, weight 700.

Hover states are minimal — likely color change handled via CSS.

6.3 Forms

No text input styles extracted — likely standard browser defaults with border styling.

6.4 Cards

Borders instead of shadows for separation. Padding likely from 24px/32px tokens.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: rgba(0,0,0,0.95);
  --color-secondary: rgba(0,0,0,0);
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-gray: #c7c7c7;
  /* ... include all palette colors from table above ... */

  /* Typography */
  --font-heading: "Limerick Serial", geneva;
  --font-body: Arial, Helvetica, sans-serif;
  --font-size-h1: 66px;
  --line-height-h1: 1.09;
  /* ... include all type sizes ... */

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-100: 100px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.15) 0px 3px 9px 0px;
  --shadow-sm: rgba(0,0,0,0.15) 0px 2px 6px 0px;
}

8. AI Coding Assistant Prompt

# People Design System Specification

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

## Brand Context
People’s design is bold, magazine-inspired, and content-first. Large, confident headlines, high-contrast black/white base, and functional pops of color for actions and alerts. Corners are mostly square; borders do the heavy lifting for separation.

## Color Palette
- Primary Black: #000000 — Headlines, body text
- White: #ffffff — Backgrounds, inverse text
- Link Blue: #009ed8 — Hyperlinks
- Spotlight Yellow: #fff100 — Highlights, promo buttons
- Warning BG: #ffecd3 — Warning panels
- Info BG: #e5f1fd — Info panels
- Success BG: #f1faf5 — Success panels
- Error BG Light: #fcecec — Error backgrounds
- Social: #3b5998 (Facebook), #ff0000 (YouTube), #b900b4 (Instagram), etc.
[Include all colors from palette above with usage]

## Typography
Font families:
- Headings: "Limerick Serial", geneva
- Body: Arial, Helvetica
- Captions: Limerick Serial

Type sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 66px | 700 | 1.09 | Hero titles |
| H1 | 64px | 700 | 1.13 | Hero titles alt |
| H2 | 36px | 700 | 1.22 | Section titles |
| Body | 16-18px | 400 | 1.4-1.56 | Paragraph text |
| Caption | 14px | 700 | 1.40 | Labels |
| Caption | 12px | 400 | 1.52 | Meta info |

## Spacing & Grid
Base: 8px grid. Scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 64px, 100px.
Use multiples for padding/margins.

## Border Radius
- none: 0px — default
- sm: 4px — small cards
- md: 8px — containers
- pill: 100px — nav buttons
- full: 50% — circular images

## Shadows & Depth
Minimal shadows:  
- lg: rgba(0,0,0,0.15) 0px 3px 9px  
- sm: rgba(0,0,0,0.15) 0px 2px 6px  
Prefer borders for separation.

## Components

### Primary Button
Default:
- bg: #ffffff
- text: rgba(0,0,0,0.95)
- padding: 6px 16px
- border: 1px solid rgba(0,0,0,0.95)
- radius: 0px
Hover:
- bg: #0074e8
- text: #ffffff
- transform: translate(-0.5rem, -0.5rem)
Focus:
- outline: 2px solid #4d90fe

### Secondary Button (Yellow)
Default:
- bg: #fff100
- text: rgba(0,0,0,0.95)
- padding: 14px 32px
- border: 1px solid #0d0d0d
Hover/Focus same as Primary.

### Navigation Button
Default:
- bg: #0d0d0d
- text: #ffffff
- radius: 100px
Hover: bg rgba(255,255,255,0.2)

### Links
- Black text, no underline, weight 400
- White text, no underline, weight 700

## Layout & Responsive Rules
Breakpoints:
- Mobile: < 480px
- Tablet: 768px
- Desktop: > 1024px
Max width: 1200px

## Interaction Rules
- Transitions: ~150ms ease for hover/focus
- Focus: clearly visible outlines

## DO
- Use only palette colors
- Stick to 8px grid
- Use Limerick Serial for headings
- Keep corners square unless pill/circle specified
- Use borders for separation

## DON'T
- Add new colors
- Mix rounded and square corners randomly
- Overuse shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #fff;
  color: rgba(0,0,0,0.95);
  padding: 6px 16px;
  border: 1px solid rgba(0,0,0,0.95);
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
}
.btn-primary:hover {
  background: #0074e8;
  color: #fff;
  transform: translate(-0.5rem, -0.5rem);
}
```

Card:
```css
.card {
  background: #fff;
  border: 1px solid #d7d7d7;
  padding: 24px;
  border-radius: 8px;
}
```

9. Summary

TL;DR: People’s design system is a bold, magazine-style UI with a black/white base, strong typography, and functional color pops. Corners are mostly square, borders are everywhere, and type hierarchy is steep.

Brand Keywords: bold-magazine, functional-color, border-heavy, content-first, square-cornered