NY Post Design System Deep Dive

1. Brand Overview

The New York Post doesn’t mince words — and neither does its design system. This is a tabloid brand that’s been around forever, and it wears its identity loudly: bold reds, aggressive typography, tight spacing, and no fear of cramming a lot of content into a single viewport. You don’t come here for calm, whitespace-heavy minimalism — you come for a barrage of headlines, images, and opinionated visual hierarchy.

The design philosophy is unapologetically loud. The primary red (#c60800) dominates buttons, headings, and key links. Black and white form the foundation for text and backgrounds, while grays fill in secondary UI elements. Everything feels urgent — uppercase headings, tight line heights, negative letter-spacing — all pushing the reader forward. Typography choices like Neue Haas Grotesk Display (via Adobe Fonts) and fallback Arial/Helvetica keep the style sharp and legible under heavy visual load.

This system is built for a content-heavy, fast-news environment. The target audience is broad — from mobile scrollers catching headlines in seconds to desktop readers diving deep into sports, politics, and entertainment. The breakpoints show coverage from tiny 320px devices up to wide 1280px layouts, so it’s responsive but clearly optimized for dense, multi-column layouts at desktop.

There’s no luxury polish here; borders are thin, shadows are minimal except for some stacked offset effects used for impact. This is a brand that uses design to shout, not whisper.

2. Color System

2.1 Primary Colors

The main brand color is rgb(198, 8, 0) — #c60800. This red is aggressive, leaning slightly toward a muted crimson rather than a neon. Psychologically, it’s urgency and attention-grabbing — perfect for a tabloid. Competitor comparison: where CNN’s red is slightly cooler and more corporate, NY Post’s red is hotter, more sensational.

It’s used for:

• Primary buttons
• Link text in key contexts
• Section headings
• Borders and dividers in branded modules

This works because it pops equally against white and black backgrounds, and it’s strong enough to hold its own against photographic content.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios are high — black on white, white on red, red on white — so accessibility is decent for body text. The weakest contrast is medium gray (#696969) on white, which is borderline for WCAG AA at small sizes.

Dark mode isn’t present — this is a legacy news site sticking to light backgrounds. That means the palette is tuned for print-like readability.

2.4 Usage Guide

Works well:

• Primary red (#c60800) with white text — maximum impact.
• Black text on white — clean and legible.
• Dark gray (#585858) for meta info — keeps it subtle without killing readability.

Avoid:

• Red text on black — too harsh, reduces legibility.
• Medium gray (#696969) for body copy — fails accessibility at smaller sizes.
• Transparent white overlays without solid backgrounds — can wash out images.

3. Typography

3.1 Font Families

• Neue Haas Grotesk Display — Adobe Fonts. Used for headings, links, and captions. Heavy weights (700–900) dominate, often uppercase.
• Arial — fallback for body text, some headings, and buttons. Helvetica Neue and Helvetica in fallback stack.

No Google Fonts. No variable fonts. Just a classic, bold grotesque paired with system-safe sans.

3.2 Type Scale

Here’s a slice of the type scale showing context, font, size, weight, and line height:

(There are dozens more — full scale is aggressive with small increments.)

3.3 Hierarchy

Hierarchy comes from size jumps and uppercase transforms. Large headlines at 70px/56px are tight and loud. Subheadings drop to 30px/28px, still bold. Body stays around 14–16px for readability. Captions are tiny but uppercase, ensuring they still command attention.

Line heights are often below 1.0 for big headings — this compresses vertical space and keeps the page tight. Negative letter-spacing (-0.72px) on large headings adds to the condensed, urgent feel.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but with lots of odd values (1px, 5px, 7px, 9px) for micro-adjustments.

Common values:

• 1px — dividers, hairline borders.
• 5px — small gaps in component internals.
• 10px — standard button padding, small layout gaps.
• 15px — frequent in UI spacing.
• 20px — section padding.
• 30px — larger component padding.

Frequency shows heavy use of 10px (186 occurrences) and 20px (213 occurrences).

4.2 Layout

Breakpoints cover:

• Mobile: 320px, 400px, 425px
• Tablet: 768px, 890px, 900px
• Desktop: 1024px, 1220px, 1280px

Looks like custom breakpoints for specific device widths — probably driven by ad layout constraints.

5. Visual Elements

Border Radius System

Values range from 1px to 50%:

• 1px — tiny rounding for spans.
• 2px — buttons and small clickable elements.
• 6px — login buttons, inputs.
• 30px — search field pills.
• 50% — circular badges, avatars.

No large card radii — most content blocks are square.

Shadows

Mostly flat, but with some dramatic offset shadows:

• rgb(0, 0, 0) -1px 1px ... stacked up to -6px — creates a retro print cutout feel.
• Minimal soft shadows like rgba(0, 0, 0, 0.3) 1px 2px 12px.

Borders dominate depth — 1px solid grays and reds used liberally.

6. Components

6.1 Buttons

Menu Toggle:

• Default: transparent bg, black text, 7px padding, 2px radius, 1px white border.
• Hover: white text, bg rgb(30, 174, 219), no border.
• Active: dark gray bg, black text.
• Focus: white text, black outline, bg rgb(30, 174, 219).

Font: Arial, 13.33px, weight 400.

Primary Solid (button--solid):

• Default: bg #c60800, white text, 9px 20px padding, 6px radius, 2px solid #c60800.
• Hover: white bg, black text, drop shadow rgba(0,0,0,0.45) 0px 14px 30px, translateY(-1px).
• Active: bg rgb(44, 100, 21) (odd choice — greenish), white text.
• Focus: bg rgb(30, 174, 219), black text, 1px solid black.

Font: Neue Haas Grotesk Display, 18px, weight 800.

6.2 Links

Multiple styles based on context:

• Red (#c60800), no underline, hover to blue (#3860BE).
• White, bold, hover to blue.
• Black, bold, underline default, hover no underline.
• Grays for muted links.

Underline behavior changes — sometimes present by default, often removed on hover.

6.3 Forms

Inputs (email example):

• Default: white bg, black text, 1px solid light gray (#cccccc), 0px radius, 22px top padding.
• Focus: black border, bg rgb(30, 174, 219), white text, box-shadow rgb(33, 150, 243) 0px 0px 1px.

6.4 Cards

No explicit card spec in data — likely divs with 1px gray borders, sometimes shadows for standout modules.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #c60800;
  --color-black: #000000;
  --color-dark-gray: #585858;
  --color-white: #ffffff;
  --color-light-gray: #cccccc;
  --color-medium-gray: #696969;
  --color-white-trans-50: rgba(255,255,255,0.5);

  /* Typography */
  --font-neue-haas: "neue-haas-grotesk-display", sans-serif;
  --font-arial: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-30: 30px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-offset-stack: rgb(0,0,0) -1px 1px 0px, rgb(0,0,0) -2px 2px 0px, rgb(0,0,0) -3px 3px 0px, rgb(0,0,0) -4px 4px 0px, rgb(0,0,0) -5px 5px 0px, rgb(0,0,0) -6px 6px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.3) 1px 2px 12px;
}

8. AI Coding Assistant Prompt

# NY Post Design System Specification

You are a NY Post design expert. Build UIs matching their visual language exactly.

## Brand Context
NY Post design is loud, bold, and urgent. Heavy use of primary red, tight line heights, and uppercase grotesque typography. Layouts are dense, optimized for news headlines and fast scanning.

## Color Palette
- Primary Red: #c60800 — CTAs, primary buttons, section headings, borders
- Black: #000000 — body text, outlines, menu toggle
- Dark Gray: #585858 — secondary text
- White: #ffffff — backgrounds, text on red
- Light Gray: #cccccc — dividers, input borders
- Medium Gray: #696969 — tertiary text
- Transparent White 50%: rgba(255,255,255,0.5) — overlays, hover states

## Typography
- Headings: "neue-haas-grotesk-display", sans-serif
- Body: Arial, "Helvetica Neue", Helvetica, sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 70px | 700 | 0.83 | Hero headlines |
| H1    | 56px | 900 | 1.05 | Main headlines |
| H2    | 36px | 700 | 1.05 | Section headings |
| Subhead | 30px | 700 | 0.94 | Subsection headings |
| Body | 16px | 400 | 1.30 | Article text |
| Caption | 14px | 700 | 1.00 | Metadata, labels |

## Spacing & Grid
Base: 8px grid. Common values: 1px, 5px, 10px, 15px, 20px, 30px.
Use for:
- Button padding: 9px 20px
- Section gaps: 20px
- Icon gaps: 5px

## Border Radius
- xs: 1px — spans, micro elements
- sm: 2px — small buttons
- md: 6px — inputs, login buttons
- lg: 30px — pill search
- full: 50% — avatars, badges

## Shadows & Depth
- Offset stack: rgb(0,0,0) -1px 1px ... up to -6px — decorative emphasis
- Soft: rgba(0,0,0,0.3) 1px 2px 12px — hover elevation

## Component Specifications

### Primary Button
Default: bg #c60800, color #ffffff, padding 9px 20px, radius 6px, border 2px solid #c60800, font 18px Neue Haas Grotesk Display 800.
Hover: bg #ffffff, color #000000, shadow rgba(0,0,0,0.45) 0px 14px 30px, translateY(-1px).
Active: bg rgb(44,100,21), color #ffffff.
Focus: bg rgb(30,174,219), color #000000, border 1px solid #000.

### Menu Toggle Button
Default: transparent bg, color #000, padding 7px, radius 2px, border 1px solid #fff, font Arial 13.33px 400.
Hover: bg rgb(30,174,219), color #fff, no border.
Active: bg var(--wp--custom--utility--color--dark-gray), color black.
Focus: bg rgb(30,174,219), outline 2px solid #000.

### Links
Default: color varies by context (primary red, black, white, gray), no underline unless specified.
Hover: color #3860BE, underline removed.

### Input Fields
Default: bg #fff, color #000, border 1px solid #cccccc, radius 0px, padding 22px 10px 10px.
Focus: border-color #000, bg rgb(30,174,219), color #fff.

## Layout & Responsive Rules
Breakpoints: 320px, 400px, 425px, 768px, 890px, 900px, 1024px, 1220px, 1280px.
Content width adjusts per breakpoint; dense column layouts at desktop.

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus: solid outline 2px black
- Hover: color shifts to blue (#3860BE) for links, inverse bg for buttons

## DO List
- Use ONLY colors from the palette
- Keep all spacing multiples of 8px or listed micro values
- Maintain uppercase for headings where data specifies
- Use Neue Haas Grotesk Display for headings
- Use Arial/Helvetica for body text
- Apply offset shadow style only where data shows

## DON'T List
- Don't invent new colors
- Don't mix rounded and square corners in same component
- Don't use shadows outside specified styles
- Don't increase line height beyond data values for headings
- Don't apply underline to links where not specified

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #c60800;
  color: #ffffff;
  padding: 9px 20px;
  border-radius: 6px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 800;
  font-size: 18px;
  border: 2px solid #c60800;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #000000;
  box-shadow: rgba(0,0,0,0.45) 0px 14px 30px;
  transform: translateY(-1px);
}
.btn-primary:focus {
  background: rgb(30,174,219);
  color: #000000;
  border: 1px solid #000000;
}
```

### Menu Toggle Button
```css
.menu-toggle {
  background: transparent;
  color: #000000;
  padding: 7px;
  border-radius: 2px;
  border: 1px solid #ffffff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13.3333px;
}
.menu-toggle:hover {
  background: rgb(30,174,219);
  color: #ffffff;
  border: none;
}
```

### Input Field
```css
.input-email {
  background: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;
  border-radius: 0px;
  padding: 22px 10px 10px;
}
.input-email:focus {
  border: 1px solid #000000;
  background: rgb(30,174,219);
  color: #ffffff;
}
```

9. Summary

TL;DR — NY Post’s design system is loud, condensed, and built for urgency. Primary red dominates, typography is tight and uppercase, and spacing is compressed for content density. Borders and offset shadows add a retro tabloid punch.

Brand Keywords:

• bold-tabloid
• urgency-driven
• tight-typography
• content-dense
• red-dominant