What is TechCrunch's primary brand color?

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`.

What typography does TechCrunch use, and what should I substitute?

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.

Why such large 80px border-radius cards?

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.

What does Money Green (#0a8935) actually do in the system?

Money Green is a section-heading paint, not a CTA paint. It carries every ` ` 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.

What is the role of the red #e21c1c?

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.

Can I use this DESIGN.md to build a React newsroom?

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.

TechCrunch Design System

TechCrunch's newsroom design as a DESIGN.md file.

About TechCrunch DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source techcrunch.com

News & Publishing

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.

What makes it distinct

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 / 700the masthead headline weight is a sharp geometric sans, not the convention-default serif that magazine sites still default to
Two scarcity accentsFounder Purple `#5631ea` and Highlighter Yellow `#f2f673` together appear in fewer than 10 surfaces, reserved for newsletter and subscription tiles
80px pill radiistory cards round at the largest pill value in any mainstream news site, far outside the 8–12px editorial convention
WordPress-stable token graph300 `:root` custom properties expose the Gutenberg theme.json contract directly to AI tools, making variable mapping deterministic

Live at techcrunch.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

techcrunch.com

Explore TechCrunch

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

TechCrunch design system FAQ

Common questions about TechCrunch's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

TechCrunch — official site

The live newsroom whose tokens were extracted to build this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use TechCrunch in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→