---
version: alpha
name: TechCrunch
website: "https://techcrunch.com"
description: A loud editorial newsroom system anchored on a near-black ink (#212623) over a hairline-gray canvas (#edf1ef), with **Money Green** (#0a8935) carrying every section masthead like a stock-ticker glyph and two rare hazard accents — Founder Purple (#5631ea) and Highlighter Yellow (#f2f673) — that surface only on subscription tiles and pull-out modules. Display headlines run Yellix 700 at 83px (line-height 0.80) for section titles like "Latest News" and "Startups", while NB International Pro Regular carries every body string, byline, and UPPERCASE 13px kicker with 0.5px tracking. Story cards stack on flat off-white panels with 80px outer radii — the largest pill geometry in mainstream tech publishing — and zero drop shadows.

seo:
  title: "TechCrunch Design System for React — Money Green (#0a8935), Yellix 83px"
  metaDescription: "TechCrunch's newsroom design as a DESIGN.md file. Canvas #edf1ef, Money Green #0a8935, Yellix display, 18 color tokens, 20+ components for React and AI tools."
  highlights:
    - "Money Green masthead system — `#0a8935` paints every section heading (\"Latest News\", \"Startups\", \"AI\") like a stock-ticker glyph rather than a brand wash"
    - "Yellix display at 83px / 700 — the masthead headline weight is a sharp geometric sans, not the convention-default serif that magazine sites still default to"
    - "Two scarcity accents — Founder Purple `#5631ea` and Highlighter Yellow `#f2f673` together appear in fewer than 10 surfaces, reserved for newsletter and subscription tiles"
    - "80px pill radii — story cards round at the largest pill value in any mainstream news site, far outside the 8–12px editorial convention"
    - "WordPress-stable token graph — 300 `:root` custom properties expose the Gutenberg theme.json contract directly to AI tools, making variable mapping deterministic"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    TechCrunch's homepage reads like a Bloomberg terminal rebuilt by a startup that cares about typography. The canvas is a pale hairline-gray (`#edf1ef` — almost white, but with enough green-leaning warmth to register as paper), and `#212623` near-black does the ink work. Money Green (`#0a8935`) paints every section masthead — "Latest News", "Startups", "AI", "Security", "Venture" — like a ticker indicator stamped above each editorial cluster, with a dark-green hover-rule sitting against it. Display headlines crash in at 83px in Yellix 700, a tightly drawn geometric sans by Type-O-Tones, while body and bylines run NB International Pro Regular from Nikolas Wrobel. Two scarcity accents — Founder Purple (`#5631ea`) and Highlighter Yellow (`#f2f673`) — surface only on newsletter and "Most Popular" tiles. The mood is serious enough to break a Series-B leak, energetic enough to host TechCrunch Disrupt.

    This DESIGN.md file packages the homepage into a machine-readable spec built on the Google Labs format. Inside: 18 color tokens grouped into ink, canvas, hairline-grays, Money Green semantics, dual scarcity accents, and one alert red (`#e21c1c`) reserved for newsletter form borders; 11 typography tokens spanning Yellix display (83px / 40px / weight 700) and NB International Pro across nine UI registers from 11px caption to 57px byline-hero; a 4-step radius scale from 2px input corners to 80px pill cards; an 8-step spacing scale built strictly on a 4px unit; and 20+ component specifications covering section mastheads, story cards, the upcoming-events register, newsletter subscription tiles, navigation, buttons, and form inputs.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces TechCrunch's ticker-page voice — near-black ink on hairline canvas, Money Green section heads, Yellix shouting at 83px above NB International body, 80px pill cards, dual scarcity accents reserved for newsletters. Reference the tokens directly to paste hex values into Tailwind config or to align a CMS theme with the WordPress Gutenberg variable graph. The system is worth studying because TechCrunch picked a typographic stance the rest of tech media avoided: a geometric sans display where every competitor reaches for a serif, paired with the most extreme pill geometry of any mainstream newsroom.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://techcrunch.com"
      title: "TechCrunch — official site"
      description: "The live newsroom whose tokens were extracted to build this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is TechCrunch's primary brand color?"
      answer: "TechCrunch's load-bearing brand color is Money Green (`#0a8935`) — it carries every section masthead (\"Latest News\", \"Startups\", \"AI\", \"Security\", \"Venture\") and the matching dark-green underline rule at `#012800`. Founder Purple (`#5631ea`) is a second scarcity accent reserved for the \"Most Popular\" tile and newsletter banners (it appears in fewer than 10 surfaces across the homepage). Highlighter Yellow (`#f2f673`) appears as a 2-occurrence highlight tag inside the Most Popular module. The ink is near-black at `#212623` over a hairline canvas at `#edf1ef`."
    - id: "typography"
      title: "What typography does TechCrunch use, and what should I substitute?"
      answer: "Two families do the work. Yellix (Type-O-Tones, fallback Inter / Manrope) carries display headlines at 83px / weight 700 with -0.5px tracking and 1.10 line-height — used for every section masthead. NB International Pro Regular (Neubau Berlin, fallback Helvetica Neue / Arial) handles every other size, from 57px byline-hero down to 11px tag-mono captions, across weights 400 / 500 / 700. NB International Pro Mono carries code and fixed-width registers. Open-source substitutes: Bricolage Grotesque or Sora for Yellix display, Inter or IBM Plex Sans for NB International, JetBrains Mono for the mono. The 0.5px and 1px tracking on small-caps UPPERCASE labels is part of the typographic fingerprint — don't remove it."
    - id: "shape-language"
      title: "Why such large 80px border-radius cards?"
      answer: "TechCrunch's outer-card pill radius runs at 80px — the largest pill geometry in any mainstream tech newsroom (The Verge tops out at 40px, The Wall Street Journal at 4px). It appears 21 times across the homepage on story containers, the upcoming-events register, and the Most Popular module. Inputs and small badges drop to 2px (typewriter-tag scale), avatars and category dots use 100% / 50% for circles. The contrast between 80px exterior pills and 2px input corners is intentional — large containers feel like rounded magazine spreads while controls feel like ticker stamps."
    - id: "money-green-role"
      title: "What does Money Green (#0a8935) actually do in the system?"
      answer: "Money Green is a section-heading paint, not a CTA paint. It carries every `<h2>` masthead on the homepage (\"Latest News\", \"Startups\", \"AI\", \"Security\", \"Venture\", \"Video\"), the underline rule beneath them (a darker `#012800`), and the upcoming-events `Register Now` pill buttons. It is not used as a primary CTA background across the rest of the surface — that work goes to near-black `#212623`. Treating green as an editorial cue rather than a marketing color is what gives the page its newsroom-terminal voice."
    - id: "alert-red"
      title: "What is the role of the red #e21c1c?"
      answer: "Red is scoped narrowly to newsletter and form alert states. The newsletter subscription input on the homepage carries a 2px `#e21c1c` border on its required-field state — visible on the extracted form snapshot. The same red appears on a small handful of `red-500` tag chips inside the editorial body. It is not used as a CTA color, never as background, and never decoratively. Treat it the way Bloomberg uses red on price tickers: alert-only."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React newsroom?"
      answer: "Yes. Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce TechCrunch's voice — near-black ink on hairline canvas, Money Green section heads, Yellix at 83px above NB International body, 80px pill cards, dual scarcity accents for newsletter and Most Popular tiles. The 300 WordPress `:root` custom properties are mapped 1:1 to the tokens here, so a Gutenberg theme.json port is mechanical. Substitute Bricolage Grotesque for Yellix and Inter for NB International if you can't license the proprietary faces."

colors:
  ink: "#212623"
  canvas: "#ffffff"
  surface-paper: "#edf1ef"
  hairline: "#d2dcd7"
  hairline-strong: "#b5c0bc"
  text-muted: "#6c7571"
  text-secondary: "#535554"
  money-green: "#0a8935"
  green-rule: "#012800"
  green-tint: "#68f176"
  founder-purple: "#5631ea"
  highlighter-yellow: "#f2f673"
  alert-red: "#e21c1c"
  absolute-black: "#000000"
  near-black: "#050505"
  border-warm: "#b3b85b"
  on-ink: "#ffffff"
  on-canvas: "#212623"

typography:
  display-xl:
    fontFamily: "yellix, Inter, sans-serif"
    fontSize: 83px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: "-0.5px"
  display-lg:
    fontFamily: "yellix, Inter, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: "-0.5px"
  byline-hero:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 57px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: "-0.5px"
  heading-md:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: "-0.5px"
  heading-sm:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 23px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: "-0.5px"
  body-md:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0
  body-sm:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0
  nav-link:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.40
    letterSpacing: "1px"
  eyebrow-caps:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: "0.5px"
    textTransform: uppercase
  caption-micro:
    fontFamily: "nb_international_proregular, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: "1px"

rounded:
  none: "0px"
  xs: "2px"
  pill: "80px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "40px"
  2xl: "56px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "12px 16px"
    height: "44px"
  button-primary-hover:
    backgroundColor: "{colors.green-rule}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "{colors.money-green}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "12px 16px"
  button-register:
    backgroundColor: "{colors.money-green}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  button-see-more:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    border: "1px {colors.hairline-strong}"
  pill-tag:
    backgroundColor: "{colors.highlighter-yellow}"
    textColor: "{colors.absolute-black}"
    typography: "{typography.eyebrow-caps}"
    rounded: "{rounded.xs}"
    padding: "4px 8px"
  top-nav:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    height: "44px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
  section-masthead:
    backgroundColor: transparent
    textColor: "{colors.money-green}"
    typography: "{typography.display-xl}"
  section-masthead-rule:
    backgroundColor: "{colors.money-green}"
    height: "2px"
  story-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.pill}"
    padding: "24px"
    border: "1px {colors.hairline}"
  story-card-feature:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.pill}"
    padding: "40px"
  most-popular-tile:
    backgroundColor: "{colors.founder-purple}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.pill}"
    padding: "24px"
  newsletter-tile:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "12px 16px"
    border: "2px {colors.alert-red}"
  category-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.text-muted}"
    typography: "{typography.eyebrow-caps}"
  byline:
    backgroundColor: transparent
    textColor: "{colors.text-muted}"
    typography: "{typography.body-sm}"
  timestamp:
    backgroundColor: transparent
    textColor: "{colors.text-muted}"
    typography: "{typography.body-sm}"
  hairline-divider:
    backgroundColor: "{colors.hairline}"
    height: "1px"
  avatar-circle:
    backgroundColor: "{colors.hairline}"
    rounded: "{rounded.full}"
    height: "32px"
