---
version: alpha
name: Medium
website: "https://medium.com"
description: >-
  A reading-first publishing surface anchored on a warm cream canvas ("#f7f4ed") with near-black ink ("#242424") and a single near-black pill CTA ("#191919"). Display type runs GT Super at 120px in regular weight 400 with "-6.6px" tracking — a literary serif treated at billboard scale where most publishing brands stop at 64px. UI runs Söhne across 13–22px regular for nav, buttons, and metadata, paired with a hand-screened green editorial illustration that anchors the right half of the homepage. The pill geometry is absolute — the primary button radius is "1386px" (effectively fully rounded), and there are no rectangular surfaces in the hero.

seo:
  title: "Medium Design System for React — GT Super 120px, cream canvas #f7f4ed"
  metaDescription: "Medium's homepage design as a DESIGN.md file. Cream canvas #f7f4ed, GT Super serif at 120px, Söhne UI, pill CTAs. For React, Next.js, and AI tools."
  highlights:
    - "Cream canvas — #f7f4ed warm off-white reads as printed paper rather than screen, set against #242424 ink for newspaper-grade contrast"
    - "GT Super at 120px / weight 400 — a literary serif treated at billboard scale with -6.6px tracking, where most publishing brands cap display at 64px"
    - "Single near-black pill CTA — #191919 fill at 1386px radius, paired with a 38px height that reads more like a chip than a button"
    - "Two-family stack — GT Super serif for the hero word, Söhne sans for every nav link, byline, and button label, with zero blended weights"
    - "Hand-screened editorial illustration — a stamped green flower and pencil hand occupy the right column, the only color voltage in an otherwise monochrome page"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Medium's homepage is a reading room rendered as a webpage. The canvas is a warm cream ("#f7f4ed") rather than pure white — close enough to feel like cheap newsprint, far enough from beige to avoid the vintage-tea-stain trap. The hero is four words of GT Super serif set at 120px ("Human stories & ideas"), and that single typographic gesture is the entire identity. There is no gradient, no abstract product illustration, no SaaS-template feature grid below the fold — the page ends where it begins, with one headline, one dek, one pill button, and a hand-screened green illustration occupying the right half.

    This DESIGN.md file packages the homepage system into a structured spec: 18 color tokens covering the cream-and-ink monochrome plus the editorial green, 9 typography tokens spanning GT Super display (28–120px) and Söhne UI (13–22px), a 2-step radius scale where the pill ("1386px") swallows every button and the rectangle ("0px") owns everything else, an 8-step spacing scale, and 16 component specifications covering the nav, hero, CTA pill, footer link rail, and the surface treatments for both reading body and metadata layers. The format follows the Google Labs DESIGN.md specification.

    Feed the file to Claude, Cursor, or any agent that reads structured tokens and it produces Medium's exact reading-first voice — cream paper, oversize literary serif, monochrome ink, a single pill CTA. Unlike most publishing brands that stack a feature grid below a 64px headline, Medium commits the entire first viewport to one sentence — that restraint is the design. Reference the tokens directly in Tailwind config, paste the hex values into CSS variables, or use the spec as an audit checklist when reviewing whether a long-form reading surface feels like a magazine page or a SaaS landing.
  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://medium.com"
      title: "Medium — official site"
      description: "The publishing platform itself — read the homepage to see the GT Super hero and cream canvas in motion."
    - 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 — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Medium's primary brand color?"
      answer: "Medium does not use a chromatic brand color in the conventional sense. The system is anchored on a cream canvas at #f7f4ed paired with near-black ink at #242424 and a slightly darker pill CTA at #191919. The only saturated color on the homepage is a hand-screened green illustration of a flower and a pencil-wielding hand, which functions as editorial art rather than a brand token — there is no green button, no green link, no green background fill anywhere else. The brand voltage is the cream-and-ink monochrome itself, with the green stamp working as a single editorial moment."
    - id: "typography"
      title: "What typography does Medium use, and what should I substitute?"
      answer: "Two families do the work. GT Super (Grilli Type) carries the hero headline at 120px in regular weight 400 with -6.6px tracking — a literary serif treated at billboard scale where most publishing brands stop at 64px. Söhne (Klim Type Foundry) handles every UI element across 13–22px in regular weight 400 — nav links, buttons, bylines, footer rail. If GT Super is unavailable, Tiempos Headline, Newsreader Display, or Söhne Schmal work as serif substitutes — match the negative tracking (-0.05em or tighter) when scaling above 80px. For Söhne, Inter, Hanken Grotesk, or DM Sans substitute cleanly at the published sizes."
    - id: "shape-language"
      title: "Why are the buttons so heavily rounded?"
      answer: "The primary CTA carries a 1386px border-radius applied to a 38px-tall pill — the radius is set high enough that the geometry resolves to a fully rounded chip regardless of width. The pill is the only rounded surface in the system; every text block, image frame, and footer link uses 0px sharp corners. This binary shape language (pill or rectangle, nothing in between) treats the CTA as a chip rather than a button — closer to a magazine subscription tag than a SaaS conversion target. If you substitute, use Tailwind's rounded-full or border-radius 9999px on buttons and 0 on everything else."
    - id: "hero-scale"
      title: "Why is the hero headline 120px?"
      answer: "Medium commits the entire first viewport to one sentence — Human stories & ideas — set in GT Super regular at 120px with 100px line-height and -6.6px tracking. That single gesture is the homepage. There is no product illustration loop, no feature grid below the fold, no testimonial wall. The 120px display size at weight 400 (not 700 or 900) is the brand's confidence signal — the platform trusts its serif voice to carry the page without typographic muscle. Below 768px, the headline scales to roughly 56–72px, but the regular weight stays pinned. Bold display is not in the system."
    - id: "dark-mode"
      title: "Does Medium have a dark mode for this surface?"
      answer: "The marketing homepage extracted here is light-only — cream canvas #f7f4ed with near-black ink. Logged-in reading surfaces on Medium do support a reader-controlled dark mode that inverts the cream to a deep gray-black canvas with off-white ink, but that surface is not part of the extracted spec. If you derive a dark variant from these tokens, invert canvas to #1a1a18 (a warm dark to match the cream's warmth rather than a cool slate) and shift ink to #f1ede4 — pure black on pure white would lose the printed-paper feel that defines the light surface."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a reading-first React app?"
      answer: "Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces Medium's voice — cream canvas, oversize GT Super serif, monochrome ink, a single pill CTA. The spec captures the full token vocabulary, component definitions, and the binary shape language. The 16 component entries cover the homepage nav, hero headline cluster, primary pill CTA, footer link rail, body paragraph, and standard metadata roles. Animation, video embeds, the article-detail reading view, and the membership paywall surface are out of scope — they live on different pages with their own type ladders."

