TechCrunch Design System Deep Dive

1. Brand Overview

TechCrunch’s UI is exactly what you’d expect from a tech media brand that’s been around the block: pragmatic, utilitarian, and built for speed. The design language is clean but not sterile — it’s functional first, with just enough brand personality to keep it distinctive. You’ll see that trademark TechCrunch green (#0a8935) popping up in CTAs and accents, but the rest of the palette is grounded in dark neutrals, off-whites, and muted grays. It’s not trying to be flashy — it’s trying to be readable, scannable, and clear.

The typography choices double down on that clarity. Headlines are set in Yellix or NB International Pro Regular, both sans-serifs with a modern, editorial feel. They’re bold, tightly spaced, and unapologetically large — this is a news site, after all, and it wants you to see the headline first. Body copy sticks with NB International Pro Regular, keeping the rhythm consistent across the page.

Layout-wise, TechCrunch is an 8px grid shop. Everything snaps to multiples of 8px (with a few 4px tweaks), making spacing predictable. There’s a clear hierarchy in padding and margins — small elements stay tight, large blocks breathe.

And here’s the thing I love: they’re not chasing trendy depth effects. Shadows are basically absent, replaced with solid borders for separation. It feels flat, crisp. That works for TechCrunch because the brand is about content, not ornamental UI.

If you’re building for TechCrunch, you need to think like a newsroom: speed, legibility, and a palette that supports the editorial voice without competing with it. The green is the signal — everything else is the structure.

2. Color System

2.1 Primary Colors

Primary brand color: #0a8935 (rgb(10, 137, 53)). This green is deep, saturated, and leans slightly cool. It’s used for primary buttons, link hovers, headings accents, and some borders. Psychologically, it’s confident but not aggressive — it’s a “trust me” green rather than a “look at me” neon.

Compared to competitors like The Verge (which uses bold magenta) or Wired (red and black), TechCrunch’s green is calmer, more institutional. It signals brand heritage. It also pairs well with the neutral grays and whites, maintaining accessibility without clashing.

2.2 Complete Palette

2.3 Color Relationships

High contrast: #0a8935 on #ffffff meets WCAG AA easily. Dark neutrals (#212623) on white also pass. The muted grays (#6c7571, #b5c0bc) are borderline for small text — keep them for metadata, not body copy.

Dark mode? Not explicitly implemented here, but the palette has enough dark neutrals to pivot if needed.

2.4 Usage Guide

• Workhorse combo: #212623 text on #ffffff background — crisp, readable.
• Brand signal: #0a8935 background with white text — primary buttons, key CTAs.
• Avoid: using #0a8935 for body text — it’s for emphasis, not base reading.
• Hover cues: light mints (#b3f8ba, #a9f7b1, #b4f8bb) work against dark backgrounds.
• Error: #e21c1c — keep it for validation, not general alerts (use orange shades for warnings).

3. Typography

3.1 Font Families

Two main families:

• Yellix — used for big headlines. No fallback stack listed, likely custom/self-hosted.
• NB International Pro Regular — used for headings, body, links, buttons. Also no fallback listed.

No Google Fonts or Adobe Fonts — this is a custom implementation.

3.2 Type Scale

3.3 Hierarchy

They use size jumps aggressively (83px → 57px → 40px → 28px → 24px → 23px → 19px → 16px → 13px). This forces clear visual tiers: hero headlines, section headlines, article titles, body, metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints: 500px, 599px, 600px, 781px, 782px, 900px, 1200px. This suggests a mobile-first approach with multiple mid-tier tablet breakpoints for layout shifts.

5. Visual Elements

Border Radius

• 2px — small buttons, inputs, badges
• 8px — occasional div rounding
• 80px — pill buttons (yes, 80px radius for that pill look)
• 50% — circular buttons/icons
• 100% — fully rounded badges/list items

Shadows

Almost none. One low-opacity shadow for subtle depth: rgba(0, 0, 0, 0.12) 0px 2px 8px 0px, rgba(0, 0, 0, 0.02) 0px 2px 22px 0px — rare.

Borders

Lots of 1px solid borders in grays and greens. Borders are used for separation instead of shadows.

6. Components

6.1 Buttons

Search Toggle Button
Default: transparent bg, white text, 12px padding, 50% radius. Hover: scale(1.03), custom hover colors.

Primary Pill Button
Default: #0a8935 bg, white text, 12px 16px padding, 80px radius, 1px border same green. Hover: opacity 0.7, scale(1.03).

Newsletter Select Button
Default: white bg, black text, 11px 13px padding, 2px radius, 1px solid #d2dcd7.

Disabled Pill Button
Default: #d2dcd7 bg, #535554 text, 12px 16px padding, 80px radius, opacity 0.38.

Ads Footer Close Button
Default: #edf1ef bg, #6c7571 text, 1px 6px padding, 0px radius.

6.2 Links

Multiple styles: blue (#0000ee), green (#68f176), white, gray (#b5c0bc), dark green (#012800), brand green (#0a8935), dark neutral (#212623), muted gray (#6c7571).
Hover often swaps to #68f176 or other brand greens.

6.3 Forms

Inputs:
Text — white bg, no border, focus with dashed outline.
Email — transparent bg, #212623 text, 1px solid #e21c1c border (error state), 2px radius.

6.4 Cards

Borders separate cards, no shadows. Border colors are neutral grays (#d2dcd7) or dark neutral (#212623).

7. Design Tokens

:root {
  /* Colors */
  --color-dark-neutral: #212623;
  --color-white: #ffffff;
  --color-gray-muted: #6c7571;
  --color-brand-green: #0a8935;
  --color-light-gray: #d2dcd7;
  --color-mid-gray: #b5c0bc;
  --color-deep-green: #012800;
  --color-black: #000000;
  --color-soft-mint: #b3f8ba;
  --color-light-mint: #a9f7b1;
  --color-bright-mint: #b4f8bb;
  --color-orange-500: #cb4925;
  /* Typography */
  --font-yellix: "yellix";
  --font-nb-international: "nb_international_proregular";
  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  /* Radius */
  --radius-sm: 2px;
  --radius-pill: 80px;
  --radius-circle: 50%;
  --radius-full: 100%;
}

8. AI Coding Assistant Prompt

# TechCrunch Design System Specification

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

## Brand Context
TechCrunch’s design is functional and content-first. It uses bold typography for headlines, a signature green for CTAs, and a flat, border-based separation style. The goal: speed, clarity, and brand consistency.

## Color Palette
- Dark Neutral: #212623 — Base text, header
- White: #ffffff — Backgrounds, text on dark
- Gray Muted: #6c7571 — Secondary text
- Brand Green: #0a8935 — Primary buttons, accents
- Light Gray: #d2dcd7 — Dividers, borders
- Mid Gray: #b5c0bc — Metadata
- Deep Green: #012800 — Text accents
- Black: #000000 — Body text
- Soft Mint: #b3f8ba — Hover highlights
- Light Mint: #a9f7b1 — Hover highlights
- Bright Mint: #b4f8bb — Hover highlights
- Orange 500: #cb4925 — Alerts
- Red 500: #e21c1c — Error states

## Typography
- Headings: "yellix"
- Body: "nb_international_proregular"

| Level | Size | Weight | Line Height | Use |
| H1 | 83px | 700/800 | 1.10 | Hero headlines |
| H2 | 57px | 700 | 1.20 | Section headlines |
| H3 | 40px | 700 | 1.20 | Article titles |
| Body-lg | 23px | 400/500/700 | 1.20–1.40 | Main body |
| Body | 19px | 400/700 | 1.20–1.40 | Body text |
| Small | 16px | 400/500/700 | 1.20–1.40 | UI labels |
| Caption | 13px | 400/700 | 1.30–1.40 | Metadata |

## Spacing & Grid
Base: 8px
Scale: 4px, 6px, 8px, 12px, 14px, 16px, 24px, 40px, 48px, 64px, 80px

## Border Radius
- sm: 2px — inputs, small buttons
- pill: 80px — pill buttons
- circle: 50% — icons
- full: 100% — badges

## Shadows & Depth
Flat design. Use borders for separation, avoid shadows.

## Component Specifications

### Primary Button
Default: bg #0a8935, color #ffffff, padding 12px 16px, radius 80px, border 1px solid #0a8935  
Hover: opacity 0.7, scale 1.03  
Focus: outline 2px dashed, same green  
Disabled: bg #d2dcd7, color #535554, opacity 0.38

### Search Toggle Button
Default: transparent bg, white text, padding 12px, circle radius, no border  
Hover: scale 1.03, hover colors

### Input Field (Email)
Default: transparent bg, color #212623, border 1px solid #e21c1c, radius 2px, padding 12px 16px  
Focus: outline 2px dashed, custom focus colors

### Card
Background: white, border 1px solid #d2dcd7, padding 24px

## Layout & Responsive Rules
Max content width: 1200px  
Breakpoints: 500px, 599px, 600px, 781px, 782px, 900px, 1200px

## Interaction Rules
Transition: 150ms ease for hover/focus  
Focus indicators: dashed outline in brand color

## DO List
- Use only palette colors
- Maintain 8px grid
- Bold headings with Yellix
- Use NB International for body
- Keep buttons pill-shaped unless specified

## DON'T List
- Add drop shadows
- Mix rounded and sharp corners
- Use green for body text
- Invent new colors

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0a8935;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 80px;
  border: 1px solid #0a8935;
  font-family: "nb_international_proregular";
  font-size: 13px;
  transition: all 150ms ease;
}
.btn-primary:hover { opacity: 0.7; transform: scale(1.03); }
.btn-primary:focus { outline: 2px dashed #0a8935; }
.btn-primary:disabled { background: #d2dcd7; color: #535554; opacity: 0.38; }
```

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #d2dcd7;
  padding: 24px;
}
```

### Input
```css
.input-email {
  background: transparent;
  color: #212623;
  border: 1px solid #e21c1c;
  border-radius: 2px;
  padding: 12px 16px;
}
.input-email:focus { outline: 2px dashed #0a8935; }
```

9. Summary

TL;DR — TechCrunch’s design is flat, content-first, and driven by a clear 8px grid. The brand green is sacred for CTAs, typography is bold and modern, and borders replace shadows for separation.

Brand Keywords — content-first, flat-editorial, green-accent, utilitarian-modern, grid-consistent