---

## Overview

TechCrunch's homepage is unmistakably a newsroom-as-ticker. The canvas is a paper-toned hairline gray (`{colors.surface-paper}` — `#edf1ef`) with `{colors.ink}` (`#212623`) doing every load-bearing text and border job, and **Money Green** (`{colors.money-green}` — `#0a8935`) painting every section masthead like a stock-ticker glyph. Two scarcity accents — **Founder Purple** (`{colors.founder-purple}` — `#5631ea`) and **Highlighter Yellow** (`{colors.highlighter-yellow}` — `#f2f673`) — surface only on the Most Popular tile and the newsletter banner. Where most tech-media homepages reach for a serif and a single red brand color, TechCrunch reaches for a geometric sans and a green-stamped editorial cue.

**Section-as-ticker**: Money Green is not a CTA color — it is the paint applied to every `<h2>` masthead on the page ("Latest News", "Startups", "AI", "Security", "Venture", "Video", "Newsletters"). The same green carries the underline rule beneath each masthead and the "Register Now" pill buttons on the upcoming-events register. The effect mimics a Bloomberg ticker indicator more than a marketing accent, and it is the single design move that defines the brand's voice.

Type runs two families. **Yellix 700** (Type-O-Tones, fallback Inter / Manrope) carries display headlines at 83px and 40px with -0.5px tracking and 1.10 line-height — used for section mastheads only, never UI. **NB International Pro Regular** (Neubau Berlin, fallback Helvetica Neue / Arial) handles every other register across weights 400 / 500 / 700, from 57px feature deck down to 11px tag captions. The signature "1px UPPERCASE" treatment shows up on 13px and 16px eyebrows, where `letter-spacing: 0.5–1px` separates the editorial labels from headline type.