colors:
  canvas: "#f7f4ed"
  ink: "#242424"
  ink-strong: "#191919"
  ink-pure: "#000000"
  ink-muted: "#6b6b6b"
  surface-card: "#ffffff"
  hairline: "#191919"
  on-primary: "#ffffff"
  on-canvas: "#242424"
  on-canvas-muted: "#6b6b6b"
  link-default: "#242424"
  link-hover: "#191919"
  border-strong: "#191919"
  border-rule: "#000000"
  text-primary: "#242424"
  text-secondary: "#6b6b6b"
  text-inverse: "#ffffff"
  cta-fill: "#191919"

typography:
  display-hero:
    fontFamily: "gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: "0.83"
    letterSpacing: "-6.6px"
  display-lg:
    fontFamily: "gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: "0.95"
    letterSpacing: "-3px"
  display-md:
    fontFamily: "gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: "1.05"
    letterSpacing: "-1.5px"
  dek-serif:
    fontFamily: "gt-super, Georgia, Cambria, Times New Roman, Times, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "-0.5px"
  heading-sm:
    fontFamily: "sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: "1.27"
    letterSpacing: "0"
  button-md:
    fontFamily: "sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0"
  body-md:
    fontFamily: "sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.43"
    letterSpacing: "0"
  body-sm:
    fontFamily: "sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: "1.54"
    letterSpacing: "0"
  caption:
    fontFamily: "sohne, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"

rounded:
  none: "0px"
  pill: "1386px"
  full: "9999px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  base: "20px"
  lg: "24px"
  xl: "25px"
  section: "48px"

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    height: "76px"
    padding: "24px 48px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    padding: "8px 12px"
  nav-link-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-md}"
  wordmark:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.heading-sm}"
  button-primary:
    backgroundColor: "{colors.cta-fill}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "38px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 20px"
    border: "1px #191919"
  hero-headline:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
    padding: "0"
  hero-dek:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
  byline:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-sm}"
  page-divider:
    backgroundColor: "{colors.border-rule}"
    height: "1px"
  footer-rail:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-sm}"
    padding: "24px 0"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.body-sm}"
  link-inline:
    backgroundColor: "transparent"
    textColor: "{colors.link-default}"
    typography: "{typography.body-md}"
  illustration-frame:
    backgroundColor: "transparent"
    border: "0"
    rounded: "{rounded.none}"
