---
version: alpha
name: Medium
description: "The internet's reading room. Medium sets a warm cream canvas (#f7f4ed) under an enormous GT Super serif headline, near-black ink, a single black pill CTA, and Sohne sans for chrome, so the whole identity reads as one quiet statement, where the words are the design."
colors:
  # Surface / canvas
  background: "#f7f4ed"          # the warm cream marketing / reading canvas
  surface: "#ffffff"             # pure-white article surface, cards
  surface-dark: "#191919"        # the black pill CTA fill, footer chrome

  # Ink / text
  ink: "#242424"                 # near-black headings and body
  ink-strong: "#191919"          # darkest text, button fill, hover ink
  ink-secondary: "#6b6b6b"       # supporting copy, metadata, captions
  ink-muted: "#8c8c8c"           # faint helper text, placeholders
  on-dark: "#ffffff"             # text on the black CTA and dark chrome

  # Accent — Medium leans almost colorless; black is the accent
  primary: "#191919"             # the black pill CTA — black IS the brand action
  primary-hover: "#000000"       # CTA hover deepens to pure black
  link-blue: "#1a8917"           # the editorial green Medium uses for active/links
  accent-green: "#1a8917"        # Medium's signature publishing green

  # Borders
  border: "#e6e6e6"              # hairline rules, dividers
  border-strong: "#242424"       # focus outlines, strong rules

  # Shadow tint (opaque approximation for the elevation table)
  shadow-ambient: "#808080"      # was rgb(128,128,128) soft glow — opaque hex for the spec

typography:
  display-hero:
    fontFamily: "GT Super, gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: -6.6px
  display:
    fontFamily: "GT Super, gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.4px
  heading:
    fontFamily: "GT Super, gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -1.2px
  heading-sub:
    fontFamily: "Sohne, sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
  article-body:
    fontFamily: "Source Serif Pro, medium-content-serif-font, Georgia, Cambria, Times New Roman, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: 0px
  body:
    fontFamily: "Sohne, medium-content-sans-serif-font, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Sohne, sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Sohne, sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.54
    letterSpacing: 0px
  button-large:
    fontFamily: "Sohne, sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 8px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 25px
  2xl: 48px
  3xl: 75px

rounded:
  sm: 2px
  md: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-large}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-dark}"

  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-small-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-strong}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-flat:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-strong}"
    typography: "{typography.label}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 8px

  tag:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Medium Design System

## Overview

Medium's design is an argument that the words are the design. The single most distinctive move is the enormous GT Super serif headline (`{typography.display-hero}`) — set at a colossal 120px, weight 400, with aggressive negative tracking (-6.6px) and leading pulled below the cap height (line-height 0.83) so two lines lock together into one typographic monument. "Human stories & ideas" doesn't sit on the page so much as occupy it. There is no hero image carrying the weight; the serif is the hero. Everything else on the canvas exists to stay out of its way.