The shape language is **outsize pill**. Story cards round at 80px (the largest pill radius in any mainstream tech newsroom — The Verge tops out at 40px), while inputs and small chips drop to 2px typewriter-tag corners. Avatars and category dots use full circles. Depth is carried by hairline borders in `{colors.hairline}` (`#d2dcd7`) and `{colors.hairline-strong}` (`#b5c0bc`) rather than drop shadows — the extracted CSS contains shadow tokens like `--wp--preset--shadow--natural` but they go unused on the homepage. Hierarchy is communicated by container radius and ink contrast.

**Key Characteristics:**
- Money Green section heads: `{colors.money-green}` (`#0a8935`) paints every `<h2>` masthead, with `{colors.green-rule}` (`#012800`) as the underline rule. The single load-bearing brand cue.
- Two-family type stack: Yellix 700 at 83px / 40px for section mastheads, NB International Pro Regular across nine UI registers from 11px caption to 57px byline-hero.
- Outsize 80px pill cards: story containers, upcoming-events tiles, and the newsletter banner all round to 80px — far outside the 8–12px convention in editorial design.
- Dual scarcity accents: `{colors.founder-purple}` (`#5631ea`) and `{colors.highlighter-yellow}` (`#f2f673`) appear in fewer than 10 surfaces combined, scoped to the Most Popular tile and newsletter highlight.
- WordPress-stable token graph: 300 `:root` custom properties expose the Gutenberg theme.json contract directly. Color, spacing, and font tokens map 1:1 to `--wp--custom--color--*` variables.
- Strict 4px spacing base: the spacing array is built strictly on multiples of 4 (4px, 8px, 12px, 16px, 24px, 40px, 56px). The 8px step alone appears 190 times on the homepage.
- Alert red scoped to newsletter forms: `{colors.alert-red}` (`#e21c1c`) appears only as the 2px input border on the required-field newsletter signup — never as a CTA or background.
- Color-as-status, not color-as-decoration: the palette behaves like a Bloomberg terminal. Green for editorial cue, red for alert, purple for promotional scarcity. Decorative accent is absent.