---

## Overview

Medium's homepage is a reading room rendered as a webpage. The canvas is **Cream Newsprint** (`{colors.canvas}` — `#f7f4ed`) — a warm off-white that reads as cheap printed paper rather than screen, set against **Ink** (`{colors.ink}` — `#242424`) for the hero headline and **Ink Strong** (`{colors.ink-strong}` — `#191919`) for the pill CTA. There is no chromatic brand color in the conventional sense. The only saturated voltage on the homepage is a hand-screened green editorial illustration of a stamped flower and a pencil-wielding hand, which behaves as commissioned art rather than a tokenized brand color.

**Reading-room restraint**: where most publishing brands stack a feature grid, testimonial wall, and feature-comparison band below a 64px hero headline, Medium commits the entire first viewport to four words of GT Super serif set at 120px in regular weight 400 with `-6.6px` tracking. That single gesture is the homepage. Below the fold there is a horizontal hairline, a footer link rail at 12px, and nothing else. The platform trusts its serif voice to carry the page without typographic muscle — bold display weights are absent from the homepage entirely.

The shape language is **binary**. Every interactive surface is either a fully rounded pill (`{rounded.pill}` — `1386px`, which resolves to a fully rounded chip at the 38px button height) or a sharp rectangle (`{rounded.none}` — `0px`). There is no `4px`, no `8px`, no `12px` middle ground. The CTA reads more like a magazine subscription chip than a SaaS conversion button — it is `104px` wide by `38px` tall, sized for one phrase, not for a value proposition.

**Key Characteristics:**
- **Cream Newsprint canvas** (`{colors.canvas}` — `#f7f4ed`): warm off-white that anchors every surface. Pure white (`#ffffff`) appears only inside the pill CTA as text fill.
- **Ink-only voltage**: the system uses three ink shades (`#242424`, `#191919`, `#000000`) for every text, border, and button surface. Chromatic saturation lives only inside the editorial illustration.
- **GT Super at billboard scale**: hero serif at 120px in weight 400 with `-6.6px` tracking — the single loudest typographic move on the page, executed without bold weight.
- **Two-family stack**: GT Super serif for the hero word and dek, Söhne sans for every nav link, byline, button label, and footer item. Zero blended weights between families.
- **Pill-or-rectangle geometry**: every button is `1386px` rounded, every text block and image frame is `0px` sharp. Nothing in between.
- **One ruled line**: a 1px horizontal divider in `#000000` sits below the top nav. That is the entire elevation system — no shadows, no surface ladder, no inset rings.
- **Hand-screened illustration**: a stamped green flower and pencil-hand fills the right column. The only saturated color on the homepage, treated as commissioned editorial art rather than a brand token.
- **Static hover treatment**: nav links shift from `#242424` to `#191919` on hover — a four-point ink darkening that reads as paper-ink response, not a UI animation.

## Colors

### Surface
- **Cream Newsprint** (`{colors.canvas}` — `#f7f4ed`) — frequency 3 (bg). The warm off-white canvas across the entire homepage. Sits at OKLCH lightness `0.97` with a faint warm chroma (`0.01` at hue `87`) — just enough warmth to read as printed paper rather than OLED off-white. The defining brand decision.
- **Pure White** (`{colors.surface-card}` — `#ffffff`) — frequency 3 (2 text, 1 bg). Appears only as the text fill inside the pill CTA and rare card surfaces. Not a canvas color in this system.

### Ink
- **Ink** (`{colors.ink}` — `#242424`) — frequency 24 (12 text, 12 border). The default text color for the hero headline, nav links, and body copy. Not pure black — a near-black with a faint warmth that prevents the printed-paper canvas from looking like a screen.
- **Ink Strong** (`{colors.ink-strong}` — `#191919`) — frequency 4 (2 bg, 2 border). The pill CTA fill. Slightly darker than the text ink, creating a one-shade depth between body type and button surface without introducing a second hue.
- **Ink Pure** (`{colors.ink-pure}` — `#000000`) — frequency 120 (60 text, 60 border). The wordmark and the page-divider rule. The most frequent color on the page by raw count — used for the Medium wordmark glyph, the 1px ruled line below the nav, and high-contrast accent border treatments. Reserved for elements that need to read as printed mark rather than rendered pixel.
- **Ink Muted** (`{colors.ink-muted}` — `#6b6b6b`) — frequency 20 (10 text, 10 border). The mid-gray that anchors the footer link rail, bylines, and timestamps. The only neutral between cream and ink.

