Design readings

Design readings of public websites. Each one extracts type, color, spacing, and the decisions that make a site feel like itself.

• Linear

  linear.app

  A dark instrument. Hierarchy is weight and opacity, and structure is a hairline.

• Stripe

  stripe.com

  Editorial scale on a light page. Navy text, a rare blurple, and room to breathe.

• Vercel

  vercel.com

  Black, white, and a 1px line. Geist for words, Geist Mono for anything exact.

• Notion

  notion.so

  A serif headline on warm paper. The chrome stays neutral so content can be colorful.

• GitHub

  github.com

  A dense utilitarian system. Blue means action, gray borders mean structure, color means status.

• Figma

  figma.com

  A white marketing page with black type, wide margins, and color held inside product scenes. Controls are solid black or thinly outlined, copy stays to one or two short lines, and motion is a brief ease-out.

• Slack

  slack.com

  A full-bleed plum stage opens the page, then the layout drops into a white, centered column. Actions are pills, headlines stay short, and a looping product frame sits in the middle of the first screen.

• Discord

  discord.com

  A dark indigo marketing page with condensed all-caps headlines, casual paragraphs, and white and blurple pills on huge rounded illustration slabs.

• Airbnb

  airbnb.com

  A white catalog page led by large rounded photos, a pill search, and very short labels. Coral is limited to the mark and the round search control; everything else is black, gray, and soft shadow.

• Spotify

  spotify.com

  A near-black catalog home with white type, one green accent, and fully rounded actions. Square covers sit in horizontal shelves under short bold headings.

• Apple

  apple.com

  A full-bleed product homepage of black and pale gray panels, centered photography, and very short centered lines. Actions are pill-shaped, blue or outlined, under a frosted 44px bar.

• Webflow

  webflow.com

  A white marketing page in a variable sans, with near-black type and one saturated blue for every primary action. Display type is enormous and tightly leaded; controls are small, flat, and barely rounded.

• Framer

  framer.com

  A black, centered page with tight geometric headlines, compact controls, and large rounded panels that play the product. Color stays nearly monochrome until blue, green, and amber appear inside those scenes.

• Miro

  miro.com

  A warm gray marketing page with a white bar, a large centered headline, and a living canvas in the hero. Blue carries the main action, and yellow is reserved for the selected pill.

• Canva

  canva.com

  A white marketing page with a purple-to-teal hero, huge regular-weight sans headlines, and large rounded product cards. Controls stay small, pill-shaped, and lightly shadowed.

• Asana

  asana.com

  A white marketing page with a sticky wordmark bar, a centered signup, and a diagram of people and status chips around a very large light headline.

• Intercom

  intercom.com

  Warm paper, regular-weight giants, and tiny square marks instead of shadow.

• HubSpot

  hubspot.com

  Warm paper, a light serif, and orange used only when something can be clicked.

• Dropbox

  dropbox.com

  A warm off-white page with near-black type, blue reserved for the main action, and short centered sections under a product video.

• Adobe

  adobe.com

  A white page, black type, and a full-bleed photo. Actions are pills.

• Squarespace

  squarespace.com

  Black and white chrome. Photography supplies the color, and headlines stay light and large.

• Medium

  medium.com

  A cream, one-screen editorial page: huge serif title, one sentence, black pill buttons, green only in the drawing.

• Substack

  substack.com

  A white notes column. Orange marks the action, a display serif marks the insert, and the writing itself stays a plain sans.

• Shopify

  shopify.com

  A near-black stage, very light display type, and white pills.

• Pinterest

  pinterest.com

  White page, warm gray chrome, red rounded actions, large pictures.

• Twitch

  twitch.tv

  Light catalog shell with a white bar, gray sidebar, square media, and one purple pill action.

• LinkedIn

  linkedin.com

  Guest homepage with a white bar, blue pills, and light bands of short professional copy.

• OpenAI

  openai.com

  A white editorial homepage: one short centered question, a wide prompt, pill actions, then a media story grid.

• Anthropic

  anthropic.com

  Warm ivory editorial page with bold sans headlines, serif paragraphs, oat cards, and a slow staggered title reveal.

• Supabase

  supabase.com

  A wide off-white product homepage. A sticky blurred bar holds the mark, short menus, a quiet account action, and one green action. Below, a two-column hero leads into a horizontal row of illustrated product cards, a slow gray logo strip, a dashboard preview with pill tabs, a template grid, story panels, and a footer with a single email field. Headlines are two short lines. Feature notes are one sentence. Longer, conversational quotes appear only in the community area.

• Cloudflare

  cloudflare.com

  A white page opened by a large orange stage, with pill actions, tight grotesk headlines, and short support lines.

• Tailwind

  tailwindcss.com

  A white ruled page: one huge sentence, short captions, and live interface demos.

• Duolingo

  duolingo.com

  A wide white learning homepage with a centered column, chunky green lip buttons, lowercase green display titles, gray paragraphs, a pale blue illustrated band, a deep navy band, and a green footer.

• Raycast

  raycast.com

  A near-black product page with a floating capsule nav, one light primary button, and short spoken lines over a red light field.

• Loom

  loom.com

  White marketing page with blue pills, huge rounded plates, and short friendly copy.

• Airtable

  airtable.com

  A white marketing page with a short centered headline, a dark fill button beside an outline button, and a large rounded product window sitting on a looping sky video.

• Cal.com

  cal.com

  A gray page with a floating white nav, a large white product panel, and short sentence-case lines: a pill, a large title, one muted sentence, then a dark button beside a gray one.

• Resend

  resend.com

  A near-black developer homepage: a huge serif headline, glass pills, and a yellow-to-amber accent on the trailing words of section titles.

• PostHog

  posthog.com

  A frosted desktop window on an illustrated meadow, with lifted gold buttons, rounded type, and short plainspoken copy.

• Obsidian

  obsidian.md

  A near-black product page with one violet accent, short period-ended headlines, and large app mocks.

• Arc

  arc.net

  A cream and violet homepage with scalloped bands, tight display headlines, and large product pictures.

• Cursor

  cursor.com

  Warm paper page, regular gothic type, pill actions, and framed product scenes.

• 1Password

  1password.com

  Light display type on deep color fields, with pill actions and almost no shadow.