## Colors

### Brand
- **Money Green** (`{colors.money-green}` — `#0a8935`): frequency 103. Used as text (41), border (44), background (18). The load-bearing brand voltage — paints every section masthead and the "Register Now" pill buttons. Acts as a ticker indicator rather than a CTA wash.
- **Green Rule** (`{colors.green-rule}` — `#012800`): frequency 36. Used as text (25), border (11). The darker green underline that sits beneath every section masthead and the active-link rule.
- **Founder Purple** (`{colors.founder-purple}` — `#5631ea`): frequency 6. Used as background (4), text (1), border (1). The scarcity accent reserved for the "Most Popular" tile and newsletter highlight. Mapped to `--wp--custom--color--purple-500` in the WordPress graph.
- **Highlighter Yellow** (`{colors.highlighter-yellow}` — `#f2f673`): frequency 2, background only. The 2-occurrence highlight tag inside the Most Popular module — used as a literal highlighter swatch.

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): frequency 665. Used as text (341) and border (320). The default white surface beneath story cards and inside the top-nav text. Most-frequent color in the extracted graph.
- **Surface Paper** (`{colors.surface-paper}` — `#edf1ef`): frequency 24, background only. The pale green-leaning gray that backs newsletter tiles and the upcoming-events register. Just enough warmth to read as paper rather than chrome.
- **Hairline** (`{colors.hairline}` — `#d2dcd7`): frequency 32, almost entirely border (30). The 1px rule that separates story cards from the surface beneath.
- **Hairline Strong** (`{colors.hairline-strong}` — `#b5c0bc`): frequency 88, all text + border. The slightly darker rule used on "See More" outline buttons and category dividers.

