AP News Design System — Technical Deep-Dive

1. Brand Overview

AP News’ site feels like journalism stripped down to its essentials. No unnecessary polish, no ornamental gradients—just clear hierarchies, restrained color, and functional UI. It’s designed for people who consume large volumes of information quickly. The vibe is authoritative, utilitarian, and rooted in print traditions, but executed in a way that scales across devices from small mobile to wide desktop.

They use a lot of black and white (literally), with color reserved for action prompts (links, buttons) or editorial accents. Brand red is used very selectively—it punches through the monotone. There’s a “no nonsense” tone to spacing and typography: tight, efficient, like column inches. Squared borders and micro-border radii dominate; the few rounded elements are for interactive controls (pills and icons).

Navigation is clear, typography is readable without over-styling, and you can sense a focus on accessibility—high-contrast text, minimal reliance on subtle shades for critical information. Every pixel feels considered, but they’ve sacrificed decorative motion for immediacy. There’s no sprawling animations—just instant state changes.

The core audience? News readers, editors, and journalists—people accustomed to structured content. This system isn’t trying to “delight” in the way a lifestyle brand might; it’s trying to inform without distraction.

Design philosophy in one line: make content primary, UI secondary.

2. Color System

2.1 Primary Colors

Primary is #000000 (rich black), representing authority, truth, and clarity. It dominates text, borders, and header backgrounds. It’s paired with white (#ffffff) for maximal contrast—no midtones for core text. Secondary brand color is invisible in the semantic token data (rgba(0, 0, 0, 0)), meaning transparency plays a role in layering content over imagery without color bleed.

Accent colors break the monotony:

• #0042a9 and #005fcc for links and focus states (deep, trustworthy blues).
• #ff322e for sponsored banners (signal urgency).
• Mid-greys like #191919, #515151, #8d8d8d for secondary text.

This palette is close to what you’d expect in newsprint: strong contrast, limited palette, accent reserved for function.

2.2 Complete Palette

2.3 Color Relationships