### Text
- **Text Primary** (`{colors.text-primary}` — `#242424`): hero headline, nav links, dek, inline reading body.
- **Text Secondary** (`{colors.text-secondary}` — `#6b6b6b`): footer links, captions, byline metadata.
- **Text Inverse** (`{colors.text-inverse}` — `#ffffff`): the pill CTA label. The only place white type appears.

### Interactive
- **CTA Fill** (`{colors.cta-fill}` — `#191919`): the pill button background.
- **Link Default** (`{colors.link-default}` — `#242424`): inline links inherit the ink color — no underline, no chromatic accent.
- **Link Hover** (`{colors.link-hover}` — `#191919`): hover darkens the ink by four points. The full extent of the link hover response — no underline, no color shift to blue.

### Rule
- **Border Rule** (`{colors.border-rule}` — `#000000`): the 1px horizontal ruled line below the top nav. The only structural rule on the page.
- **Border Strong** (`{colors.border-strong}` — `#191919`): the 1px secondary-button outline.

### Gradient System
Medium uses **zero gradients**. Every surface is a flat single-hex fill. The cream canvas does not fade into anything; the pill CTA does not glow; the wordmark does not have a glyph gradient. The hand-screened green illustration is the closest the page comes to chromatic depth, and even there the green is applied as a single flat ink layer mimicking a rubber-stamp print rather than a CSS gradient.

## Typography

### Font Family
Two families do the work, with no overlap. **GT Super** (Grilli Type, fallback Georgia / Cambria / Times) is the editorial serif — used exclusively for the hero headline, secondary display tiers, and the serif dek. **Söhne** (Klim Type Foundry, fallback Helvetica Neue / Helvetica / Arial) is the UI workhorse — every nav link, button label, byline, footer item, and reading body uses Söhne at regular weight 400. There is no italic in the homepage, no bold in either family, and no third family — not a monospace, not a script, not a fallback display sans.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 120px | 400 | 0.83 | -6.6px | Hero headline ("Human stories & ideas") |
| `{typography.display-lg}` | 80px | 400 | 0.95 | -3px | Secondary feature headlines (responsive scale-down tier) |
| `{typography.display-md}` | 56px | 400 | 1.05 | -1.5px | Tablet hero size and section heads on inner pages |
| `{typography.dek-serif}` | 28px | 400 | 1.2 | -0.5px | Serif sub-dek beneath the hero, sized to one phrase |
| `{typography.heading-sm}` | 22px | 400 | 1.27 | 0 | Wordmark glyph and section sub-heads |
| `{typography.button-md}` | 20px | 400 | 1.4 | 0 | Secondary button labels |
| `{typography.body-md}` | 14px | 400 | 1.43 | 0 | Nav links, primary button label, the homepage dek |
| `{typography.body-sm}` | 13px | 400 | 1.54 | 0 | Reading body, footer rail items, bylines |
| `{typography.caption}` | 12px | 400 | 1.5 | 0 | Microcopy and timestamp metadata |

### Principles

**Weight 400 as signature**: every type token on the homepage runs at weight 400. Where most publishing brands command attention with weight 700 display and weight 500 sub-heads, Medium holds every tier at regular — confidence by typographic restraint. Bold serif at this scale would read as a CNN headline; regular serif at 120px reads as a magazine title page.

**Negative tracking is the display signal**: GT Super at 120px takes `-6.6px` of tracking — roughly `-0.055em`. The negative spacing tightens the literary serif into a compact word-cluster rather than letting the words breathe at billboard distance. Below 56px, tracking returns to `0`. The negative scale is reserved exclusively for display tiers.

**Söhne never carries display**: the sans family caps out at 22px on the homepage. It exists to label, not to announce. Every moment that would be display in a SaaS system — the dek, the section head, the wordmark — is either GT Super or absent.

### Note on Font Substitutes
GT Super at 120px with `0.83` line-height and `-6.6px` tracking assumes the proprietary GT Super Display face from Grilli Type. If you substitute with **Tiempos Headline**, **Newsreader Display**, **Source Serif 4 Display**, or **Fraunces**, hold the regular weight 400 and match the negative tracking proportionally (`-0.055em` works as a substitute for the explicit `-6.6px` at 120px). Loosen line-height by approximately `+0.05` (0.83 → 0.88) if the substitute has taller ascenders. Söhne substitutes (Inter, Hanken Grotesk, DM Sans, Söhne Schmal) work at the token values without adjustment.