### Ink & Text
- **Ink** (`{colors.ink}` — `#212623`): frequency 1565 — the highest in the entire graph. Used as text (807), border (752). The near-black voltage that does every load-bearing text job. Not pure black — has a green-leaning warmth that ties to the Money Green accent.
- **Text Muted** (`{colors.text-muted}` — `#6c7571`): frequency 414. Used as text (207), border (207). The gray that anchors bylines, timestamps, and category eyebrows.
- **Text Secondary** (`{colors.text-secondary}` — `#535554`): frequency 7. The darker gray used for body in low-contrast contexts.
- **Absolute Black** (`{colors.absolute-black}` — `#000000`): frequency 26. Used as text (9), gradient (16). Reserved for text on Highlighter Yellow tiles and one footer gradient.
- **Near Black** (`{colors.near-black}` — `#050505`): frequency 3, background only. The darker variant used on the masthead band.

### Semantic
- **Alert Red** (`{colors.alert-red}` — `#e21c1c`): frequency 7. Used as text (3), border (4). Scoped narrowly to newsletter input borders and rare `red-500` tag chips. Never a CTA, never decorative.
- **Green Tint** (`{colors.green-tint}` — `#68f176`): frequency 7. Used as text (3), background (1), border (3). The lighter green variant used on small chips and active-state ticks.
- **Border Warm** (`{colors.border-warm}` — `#b3b85b`): frequency 8, border only. A warm olive border used on a handful of editorial cards.

### Gradient System
TechCrunch uses **zero decorative gradients on the homepage**. The extracted CSS exposes 8 Gutenberg gradient presets (`--wp--preset--gradient--electric-grass`, `--wp--preset--gradient--midnight`, and friends), but none of them render on the live home surface. Color is applied in flat blocks, the way a stock ticker paints percentage cells. This is what gives the page its newsroom-terminal voice — a gradient would soften the editorial register.

## Typography

### Font Family
Two families do the work. **Yellix** (Type-O-Tones, fallback Inter / Manrope) carries display headlines at 83px and 40px with -0.5px tracking and 1.10 line-height — used exclusively for section mastheads. **NB International Pro Regular** (Neubau Berlin, fallback Helvetica Neue / Arial) covers weights 400 / 500 / 700 across every other register: 57px feature decks through 11px tag captions. NB International Pro Mono handles fixed-width registers in article bodies but doesn't surface on the home page. Where The Verge runs four families and Wired runs three, TechCrunch is a strict duet — a typographic stance that mirrors the duet of green-masthead-plus-black-ink in the color palette.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 83px | 700 | 1.10 | -0.5px | Section mastheads ("Latest News", "Startups", "AI") |
| `{typography.display-lg}` | 40px | 700 | 1.00 | -0.5px | Compact section heads ("Newsletters", "Most Popular") |
| `{typography.byline-hero}` | 57px | 700 | 1.10 | -0.5px | Feature-story headlines inside hero cards |
| `{typography.heading-md}` | 40px | 700 | 1.20 | -0.5px | Story-card headlines (sans variant) |
| `{typography.heading-sm}` | 23px | 700 | 1.20 | -0.5px | Compact story-tile headlines |
| `{typography.body-lg}` | 19px | 700 | 1.20 | -0.5px | Heavy-weight link text and deck emphasis |
| `{typography.body-md}` | 16px | 400 | 1.40 | 0 | Long-form reading body |
| `{typography.body-sm}` | 13px | 400 | 1.40 | 0 | Bylines, timestamps, secondary decks |
| `{typography.nav-link}` | 16px | 700 | 1.40 | 1px | Top-nav category links |
| `{typography.eyebrow-caps}` | 13px | 400 | 1.30 | 0.5px | UPPERCASE category eyebrows above headlines |
| `{typography.caption-micro}` | 14px | 400 | 1.30 | 1px | UPPERCASE micro-captions on chips and tags |

### Principles
**Yellix is always the masthead, never the UI.** Anything below 40px in Yellix is a bug — it exists to stamp section heads, not to label a button. **NB International Pro Regular is always the body voice.** A 16px nav link at weight 700 with 1px tracking is the same family as a 16px reading paragraph at weight 400 with 0 tracking — the family doesn't change, the typographic register does. **Negative tracking on display is deliberate**: every display register sits at -0.5px to tighten the geometric sans against the masthead green underline. Positive tracking (0.5–1px) belongs to UPPERCASE eyebrows and nav links, where the spacing reads like a ticker label.

