Medium

medium.com

The reference for an editorial reading-room hero: a transitional book serif (GT Super) set huge at weight 400 with tight tracking on warm newsprint cream #f7f4ed, all ink monochrome with a single green gesture.

Design tokens

background
surface
text
textMuted
accent
border
tone1
display
Sohne
body
sohne
mono

Do / Don't

Reference it for

  • Newsprint cream canvas #f7f4ed instead of sterile white to make long-form prose feel like a printed page
  • Two-line serif display headline (GT Super, ~120px, weight 400, tracking -0.055em) at whisper weight rather than a bold geometric sans
  • Aggressively monochrome ink palette: text #242424, body #333333, marginalia #6b6b6b, button ink #191919, nothing else chromatic
  • A single colour gesture (the green hand-and-flower collage) carrying the entire brand against the neutral field
  • Full-pill black CTA (Start reading) as the only solid block of ink on the page
  • Flat-on-flat surfacing: no shadows or blur, separation by colour value shift alone (cream to paper to ink)
  • Left-aligned hero column with a hairline-divided top nav and a single dark pill CTA on the right
  • Quiet sans subhead (~20px) under the serif display for a serif/sans pairing that signals 'we publish books, not software'

Do not copy

  • The Medium wordmark and its serif logotype
  • The green hand-drawing-with-a-pen and four-petal flower collage illustration
  • The specific GT Super licensed display serif (substitute a comparable transitional book serif)
  • Brand-specific copy: 'Human stories & ideas', 'A place to read, write, and deepen your understanding'
  • The exact Medium green and the scientific-diagram halftone motif as a signature device
  • The nav labels (Our story, Membership, Write) that map to Medium's product