## Layout

### Spacing System
- **Base unit:** 4px with an 8px primary step.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.base}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 25px · `{spacing.section}` 48px.
- **Nav padding:** 24px vertical, 48px horizontal. The top nav sits at `76px` total height.
- **Hero cluster padding:** the headline and dek share a vertical gap of roughly 24px; the dek and pill share roughly 32px. Generous breathing room — the cluster is not crowded.
- **Footer rail padding:** 24px vertical, items separated by 16px inline gaps. Sits at the page floor with the same cream canvas, no separator beyond the 1px black rule under the top nav.

### Grid & Container
- **Max content width:** ~1280–1440px with the page extending to the viewport edge — there is no centered container card.
- **Column patterns:** a two-column hero where text occupies the left 50% and the green illustration occupies the right 50%. The footer link rail collapses to a single centered row of 8 items.
- **Outer padding:** 48px on desktop, scaling to 24px on mobile.

### Whitespace Philosophy
The page is the inverse of an editorial maximalist — Medium uses whitespace as the primary structural device. Roughly half the homepage by area is empty cream canvas. The hero cluster sits anchored low-left, the illustration anchors center-right, and the top-left and bottom-right corners are deliberately empty. Where most publishing brands fill every quadrant with a story tile, Medium leaves the canvas to breathe.

### Border Radius Scale
- **`{rounded.none}` 0px:** every text block, image frame, illustration container, and surface.
- **`{rounded.pill}` 1386px:** the primary CTA — resolves to a fully rounded chip at the 38px button height.
- **`{rounded.full}` 9999px:** alias for pill, available for any button or chip that needs the same geometry.

Two radii is unusually few for a 16-component system, and it is deliberate. The binary pill-or-rectangle vocabulary treats every interactive surface as either a chip or a printed text block — there is no notched, slightly-softened middle.

## Elevation

Medium's depth philosophy is **flat ink-on-paper**. There are zero box shadows, zero atmospheric blurs, and zero surface ladders on the homepage.

| Level | Treatment | Use |
|---|---|---|
| 0 | No border, no shadow | Default cream canvas text |
| 1 | 1px `#000000` horizontal rule | The single page-divider line below the top nav |
| 2 | 1px `#191919` outline | Secondary outlined buttons (if used) |
| 3 | `#191919` saturated fill on cream canvas | The pill CTA — depth via fill weight, not shadow |

When something needs to stand out, it does not get a shadow — it gets either the near-black pill fill or sits inside the ink-only type ladder. The cream canvas stays perfectly flat throughout. **No gradients, no glows, no inset rings, no atmospheric darkening anywhere.**

## Components

### Buttons

**`button-primary`** — Ink Strong (`#191919`) fill, white text, Söhne 14px / 400, `{rounded.pill}` 1386px radius, `8px 16px` padding, `38px` total height. The only primary CTA on the homepage — usually "Get started". Hover state darkens the fill to pure black `#000000` with no scale, no glow, no ring.

**`button-primary-hover`** — Pure black `#000000` fill, same white text and pill geometry. Color-only response.

**`button-secondary`** — Transparent fill with a 1px `#191919` outline, Ink text, Söhne 20px / 400, `{rounded.pill}` 1386px radius, `8px 20px` padding. Used for "Sign in" and other ghost-pill calls.

### Editorial Display

**`hero-headline`** — The signature Medium move. GT Super 120px regular weight 400 with `-6.6px` tracking and `0.83` line-height, Ink (`#242424`) on cream canvas. Sized for one phrase, anchored to the left column. Below 768px the size collapses to roughly 56–72px while keeping the regular weight pinned.

**`hero-dek`** — Söhne 22px / 400 in Ink. Sits beneath the headline at roughly 24px vertical gap. Sans-serif voice deliberately contrasts the serif headline — the dek is UI text labeling the editorial display above it, not an extension of the serif voice.

### Navigation

**`top-nav`** — Cream canvas (`#f7f4ed`) bar at `76px` height with the Medium wordmark left-aligned and four UI-sans nav links plus a single pill CTA pinned right. Padding: 24px vertical / 48px horizontal. Below the bar sits a 1px `#000000` ruled line — the only ruled line on the page.

**`wordmark`** — The Medium logo set in Söhne 22px / 400 with `0` tracking, rendered in pure black `#000000`. Treated as a glyph, not a decorative mark.