### Note on Font Substitutes
The proprietary Yellix face is a tightly drawn geometric sans with high x-height and even stroke contrast. If you substitute, **Bricolage Grotesque**, **Sora**, or **Inter Display** at weight 700 land closest — loosen line-height by approximately +0.05 (1.10 → 1.15) to prevent ascender collisions at 83px. **NB International Pro substitutes** (Inter, IBM Plex Sans, Hanken Grotesk) work at the token values without adjustment. Don't substitute a serif — the geometric-sans-as-display choice is the brand's typographic fingerprint.

## Layout

### Spacing System
- **Base unit:** strict 4px multiples. Every value in the extracted spacing array is a 4px multiple, with the 8px step (190 occurrences) and 4px step (166 occurrences) carrying most of the rhythm.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.2xl}` 56px.
- **Section padding (vertical):** 40–56px between major editorial sections. Story-card stacks themselves run tighter — 8–12px gaps.
- **Card internal padding:** 14×16px interior on standard tiles; feature cards expand to 24–40px.
- **Inline spacing:** eyebrows sit ~4–6px above headlines; headlines sit ~8–12px above decks; timestamps sit ~6–8px below decks.

### Grid & Container
- **Max content width:** ~1014px article default (`--wp--custom--content--width--default`), expanding to ~1360px for wide content (`--wp--custom--content--width--wide`).
- **Column patterns:** a 12-column underlying grid that resolves into a 2-column story-card stream with a 1-column sidebar on the right (carrying ads, the Most Popular purple tile, and newsletter banners). The grid feels editorial because tiles span 1, 2, or full-bleed depending on their feature weight.
- **Container padding:** 24px mobile / 48px desktop on the outer edges.
- **Gutters:** 16–24px between columns, tighter (8–12px) inside story-card stacks.

### Whitespace Philosophy
TechCrunch paces whitespace the way a ticker paces price ticks — short, even, and rhythmic. The hairline canvas is restful enough that 24px of empty `{colors.surface-paper}` between two story cards acts as a palette cleanser, and the 80px pill radii at every story-container edge soften what would otherwise be a dense magazine-grid surface. Where the homepage feels open is in the section-masthead band: each `<h2>` in 83px Yellix green sits over 40–56px of vertical air, separating editorial clusters with the same authority a Bloomberg terminal gives to each pane.

### Border Radius Scale
- **`{rounded.none}` 0px**: section underline rules, hairline dividers
- **`{rounded.xs}` 2px**: text inputs, small badges, pill-tag chips (typewriter-tag scale)
- **`{rounded.pill}` 80px**: story cards, upcoming-events tiles, newsletter banners, the Most Popular tile (the largest pill in mainstream tech publishing)
- **`{rounded.full}` 9999px / 50%**: avatar circles, category dots, icon containers

Four radius values is deliberate. The 80px pill is so much larger than the 2px typewriter corner that the contrast between container and control reads as scale-jump rather than gradient — every story card feels like a rounded magazine spread, every input feels like a ticker stamp.

## Elevation

TechCrunch's depth philosophy is **hairline-over-shadow**. The extracted Gutenberg CSS contains shadow tokens — `--wp--preset--shadow--natural` (6px 6px 9px rgba(0,0,0,0.2)), `--wp--preset--shadow--sharp` (6px 6px 0px rgba(0,0,0,0.2)), `--wp--preset--shadow--deep`, `--wp--preset--shadow--outlined` — but **zero of them render on the live homepage**. The brand declares the inventory and then refuses to use it.

| Level | Treatment | Use |
|---|---|---|
| 0 | No border, no shadow | Default `{colors.surface-paper}` canvas text |
| 1 | 1px hairline `{colors.hairline}` `#d2dcd7` | Standard story-card outlines |
| 2 | 1px hairline `{colors.hairline-strong}` `#b5c0bc` | "See More" outline buttons, secondary cards |
| 3 | 2px rule `{colors.money-green}` `#0a8935` | Active masthead underlines, focused-section rules |
| 4 | Saturated accent fill (`#5631ea`, `#f2f673`) | Most Popular and Highlighter elevation via color, not shadow |

