Design
Brooks New Media / Design

Design systems, read from the live page.

We load ten product websites (Linear, Stripe, Vercel and seven more) in a real browser and measure what they actually paint: colors, type, spacing, corners, shadows and buttons. Every system comes with a DESIGN.md you can hand to Claude Code, Cursor, Codex, v0 or Lovable.

10 systemsCaptured October 2026Free DESIGN.md downloads
Airbnb homepage, captured 2026-10-05

Airbnb

light

A photo grid with rounded corners, compact type, and one red search button.

Airbnb Cereal VF
Apple homepage, captured 2026-10-05

Apple

dark

Product theater: a full-bleed hero, centered type, and blue pill buttons.

SF Pro Display + SF Pro Text
Arc homepage, captured 2026-10-05

Arc

light

Saturated blue bands with a wavy edge around a soft, warm center.

Marlin Soft SQ + Marlin + ABC Oracle + InterVariable
Figma homepage, captured 2026-10-05

Figma

light

Stark black and white, with color left to the work on show.

figmaSans
Linear homepage, captured 2026-10-05

Linear

dark

A near-black canvas, cool off-white type, and the product screenshot doing the selling.

Inter Variable + Berkeley Mono
Notion homepage, captured 2026-10-05

Notion

light

A huge black headline, friendly blue buttons, and hand-drawn characters.

NotionInter
Raycast homepage, captured 2026-10-05

Raycast

dark

Black glass, red light, and pale keycap buttons.

Inter + GeistMono
Stripe homepage, captured 2026-10-05

Stripe

light

Weight 300 type, navy ink, and one violet reserved for every action.

sohne-var
Supabase homepage, captured 2026-10-05

Supabase

light

Developer-clean white, a two-tone headline, and one deep green.

Inter + Manrope
Vercel homepage, captured 2026-10-05

Vercel

light

Grayscale and geometric: Geist type, black buttons, and nothing else competing.

GeistSans
How it works

How a capture works.

01

Load the real page

A headless browser opens each site at 1440 by 900, accepts any cookie banner and scrolls the first three screens so lazy sections render.

02

Measure what it paints

Every visible element is read with getComputedStyle. Background colors are weighted by area and text by characters, so the tokens are the ones the page is made of.

03

Write it down for people

We review each capture against its screenshot, then write what the system is doing, what to copy, and what to avoid, with free stand-ins for paid fonts.

Brooks New Media builds websites this way.

brooksnewmedia.com is built the same way: one token file, two themes, every page drawn from it. If you want a site built like that, talk to us. Or just take the DESIGN.md files. They're free, no sign-up.

Talk to Brooks New Media