The palette is almost a refusal to have a palette. The canvas is a warm, paper-like cream (`{colors.background}`), text is a soft near-black (`{colors.ink}`, never pure #000), and the only saturated commitment is the black pill button (`{colors.primary}`). Color is so absent that black itself functions as the accent — the "Get started" and "Start reading" capsules are the only filled shapes in the entire layout, fully rounded (`{rounded.pill}`) against an otherwise rule-and-type composition. The cream warmth is the key tell: it reads as old book paper, signaling "reading" before a single word is parsed. Medium's quiet green (`{colors.accent-green}`) surfaces only for active and editorial states, never decoratively.

The typographic system is a clean serif/sans split. GT Super (with a Georgia fallback) carries display and headings — the literary, editorial voice. Sohne handles the chrome: nav links, buttons, captions, metadata — the quiet operational layer. Inside an article, body copy switches to a comfortable reading serif at 21px with generous 1.58 line-height, optimized purely for long-form legibility. Geometry barely registers: 2–4px radii on the rare card or input (`{rounded.sm}`–`{rounded.md}`), full pills on buttons, and almost no elevation — the layout is held together by thin hairline rules (`{colors.border}`) and whitespace, not boxes or shadows. It is, deliberately, the least designed-looking design in its category, which is the whole point.

**Key Characteristics:**
- The single defining move: a colossal GT Super serif headline (`{typography.display-hero}`, 120px, -6.6px tracking, lh 0.83) as the hero — no image needed
- Warm cream canvas (`{colors.background}`, #f7f4ed) — paper-like, signals "reading" before you read
- Near-black ink (`{colors.ink}`, #242424) — never pure black, softer for long-form reading
- Black IS the accent: the black pill CTA (`{colors.primary}`) is the only filled shape on the page
- Clean serif/sans split: **GT Super** for editorial display/headings, **Sohne** for all chrome
- Article body in a dedicated reading serif at 21px / 1.58 line-height — long-form first
- Fully **pill** buttons against an otherwise rule-and-type layout
- Near-zero elevation: thin hairline rules (`{colors.border}`) and whitespace do the structural work
- The quiet publishing green (`{colors.accent-green}`) appears only for active/editorial states, never decoration
- Almost colorless by intent — the restraint is the brand statement

## Colors

### Surface & Canvas
- **Cream** (`{colors.background}`): The warm paper-like canvas — the brand's signature warmth.
- **White** (`{colors.surface}`): The pure-white article reading surface and cards.
- **Near-Black** (`{colors.surface-dark}`): The black pill CTA fill and footer chrome.

### Ink / Text
- **Ink** (`{colors.ink}`): Headings and body. A soft near-black, never #000.
- **Strong Ink** (`{colors.ink-strong}`): The darkest text, button fill, and hover state.
- **Gray** (`{colors.ink-secondary}`): Supporting copy, metadata, and captions.
- **Muted Gray** (`{colors.ink-muted}`): Faint helper text and placeholders.

### Accent
- **Brand Black** (`{colors.primary}`): The black pill CTA — black functions as the accent here.
- **Pure Black** (`{colors.primary-hover}`): The CTA hover.
- **Publishing Green** (`{colors.accent-green}` / `{colors.link-blue}`): Medium's quiet editorial green for active and link states only.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`): Thin rules and dividers — the primary structural device.
- **Strong Rule** (`{colors.border-strong}`): Focus outlines and emphasized rules.
- **Ambient** (`{colors.shadow-ambient}`): Opaque stand-in for the rare soft glow (original was a gray rgb blur — flattened for the Google spec).

## Typography

### Font Family
- **Display / Headings**: `GT Super` — the editorial serif that carries the brand voice. Fallback `Georgia, Cambria, Times`.
- **Chrome / UI**: `Sohne` — nav, buttons, captions, metadata. The quiet operational sans.
- **Article body**: a dedicated reading serif (Source Serif-class) at 21px / 1.58 — long-form legibility only.
- **OpenType**: display uses lining + proportional numerals (`"lnum", "pnum"`); negative tracking scales with size.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 120px / 400 / -6.6px / lh 0.83 — the GT Super monument headline |
| `display` | 64px / 400 / -2.4px — large editorial titles |
| `heading` | 42px / 400 / -1.2px — article and section headings |
| `heading-sub` | 22px / 400 — Sohne sub-headings |
| `article-body` | 21px / 400 / lh 1.58 — long-form reading serif |
| `body` | 16px / 400 — standard Sohne body and links |
| `label` | 14px / 400 — nav, buttons, UI labels |
| `caption` | 13px / 400 — metadata, captions, tags |
| `button-large` | 20px / 400 — the large pill CTA label |

### Principles
- **Serif speaks, sans operates**: GT Super for editorial voice; Sohne for the chrome around it.
- **Scale, don't bold**: headings stay weight 400 and earn presence through size and negative tracking, not heavy weights.
- **Reading first**: article body is a 21px serif with 1.58 leading — every type decision serves long-form legibility.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Component internals stay modest (`{spacing.xs}`–`{spacing.md}`); major hero and section breaks open up wide (`{spacing.2xl}`–`{spacing.3xl}`).

### Grid & Container
- A centered single reading column (~680–728px) is the article archetype
- The marketing hero pairs a left-weighted serif headline with a single decorative illustration on the right
- Generous outer margins frame the content like a printed page

### Whitespace Philosophy
- **The page is paper**: whitespace and the cream canvas do the framing, like margins in a book
- **One focal object**: the giant headline (or the reading column) is the single thing that matters per screen
- **Rules, not boxes**: hairline dividers separate sections; almost nothing is contained in a card or shadow

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; hairline `{colors.border}` rules only | Nearly the entire layout — hero, article, nav |
| Hairline rule (Level 1) | 1px `{colors.border}` divider | Section and metadata separation |
| Soft glow (Level 2) | `0 0 5px` soft (`{colors.shadow-ambient}`) | The rare floating menu or hovered card |

**Shadow Philosophy**: Medium is essentially flat. Structure comes from whitespace and thin hairline rules, exactly like the margins and rules of a printed page. Shadows are vanishingly rare — at most a single soft gray glow under a transient menu. There is no elevation system to speak of, because elevation would introduce visual chrome that competes with the reading experience. The cream canvas and the type carry everything.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 2px | Inputs, badges, the rare flat card |
| `md` | 4px | Cards, larger containers |
| `pill` | 9999px | All buttons and tags |

The geometry is binary: almost everything is sharp-to-barely-rounded (2–4px), and the only fully rounded shapes are the pill buttons and tags. That single pill, set against an otherwise rule-and-type page, is what makes the black CTA read as the one interactive object.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Black (`{colors.primary}`) fill, white text, full **pill** radius, 20px Sohne label. The "Start reading" / "Get started" CTA. Hover deepens to pure black.
- **`button-small`** — The compact 14px-label pill for nav-level actions ("Get started" in the top bar).
- **`button-outline`** — Cream/white fill, ink text, pill radius — low-emphasis secondary actions.

### Cards
- **`card`** / **`card-flat`** — White or cream surface, 2–4px radius, no shadow. Story previews and content blocks separated by rules.

### Inputs
- **`input`** — White fill, hairline outline, 2px radius. **`input-focus`** strengthens the border to `{colors.border-strong}` — no colored ring.

### Navigation
- **`nav-bar`** — Cream (`{colors.background}`), Sohne label links, a hairline bottom rule. The black pill "Get started" sits at the right.

### Accent & Editorial
- **`link`** — Gray (`{colors.ink-secondary}`) text; hover darkens to strong ink (`{colors.ink-strong}`). Editorial active states use the publishing green (`{colors.accent-green}`).
- **`badge`** — White fill, gray text, 2px radius — quiet metadata labels.
- **`tag`** — Border-gray fill, gray text, pill radius — topic tags.

## Do's and Don'ts

### Do
- Lead with an oversized GT Super serif headline (`{typography.display-hero}`) — let type be the hero, no image required
- Use the warm cream canvas (`{colors.background}`) — it signals "reading" and is core to the brand
- Keep ink soft near-black (`{colors.ink}`), never pure #000, for comfortable long-form reading
- Make the black pill (`{colors.primary}`) the single filled CTA — black is the accent
- Split type cleanly: **GT Super** for editorial display, **Sohne** for all chrome
- Set article body in a 21px reading serif with 1.58 line-height — reading first
- Earn heading presence through size and negative tracking at weight 400, not bold weights
- Structure with hairline rules (`{colors.border}`) and whitespace, not cards or shadows

### Don't
- Don't add brand colors — Medium is almost colorless by intent; restraint is the statement
- Don't put a hero image where the giant headline belongs — the serif is the hero
- Don't use pure black (#000) for body text — the soft `{colors.ink}` is gentler for reading
- Don't make buttons square — the pill is the one interactive shape on the page
- Don't reach for shadows or elevation — flat rules and whitespace do the work
- Don't set article body in a sans — long-form copy is a reading serif
- Don't bold the headlines — they stay weight 400 and scale up instead
- Don't use the publishing green decoratively — it's for active/editorial states only

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero headline scales 120px → ~48px while keeping proportional negative tracking; nav collapses; hero illustration drops below or out |
| Tablet | 640–1023px | Headline at ~72–88px; reading column near full-width with comfortable margins |
| Desktop | 1024–1279px | Full layout: left-weighted serif hero + right illustration; centered ~700px reading column |
| Large | ≥1280px | Hero at full 120px; generous page-like outer margins |

### Touch Targets
- Pill buttons run ~40px tall with `8px 16–20px` padding
- Nav and metadata links carry comfortable vertical padding; the reading column stays thumb-friendly

### Collapsing Strategy
- **Hero**: the giant headline scales down dramatically but keeps proportional tracking and tight leading
- **Illustration**: the decorative right-side art drops on small screens — the headline never does
- **Nav**: full links → minimal set; the black pill "Get started" persists
- **Reading column**: holds a comfortable measure, expanding margins rather than the text width

### Image Behavior
- The marketing hero uses a single editorial illustration, not photography — it reflows or drops, never crops the headline
- Inside articles, inline images sit full-measure within the reading column

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream (`{colors.background}`)
- Text: Ink near-black (`{colors.ink}`)
- Accent / primary CTA: **Black pill** (`{colors.primary}`)
- Secondary text: Gray (`{colors.ink-secondary}`)
- Editorial active: Publishing Green (`{colors.accent-green}`)
- Border: Hairline (`{colors.border}`)

### Example Component Prompts

- "Create a hero on cream (`{colors.background}`): a two-line GT Super serif headline at 120px, weight 400, letter-spacing -6.6px, line-height 0.83, in near-black ink (`{colors.ink}`), with a single black pill CTA (`{colors.primary}` fill, white 20px Sohne label, `{rounded.pill}` radius) below"
- "Build the top nav: cream bar, Sohne 14px gray (`{colors.ink-secondary}`) links, a hairline bottom rule (`{colors.border}`), and a compact black pill 'Get started' button at the right"
- "Lay out an article body: centered ~700px column on white (`{colors.surface}`), reading serif at 21px / line-height 1.58 (`{typography.article-body}`), ink (`{colors.ink}`), separated from metadata by hairline rules"
- "Make a story-preview card: cream/white surface, no shadow, 4px radius (`{rounded.md}`), GT Super 22–28px title, Sohne 13px gray caption metadata, a pill topic tag (`{colors.border}` fill)"
- "Design a black pill button: `{colors.primary}` fill, white text, full `{rounded.pill}` radius, `8px 20px` padding; hover deepens to pure black (`{colors.primary-hover}`)"

### Iteration Guide

1. Is the canvas warm cream (`{colors.background}`)? If it's pure white everywhere, you've lost the paper warmth (white is for the article surface only).
2. Is the headline an oversized GT Super serif carrying the page? If there's a hero image doing that job, remove it — the type is the hero.
3. Is the only filled shape the black pill CTA (`{colors.primary}`)? If other colored fills appeared, strip them — Medium is near-colorless.
4. Is body text soft near-black (`{colors.ink}`), not pure #000? And is article body a reading serif at 21px/1.58?
5. Are headings weight 400, earning presence through size and tracking? Don't bold them.
6. Is structure carried by hairline rules and whitespace rather than cards/shadows? Flatten any elevation.
7. Did the green appear decoratively? Reserve `{colors.accent-green}` for active/editorial states only.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Medium. Brand names and trademarks belong to their respective owners.