When something needs to stand out, it doesn't get a shadow — it gets a hairline upgrade from gray to green, or it gets a saturated purple/yellow fill. The hairline canvas stays perfectly flat throughout, and hierarchy is carried by border weight and fill saturation. **No blur, no glow, no decorative drop-shadow anywhere on the home surface.**

## Shapes

The shape vocabulary is a two-step contrast: **outsize pill on containers, typewriter tag on controls**. Every story card, upcoming-events tile, and newsletter banner rounds to 80px — a value that appears 21 times in the extracted radii frequency table, the dominant container shape in the system. Every input, badge, and small chip drops to 2px (the typewriter-tag radius that appears 5 times). Avatars, category dots, and icon containers go fully circular at 50% / 100%. There is no intermediate step — no 8px, no 12px, no 16px pill in between. The gap between the 80px outer container and the 2px inner control is the shape signature of the brand: a rounded magazine spread containing square-cornered ticker controls.

## Components

### Buttons

**`button-primary`** — Ink (`#212623`) fill, white text, NB International Pro 16px / 400, `{rounded.pill}` 80px radius, 12×16px padding, 44px height. The most common CTA across the system. Used as the "Sign In" and primary action button. Hover state shifts to `{colors.green-rule}` (`#012800`).

**`button-secondary`** — Money Green (`#0a8935`) fill, ink text, NB International Pro 16px / 400, `{rounded.pill}` 80px radius. Used as the "See More" action paired alongside section mastheads.

**`button-register`** — Money Green fill, white text, NB International Pro 13px / 400, `{rounded.pill}` 80px radius, 8×16px padding. The "Register Now" pill on every upcoming-events row.

**`button-see-more`** — Transparent fill with a 1px `{colors.hairline-strong}` outline, ink text, NB International Pro 13px / 400, `{rounded.pill}` 80px radius. The quiet outline alternative paired with each section masthead.

**`pill-tag`** — Non-interactive saturated accent tag. Highlighter Yellow (`#f2f673`) fill with absolute-black text, NB International Pro 13px / 400 UPPERCASE with 0.5px tracking, `{rounded.xs}` 2px radius (tighter than buttons), 4×8px padding. Used as the literal "highlighter" swatch inside the Most Popular module.

### Cards & Containers

**`story-card`** — Standard editorial story tile. Canvas (`#ffffff`) fill with a 1px `{colors.hairline}` border, `{rounded.pill}` 80px radius, 24px interior padding. Headline in NB International Pro 23px / 700 (sans). Hover: no lift, no scale — the headline color transitions from ink to money-green over 150ms.

**`story-card-feature`** — Top-of-feed feature card. Ink (`#212623`) fill with white text, `{rounded.pill}` 80px radius, 40px+ padding. Image inside the tile clips to the outer radius. The single dark-canvas tile in an otherwise light surface.

**`most-popular-tile`** — Sidebar scarcity tile. Founder Purple (`#5631ea`) full-bleed fill, white text, `{rounded.pill}` 80px radius, 24px padding. One of only four surfaces where purple appears on the homepage — used to mark "Most Popular" with editorial spotlight.

**`newsletter-tile`** — Subscription banner. Surface Paper (`#edf1ef`) fill, ink text, `{rounded.pill}` 80px radius, 24px padding. Contains an email input with the 2px alert-red border and a primary CTA pill.

### Navigation

**`top-nav`** — Ink Black band at 44px height. Wordmark left-aligned, UPPERCASE NB International Pro 16px / 700 category links centered with 1px tracking ("Latest", "Startups", "Venture", "Apple", "Security", "AI", "Apps", "Events", "Podcasts", "Newsletters"), and a single primary CTA pinned right.

**`nav-link`** — NB International Pro 16px / 700 with 1px tracking, white on the ink band. Hover transitions from white to money-green with no underline.

### Editorial Bits