**`nav-link`** — Söhne 14px / 400 in Ink (`#242424`). No underline at rest. Hover shifts the color to Ink Strong (`#191919`) — a four-point darkening that reads as paper-ink response rather than a UI animation. No background fill on hover.

**`nav-link-hover`** — Ink Strong text color, no underline, no background.

### Editorial Bits

**`body-paragraph`** — Söhne 14px / 400 with `1.43` line-height in Ink. The reading body voice across the homepage and footer.

**`byline`** — Söhne 13px / 400 in Ink Muted (`#6b6b6b`). Used for author names and timestamps on article cards (off-homepage but extracted from the type ladder).

**`page-divider`** — 1px `#000000` horizontal rule. Sits below the top nav. The single ruled line on the page.

**`link-inline`** — Inherits the Ink (`#242424`) color of body type with no underline at rest, no color accent. Inline links read as bolded printed words rather than as web links — readers click them because of context, not because of chrome.

### Footer

**`footer-rail`** — Cream canvas footer band with 24px vertical padding, holding 8 footer links centered in a single row. Each link in Söhne 13px / 400 with `#6b6b6b` ink muted text. No background change, no rule above the rail — the cream canvas continues uninterrupted.

**`footer-link`** — Söhne 13px / 400 in Ink Muted. Hover behavior matches the nav link — color darkens to Ink Strong, no underline.

### Illustration

**`illustration-frame`** — Transparent background, no border, no radius. Contains the hand-screened green flower and pencil-wielding hand SVG illustration. The illustration occupies roughly the right 40% of the hero band and bleeds to the viewport edge without a frame or shadow.

## Do's and Don'ts

### Do
- **Hold every type tier at weight 400.** GT Super at 120px works because the weight is regular — moving to 600 or 700 collapses the magazine-title-page feel into a tabloid headline.
- **Use `1386px` (or `9999px`) for the pill CTA and `0px` for everything else.** The binary geometry is the system's shape signature.
- **Keep the 1px `#000000` rule below the top nav.** It is the only ruled line on the page and it does the entire elevation job.
- **Apply the green only as commissioned illustration.** Treat any saturated color the same way — a single stamped editorial moment, never a button fill or hover state.
- **Pair GT Super for display, Söhne for everything else, and stop there.** A third family breaks the two-family discipline.

### Don't
- **Don't underline links.** Both `link-inline` and `nav-link` render with zero text-decoration. The four-point ink darkening on hover (`#242424` → `#191919`) is the entire response — adding an underline reads as broken-link CSS reset.
- **Don't use `#6b6b6b` (Ink Muted) for headlines or buttons.** It is a metadata-layer ink only (frequency 20, used entirely on captions, footer links, and timestamps). Use `#242424` for headline-rank text instead.
- **Don't introduce `4px`, `8px`, or `12px` border-radius on any surface.** The system is binary — pill or sharp rectangle, nothing in between. A `8px` rounded card breaks the printed-page voice entirely.
- **Don't add box-shadows to the pill CTA.** Medium's depth comes from fill weight (`#191919` sitting on `#f7f4ed`), not from atmospheric blur. A `0 2px 6px rgba(0,0,0,0.1)` would import a SaaS-button signal into a chip vocabulary.
- **Don't scale GT Super display to bold weights even on mobile.** When the hero collapses from 120px to 56–72px on small screens, the weight stays at 400. Bold display is not in the system at any breakpoint.
- **Don't fill the right column with a product screenshot.** The green illustration occupies that real estate as commissioned art, not as a feature visual. Replacing it with a UI mockup turns the homepage into a SaaS landing.

## Known Gaps

- **Article-detail reading view:** the long-form article surface past the homepage uses a different type ladder (GT Super body at 21px, wider measure, drop-cap variants) that is not captured in this homepage-only spec.
- **Membership paywall surface:** the subscribe flow has its own cream-on-cream card stack with reader-facing pricing chrome — not in scope.
- **Dark mode tokens:** the reader-controlled dark mode on logged-in surfaces is not extracted. A derived dark variant would invert canvas to a warm dark (`~#1a1a18`) rather than a cool slate to preserve the printed-paper warmth.
- **Author profile and publication pages:** these surfaces add follow-button chrome, avatar treatments, and tag pills not present on the homepage.
- **Hand-screened illustration set:** the green stamped flower and pencil-hand is one of a small editorial illustration family on the marketing site; the others (different motifs, same printing voice) are not tokenized here.
- **Motion and transition timings:** the four-point ink darkening on hover is documented, but transition duration and easing curves are not captured in the extracted CSS.