Contrast is extreme—core text is black on white (~21:1 ratio), which passes WCAG AAA for all text. Link blue (#0042a9 on white) also passes for large and normal text, but they boost hover states to lighter blues for better legibility.

Dark mode references exist (tokens for --color-link-text-hover--DARK, etc.), but the site currently aims for light mode by default. Accents in red are always paired with white text to ensure high readability.

2.4 Usage Guide

• Use black/white for high-volume text areas.
• Blue only for interactive elements—don’t dilute by applying to headlines.
• Sponsored content: Apply brand red background sparingly—ensure it contrasts with white text.
• Keep hover/focus states distinct; use #005fcc on white backgrounds for clarity.
• Avoid pairing grey text on grey backgrounds—stick to black on light grey for subcontent.

3. Typography

3.1 Font Families

Two main families:

• APVar — appears to be a custom AP variable font, used for links and headings.
• AP — another custom AP font, with broad fallback set: -apple-system, Arial, Helvetica, Roboto, system-ui.
  In some contexts Arial/Helvetica is used outright—safe, legible, and web-native.
  Google Fonts listing includes Roboto, but primarily as part of fallback. No Adobe fonts, no variable font-based layout beyond APVar.

3.2 Type Scale

Huge range—headings range from 47px down to 8.5px for micro captions.

(Full table extracted from JSON is massive, but this scale covers all headings, links, captions.)

3.3 Hierarchy

Headings rely on weight (often 700) and uppercase transforms to create hierarchy. Line height is tight for large font sizes—more breathing room in smaller captions. This maximizes density while keeping readability. Links often match heading weight, reinforcing their importance in news lists.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: multiples of 8px dominate (common values 8px, 20px, 10px). Small control tweaks: 1px, 2px, 5px for borders and gap adjustments.

4.2 Layout

Breakpoints are granular: starting from 400px upwards to 1440px, with intermediate steps (425px, 426px, 476px, etc.), giving precise control for different devices. Container widths adapt without a fixed “max width” token—likely fluid until large desktop, then constrain at ~1440px.

5. Visual Elements

Border Radius

Mostly micro radii: 1px, 2px, 3px dominate—keeps things sharp.
100% for perfect circles in avatar/buttons, occasional 50px for pills. Larger radii are rare; AP prefers newsprint-like corners.

Shadows

Shadows are functional, not decorative:

• rgba(0, 0, 0, 0.2) 0px 4px 10px -3px — moderate depth, often for dropdowns.
• rgba(0, 0, 0, 0.4) 0px 0px 10px 0px — strong focus.
  No sprawling, soft shadows; all are tight and high opacity for clarity.

Borders & Dividers

Dividers mostly 1px solid grey (#ccc), sometimes black for emphasis. Border color tokens match functional roles: dark for content separation, light grey for UI elements.

6. Components

6.1 Buttons

Four main variants visible:

Banner Button (ap_banner-button)

Default:

• BG: #eb483b
• Text: white
• Padding: 8px 12px
• Radius: 3px
• No shadow, no transform

Hover: background inherits, ring simulation via dual box-shadow.
Focus: BG: #1eaedb, outline 2px black, white text.

Carousel Navigation (flickity-prev-next-button)

Circular (100% radius), white background, black border for prev; red background (#ff322e) for next.
Padding: 0, transform shift, opacity changes. Focus same as banner button.

Primary Form Button

BG: #104ba5, text white, padding: 12px 10px, radius: 2px, border same as background.
Hover/focus use ring style, focus shifts to #1eaedb.

6.2 Links

Six link styles—range from underlined on default to underline removed on hover. Colors: black, blue, white, greys. Underline usage always denotes interactive text in body; hover consistently strips underline.

6.3 Forms

Inputs rare in extracted dataset—styles likely minimalist: 1px solid grey borders, small radius (2-3px), focus outline in brand blue.

6.4 Cards

No explicit card token, but shadows indicate layering. Likely border-radius: 3-4px, padding from spacing scale (~20px), background white.

7. Design Tokens — CSS Variables File

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: transparent;
  --color-white: #ffffff;
  --color-off-black: #191919;
  --color-link-blue: #0042a9;
  --color-light-grey: #f2f2f2;
  --color-medium-grey: #515151;
  --color-ui-grey: #8d8d8d;
  --color-hover-blue: #005fcc;
  --color-dark-grey: #333333;
  --color-light-grey-alt: #f5f5f5;
  --color-brand-red: #ff322e;
  --color-eyebrow-blue: #146994;
  --color-eyebrow-blue-hover: #1c94d0;
  --color-leaderboard-placeholder: #242424;
  --color-header-border: #454545;

  /* Typography */
  --font-heading1: "APVar";
  --font-body: "AP";
  --font-fallbacks: -apple-system, Arial, Helvetica, Roboto, system-ui;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-60: 60px;
  --space-280: 280px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 3px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 4px 10px -3px;
  --shadow-lg: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
}

8. AI Coding Assistant Prompt

# AP News Design System Specification

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

## Brand Context
AP News’ design is utilitarian, high-contrast, and minimalist. It prioritizes readability, fast scanning, and a print-inspired aesthetic. Color accents signal interaction or urgency.

## Color Palette
- Primary Black: #000000 — Body text, dark headers
- Secondary Transparent: transparent — Overlay layering
- White: #ffffff — Page backgrounds, reversed text
- Off-Black: #191919 — Secondary text
- Link Blue: #0042a9 — Interactive links
- Light Grey: #f2f2f2 — UI surfaces
- Medium Grey: #515151 — Neutral UI text
- UI Grey: #8d8d8d — Captions, meta info
- Hover Blue: #005fcc — Link hover/focus state
- Dark Grey: #333333 — Leaderboard BG, hover areas
- Very Light Grey: #f5f5f5 — Hover backgrounds
- Brand Red: #ff322e — Sponsored banners
- Eyebrow Blue: #146994 — Category label links
- Eyebrow Blue Light Hover: #1c94d0 — Eyebrow hover states
- Leaderboard Placeholder: #242424 — Ad placeholders
- Header Border: #454545 — Navigation separators

## Typography
Fonts:
- Headings: "APVar"
- Body: "AP", fallback: -apple-system, Arial, Helvetica, Roboto, system-ui

Type Sizes (partial list):
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 47.6544px | 700 | 1.41 | Main headlines |
| Link Large | 37.3632px | 700 | 1.03 | Hero links |
| Body Large | 20px | 400 | 1.25 | Article text |
| Caption | 14px | 700 | 1.29 | Section labels |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 2px, 4px, 5px, 7px, 8px, 10px, 20px, 24px, 30px, 60px, 280px  
Use multiples for padding/margin across all components.

## Border Radius
- sm: 1px — Inputs, tight corners
- md: 3px — Buttons, cards
- full: 100% — Circular buttons, avatars

## Shadows & Depth
- md: rgba(0,0,0,0.2) 0px 4px 10px -3px — Dropdowns
- lg: rgba(0,0,0,0.4) 0px 0px 10px 0px — Modals

## Component Specifications

### Primary Button
Default:
```css
background: #eb483b;
color: #fff;
padding: 8px 12px;
border-radius: 3px;
font-weight: 550;
font-size: 14px;
border: none;

Hover: inherit BG, dual box-shadow ring
Focus: background #1eaedb, outline 2px solid #000, white text

Secondary Circle Button

BG: #fff, border: 1px solid #000, full radius, opacity 0.5
Hover: ring effect, opacity 1
Focus: #1eaedb background, outline 2px solid #000

Navigation Link

Default: color #0042a9, no underline
Hover: white color on dark background

Layout & Responsive Rules

Breakpoints: 400px, 425px, 476px, 530px, 600px, tablet ~768px, desktop 1024px, large desktop 1440px.
Fluid widths until desktop, then constrain.

Interaction Rules

Transition: ~150ms ease for hover/focus state changes
Focus: visible, high-contrast outlines
No animations for layout shifts.

DO

• Use exact hex values
• Maintain 8px grid
• Use uppercase for category labels
• Apply red only for sponsored/alert content
• Keep borders at 1px for dividers

DON'T

• Mix large rounding with sharp corners in same component
• Add drop shadows beyond defined tokens
• Use colors outside palette
• Reduce text contrast below WCAG AA

Code Examples

Primary Button:

.btn-primary {
  background: #eb483b;
  color: #fff;
  padding: 8px 12px;
  border-radius: 3px;
  font-weight: 550;
  font-size: 14px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  box-shadow: #888 0 0 0 1px, rgba(247,247,247,0.75) 0 0 0 8px;
}
.btn-primary:focus {
  background: #1eaedb;
  outline: 2px solid #000;
}

Card Example:

.card {
  background: #fff;
  border-radius: 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 4px 10px -3px;
  padding: 20px;
}

---

## 9. Summary

**TL;DR** — AP News design is functional, print-inspired, and high-contrast. Palette is minimal, typography is utilitarian, and spacing adheres to an 8px base grid. Interaction is immediate, with accents only for functional states.

**Brand Keywords**  
- newsprint-modern  
- high-contrast-functional  
- typographic-authority  
- no-frills  
- content-first