**`section-masthead`** — The signature Money Green `<h2>`. Yellix 83px / 700 with -0.5px tracking and 1.10 line-height, painted in `{colors.money-green}`. Sits above every editorial cluster on the homepage and acts as a stock-ticker indicator.

**`section-masthead-rule`** — The 2px Money Green horizontal underline that follows the masthead. Marks the editorial section boundary.

**`category-eyebrow`** — UPPERCASE category label above story headlines. NB International Pro 13px / 400 with 0.5px tracking, in text-muted gray (`#6c7571`).

**`byline`** — NB International Pro 13px / 400, in text-muted gray. Sits directly beneath the headline alongside the timestamp.

**`timestamp`** — NB International Pro 13px / 400, in text-muted gray. Paired with the byline using a vertical bar separator.

### Forms

**`text-input`** — Canvas fill, 2px `{colors.alert-red}` border (the required-field state shown on the homepage newsletter signup), `{rounded.xs}` 2px radius, NB International Pro 16px / 400 in ink text, placeholder in text-muted gray. The narrow red border is a deliberate alert cue — most newsletter forms ship in a hairline-gray default state; TechCrunch elevates the field to a near-error register to drive subscription clicks.

### Decoration

**`hairline-divider`** — A 1px Hairline (`#d2dcd7`) rule that separates story rows inside dense feed sections.

**`avatar-circle`** — 50% radius circle at 32px diameter. Hairline fill fallback, used for byline author avatars.

## Do's and Don'ts

- **Don't** use Money Green (`#0a8935`) as a primary CTA background. It is a section-masthead paint — `41` of its `103` occurrences are text fills on `<h2>` heads, `44` are border rules, only `18` are backgrounds (and all `18` are the "Register Now" pill on upcoming-events rows). Use Ink (`#212623`) for primary CTAs across the rest of the surface.
- **Don't** use Founder Purple (`#5631ea`) on any tile other than Most Popular or newsletter banners. It appears in only `6` surfaces total — turning it into a third color would dissolve the scarcity. For sidebar elevation, use surface-paper instead.
- **Don't** use Highlighter Yellow (`#f2f673`) as a background fill on text containers larger than ~120px wide. It is a 2-occurrence highlight swatch used as a literal highlighter mark inside the Most Popular module — scaling it up reads as "deprecated WordPress theme" rather than editorial accent.
- **Don't** drop the `-0.5px` tracking on Yellix display headlines at 83px / 40px. The geometric sans relies on the negative tracking to read as a single typographic unit; remove it and the masthead loses its ticker-stamp authority.
- **Don't** soften the 80px container radius below 40px. The shape signature of the brand is the contrast between 80px outer pill containers and 2px inner ticker-stamp controls — splitting the difference at 40px makes story cards look like generic SaaS marketing tiles.
- **Don't** introduce a drop shadow on any story card. The system declares 5 Gutenberg shadow tokens in CSS but uses zero of them on the live surface. Hierarchy is carried by hairline border weight (1px gray → 2px green) and fill saturation, not by layered elevation.
- **Don't** use the alert red (`#e21c1c`) as a CTA color. It is scoped to newsletter input borders and a handful of `red-500` tag chips — `4` border occurrences and `3` text occurrences in the entire graph. For destructive actions, treat the red as alert-only the way Bloomberg uses it on price tickers.

## Known Gaps

- **Article-detail body typography:** the long-form reading view past the homepage (article pages, review templates, podcast episode pages) is not fully captured here. The homepage and the upcoming-events register cover the dominant surface area readers actually encounter.
- **Hover and active state ramps:** the static homepage capture documents the resting state of every component. Precise transition timing on story cards, navigation links, and "Register Now" pills could not be extracted from the static surface.
- **Mobile navigation drawer:** the hamburger drawer below 768px is not captured.
- **Loading skeletons, empty states, and form validation:** newsletter signup error-state styling beyond the resting 2px red border is not documented.
- **TechCrunch+ subscription surfaces:** the paywall, account management, and member-only article surfaces are gated behind authentication and not included in this extraction.
- **Dark mode:** TechCrunch's homepage is light-only — there is no documented dark theme. The ink-black band at the masthead is a single inverted register, not a full dark surface.