# Medium: brand book and build spec

Medium publishes logo guidelines and two brand posts (2020 identity by COLLINS, 2024 wordmark-only refresh), plus about and membership pages. Everything else here is measured on the logged-out homepage on 2026-10-30: a one-screen cream page with one GT Super sentence, one black pill and a two-color collage.

From unfairly.ai/brand-guidelines/medium, checked 2026-10-30. Unofficial study; not affiliated with Medium.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Medium earns recognition by getting out of the way: a cream page, one GT Super sentence, one black pill, and a wordmark in black or white. Color lives only in illustration, so the words always come first. Based on: The 2024 logo post's text-first rationale, the black-and-white logo rule, and the measured homepage.

## Purpose

Goal: To deepen our collective understanding of the world through the power of writing. (published; https://medium.com/about (Our story; read 2026-10-30))

Story: Founded in 2012 as an open publishing platform: a blank page anyone can write on. Rebranded with COLLINS in 2020 (new wordmark, ellipsis symbol, word-built illustrations); in 2024 dropped the symbol and kept the GT Super-derived wordmark alone, to put text first. (published)

| Value | What it means in the work | Source |
|---|---|---|
| What you read and write matters | words can divide or empower, so the product rewards depth and nuance | published: https://medium.com/about (Our story; read 2026-10-30) |
| Substance over packaging | thoughtful conversation over drive-by takes; the design stays quiet so the writing leads | published: https://medium.com/about (Our story; read 2026-10-30) |
| Anyone can have a voice | open platform regardless of background, affiliation or expertise; the brand takes a back seat to writers | published: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30) |
| No ads, no selling data | supported by members; quality comes first | published: https://medium.com/about (Our story; read 2026-10-30); https://medium.com/membership (read 2026-10-30) |

## Fixed and flexible

Never changes:
- Wordmark alone, black or white
- GT Super headlines, Söhne UI
- Near-black pill buttons
- Cream or white ground with near-black text
- Text first: one message per screen

The one thing that varies: Illustration and color: from none (product, reading) to a two-color collage on the homepage to the full secondary palette in brand campaigns.

## Positioning

- **Statement**: For people who want to read and write with depth, Medium is the member-supported home for human writing, where anyone can find readers without ads or a following. (our reading)
- **Category**: open platform for reading and publishing human writing (published)
- **Audience**: readers and writers of every kind: developers, novelists, designers, CEOs, anyone with a story (published)
- **Problem**: a noisy internet where sensational stories, ads, spam and AI-generated content win (published)
- **Promise**: deepen your understanding (published)
- **Differentiators**: Member-funded, no ads; Built-in readers: no mailing list or following needed first; Human writing first

## Messaging

Boilerplate (published): Medium is a home for human stories and ideas.

Taglines:
- Human stories & ideas (medium.com homepage hero)
- A place to read, write, and deepen your understanding (medium.com homepage subline)
- Everyone has a story to tell (medium.com/about)
- Support human stories (medium.com/membership)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Depth | a system that rewards depth, nuance and time well spent over sensational, surface-level stories |  | published |
| Human writing | text first: human writing without ads, spam or fraud, in an internet full of AI-generated content |  | published |
| Open to anyone | anyone can publish and find readers without building a following first | Over 100 million people connect and share on Medium every month (about page, read 2026-10-30) | published |
| Member-supported | funded by members instead of ads or selling data; part of each membership goes to the writers you read | A growing community of over a million Medium members (about page, read 2026-10-30) | published |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Human stories & ideas" | medium.com hero | https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30) |
| "A place to read, write, and deepen your understanding" | medium.com hero subline | https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30) |
| "Everyone has a story to tell" | medium.com/about | https://medium.com/about (Our story; read 2026-10-30) |
| "Support human stories" | medium.com/membership | https://medium.com/membership (read 2026-10-30) |
| "Unlock a world of wisdom" | medium.com/membership closing band | https://medium.com/membership (read 2026-10-30) |
| "Beyond the obvious." | 2020 billboard | https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30) |

## Voice

Tone words: plain, warm, thoughtful, candid.

Traits:
- Thoughtful, but not highbrow (our reading)
- Quiet, but not dull (our reading)
- Human, but not nostalgic (our reading)
- Candid, but not corporate (our reading)

- Two voices. The homepage and product UI are spare: a 3-word headline, a 9-word subline, 2-word buttons, sentence case, no punctuation flourishes (observed). A landing page follows this voice.
- Brand and design posts are candid, first-person and lightly funny about Medium itself (published examples: the 2024 logo post opens by admitting the logo changed again). Use that voice only for long-form posts about the company.
- The about page states beliefs plainly: what you read and write matters; depth and nuance over sensational takes; substance over packaging; supported by members, not ads (published, paraphrased).

Rules a copy check enforces:
- Sentence case headlines
- Write as "we", to "you"
- American spelling
- No exclamation marks
- Buttons are a verb plus one word: Start reading, Get started, Sign in (observed)

Their words: human, stories, ideas, read, write, deepen, understanding, depth, nuance, writers, members, wisdom.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Cream | #F7F4ED | page ground of the logged-out homepage | page ground of the logged-out homepage: nav bar, hero field and footer band (one continuous ground) |
| Ink | #242424 | text color of nav links and the subline | text color of nav links and the subline; wordmark SVG fill; 1px hairline under the nav and above the footer; story body text |
| Black | #000000 | the hero headline only (GT Super) | the hero headline only (GT Super) |
| Button black | #191919 | fill and 1px border of both pill buttons (Get started, Start reading) | fill and 1px border of both pill buttons (Get started, Start reading) |
| Button black hover | #080808 | pill button fill on hover | pill button fill on hover |
| Muted grey | #6B6B6B | footer links | footer links; story subtitles and meta (read time, date) |
| White | #FFFFFF | button labels | button labels; html/body root ground behind the cream wrapper; wordmark reversed (published: black or white only) |
| Illustration green | #34AA45 | the flat green of the homepage hero illustration (28.6% of the image's pixels) | the flat green of the homepage hero illustration (28.6% of the image's pixels); appears only inside illustration, never as UI color, text or button |
| Dark ground | #171717 | page ground in dark mode (prefers-color-scheme | page ground in dark mode (prefers-color-scheme: dark) |
| Dark nav | #121212 | nav bar ground in dark mode | nav bar ground in dark mode; label color of the white pill buttons in dark mode |
| Dark text | #E5E5E5 | body text, nav links, footer links and wordmark fill in dark mode | body text, nav links, footer links and wordmark fill in dark mode |
| Dark hairline | #D2D2D2 | 1px rule under the nav in dark mode | 1px rule under the nav in dark mode |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | gt-super | Commercial (Grilli Type); not supplied. Stand-in Newsreader 380 opsz 72 (OFL), -0.042em, same px sizes | Newsreader | Georgia, Cambria, "Times New Roman", serif |
| body | sohne | Commercial (Klim); not supplied. Stand-in Geist 400 (OFL), -0.012em | Geist | "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (h2), "Human / stories & ideas" | --text-hero-* | display | 120px | 80px | 100px | -6.6px | 400 |
| Hero subline (h3) | --text-subline-* | body | 22px | 22px | 28px | 0px | 400 |
| Hero CTA label (Start reading) | --text-button-large-* | body | 20px | 20px | 28px | 0px | 400 |
| Nav links and the Get started label | --text-nav-* | body | 14px | 14px | 20px | 0px | 400 |
| Footer links | --text-footer-* | body | 13px | 13px | 20px | 0px | 400 |
| Story title (reading page, not on the homepage) | --text-story-title-* | body | 42px | 42px | 52px | -0.462px | 700 |
| Story subtitle | --text-story-subtitle-* | body | 22px | 22px | 28px | 0px | 400 |
| Section heading inside a story | --text-story-heading-* | body | 20px | 20px | 24px | 0px | 600 |
| Story body text (reading serif) | --text-story-body-* | display | 20px | 20px | 32px | -0.06px | 400 |
| Byline and meta (read time, date) | --text-story-meta-* | body | 14px | 14px | 20px | 0px | 400 |

## Layout

Measured on https://medium.com/ (logged out): Playwright Chromium computed styles at 1440x900 and 390x844, plus 768, 1024, 1280, 1920 and a 4px-step width sweep 320-1600 for breakpoints, 2026-10-30.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 64px | 24px |
| Container max width | 1192px | full |
| Hero text width | max 720px | full |
| Grid columns | 1 | 1 |
| Navigation height | 76px | 76px |

At every width (observed, 2026-10-30):
| What | 390px | 768px | 1024px | 1440px | 1920px |
|---|---|---|---|---|---|
| Side margin | 24 | 48 | 64 | 124 (centred 1192) | 364 (centred 1192) |
| Headline size / line / tracking | 80/72, -4.4px | 106/95, -5.83px | 120/100, -6.6px | 120/100, -6.6px | 120/100, -6.6px |
| Headline lines | 3 | 2 | 2 | 2 | 2 |
| h2 to subline gap | 32 | 48 | 48 | 48 | 48 |
| Illustration | hidden | hidden | 460x600 at x782 y112, right 218px cropped | 460x600 at x980 y183 | 460x600 at x1460 y280 |
| Nav text links | hidden | shown | shown | shown | shown |
| Footer links | 4, left | 4, left | 11, centred row | 11, centred row | 11, centred row |
| Page height (= viewport) | 844 | 1024 | 768 | 900 | 1080 |

Breakpoints from Medium's CSS: 728, 904px.

Homepage bands, top to bottom (observed):
1. Nav (fixed)
   - Desktop: y0-76 incl. 1px #242424 bottom rule; wordmark 112.3x25 at x124 y25; links Söhne 14/20 #242424 25px apart, pill 104x38 ending at x1316
   - Phone: y0-76; wordmark at x24; Get started pill only
   - position fixed
   - same cream as the hero
2. Hero
   - Desktop: cream field y0-831 at 1440x900 (viewport - 69); text block x124, h2 y305.5 (120/100, 2 lines), subline y553.5, button y629.5; image 460x600 at x980 y183 (x = max(782, width - 460))
   - Phone: field y0-772; h2 80/72 three lines from y262, subline y510, button y614; no image
   - vertically centred text block
   - image flush right, desktop only
3. Footer
   - Desktop: y831-900; 1px #242424 top rule; Söhne 13/20 #6B6B6B at y856, 16px apart, row from x380
   - Phone: y772-844; 4 links left at x24, 20px apart
   - no logo, no copyright line

## Page anatomy

How Medium's own landing pages are built, part by part (observed; https://medium.com/ (logged out), 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: One 76px cream bar (75px + a 1px #242424 bottom rule), fixed to the top. Wordmark at the left edge of the 1192px container; four plain text links and a black pill CTA at its right edge. No dropdowns, no icons, no search.
- ground: #F7F4ED
- height: 76px including the 1px bottom border, at every width
- border: 1px solid #242424 bottom, full bleed
- logo: variant Medium wordmark only (no symbol), fill #242424, inline SVG viewBox 0 0 719 160 (the wordmark SVG in the medium.com header (https://medium.com/)); px 112.3x25 at every width; position x124 y25 at 1440 (container left edge); x64 at 904-1320; x48 at 728-903; x24 on phone
- links: count 4 text links + 1 pill; labels Our story, Membership, Write, Sign in, then the pill Get started. Verbatim, in this order; size Söhne 400 14/20 (stand-in Geist 400 14/20, -0.012em); weight 400; color #242424; alignment right-aligned to the container: at 1440 Our story x899.5 (57.9 wide), Membership x982.4 (79.2), Write x1086.6 (33.3), Sign in x1144.9 (42), each 25px after the previous; text box y28.5, 18 tall; Get started pill x1211.9-1316 (104.1x38) at y18.5, 25px after Sign in. The pill right edge = container right edge
- actions: Get started: #191919 pill, #FFFFFF Söhne 400 14/20 label, 38px tall (components.button_primary_nav)
- sticky: yes: position fixed at top 0 over the hero; the hero content starts 75px down
- phone: shows wordmark (x24 y25, 112.3x25) and the Get started pill only (x261.7-366, y18.5, 104.3x38); the four text links are hidden below 728px; menu none (no hamburger); cta Get started pill, right edge at 366 (24px margin)

**Hero**
- summary: The whole first screen is one cream field: a two-line GT Super sentence, a Söhne subline and one black pill on the left; a two-color printed collage illustration (green #34AA45 shapes, #242424 linework) pinned to the right viewport edge on desktop only.
- desktop: column split text block in the 1192px container from x124 (at 1440); text column max-width 720px; illustration 460x600, left edge x = max(782, viewport width - 460): flush to the right viewport edge at >=1242px (x980-1440 at 1440, x820 at 1280); pinned at x782 from 904 to 1241px, so the viewport crops its right side (218px cropped at 1024; no horizontal scroll). It never overlaps the headline (headline ink ends x803 at 1440, x743 at 1024); vertical anchors at 1440x900: h2 box y305.5-505.5 (line 1 "Human", line 2 "stories & ideas", 100px each); subline y553.5-581.5; button y629.5-675.5; illustration y183-783. The text block (370px: h2 200 + 48 gap + subline 28 + 48 gap + button 46) is vertically centred: h2 top = 150 + (viewport height - 69 - 75 - 445) / 2, which gives 305.5 at 900 tall, 395.5 at 1080, 239.5 at 768; illustration anchor absolute box, top = 75 + 0.54 x (hero height - 75) - 300 (54% down the area under the nav, then translateY(-300px)), where hero height = viewport height - 69: top y183 at any 900-tall viewport, y280 at 1080 tall, y112 at 768 tall; text max width 720px headline wrapper; the subline box spans the container (1192px) but its one line is 526.8px; media 460x600 <img> inside <picture>, no frame, no radius, no shadow, object-fit fill; the PNG has a transparent background so the cream shows through; cta size 196x46 (components.button_primary_large); height hero field = viewport height - footer (831 at 900 tall, 1011 at 1080), min-height 560px; the nav overlays its top 76px; gaps h2 to subline 48px; subline to button 48px
- phone: order headline, subline, button; no illustration below 904px; alignment left, x24; sizes h2 80/72px, -4.4px, three lines ("Human" 253px, "stories" 208px, "& ideas" 232px wide), box y262-478; 32px gap; subline 22/28 two lines y510-566; 48px gap; button 196x46 at y614-660. Hero field 0-772 at 390x844; tablet 728 903 h2 106/95px, -5.83px, two lines; 48px side margins; nav links visible; still no illustration
- at rest: Fully static: no animation, carousel or video on the page. The illustration is one still image.
- media: the hero image on https://medium.com/ (light), the dark-mode hero image on https://medium.com/ (served under prefers-color-scheme: dark)
- type: kit.spec.type rows hero, subline, button-large
- cta: one: Start reading (#191919 pill, 196x46). No secondary link, no sign-up form in the hero
- proof: none: no logos, numbers, quotes or ratings on the page

**Between hero and footer: nothing**
- summary: The logged-out homepage has no sections between the hero and the footer. The 1px #242424 footer rule sits directly under the cream hero field. Build no section here.
- ground: #F7F4ED
- desktop: hero field ends at viewport height - 69 (y831 at 1440x900); the footer rule starts at that y. The full page is exactly one viewport tall (page height 900 at 1440x900, 1080 at 1920x1080): no scroll
- phone: hero field ends at y772 at 390x844; footer 72px fills the rest. Page height = 844: no scroll
- anatomy:
  - No feature grid, no story list, no testimonials, no app badges, no newsletter form
  - If a page needs more content, it is not this page: see in_use for other formats
- components:

**Footer**
- summary: A 69px cream strip under a 1px #242424 rule: one centred row of small grey text links. No logo, no columns, no copyright line, no address, no social icons.
- ground: #F7F4ED
- anatomy:
  - Desktop (>=904px): band y831-900 at 1440x900, 69px tall; 1px #242424 top rule (full bleed); links Söhne 400 13/20 #6B6B6B at y856 (25px below the rule top), each text box 20 tall
  - Labels verbatim, in order: Help, Status, About, Careers, Press, Blog, Store, Privacy, Rules, Terms, Text to speech (11 links)
  - Spacing: 16px between links; the row starts x380 at 1440 (x172 at 1024, x300 at 1280, x620 at 1920), i.e. left edge = (viewport width - 680) / 2; widths Help 27.4, Status 37, About 35.8, Careers 45.1, Press 32.3, Blog 26.5, Store 31, Privacy 42.5, Rules 32.2, Terms 36.1, Text to speech 83.8
  - Targets: Help -> help.medium.com, Status -> status.medium.com, About -> /about, Careers -> jobs page, Press -> mailto:pressinquiries@medium.com, Blog -> blog.medium.com, Store -> /store, Privacy/Rules/Terms -> policy.medium.com, Text to speech -> speechify.com/medium
  - Copyright line, address, phone: none on this page
- phone: Below 904px: 72px band, 1px #242424 top rule, four links left-aligned at the page margin: About, Help, Terms, Privacy (verbatim, this order), Söhne 13/20 #6B6B6B, 20px apart (x24, 78.9, 125.9, 180.8 at 390), text at y800.5

**On dark grounds**
- secondary button: in dark mode the pill buttons invert: #FFFFFF fill and border with #121212 label (no outline style)
- link: #E5E5E5
- muted text: #E5E5E5 (footer links and subline both measured #E5E5E5 in dark mode)
- hairline: #D2D2D2 under the nav
- logo variant: wordmark filled #E5E5E5 (published rule: black or white only); page ground #171717, nav #121212; headline #FFFFFF; illustration swaps to the dark file
- scope: Only under prefers-color-scheme: dark. The reference build is light mode

## Components

- **button primary large** (observed): fill #191919, text #FFFFFF, height 46, padding x 20, radius pill, font size 20, weight 400, face body. Hero "Start reading": 196x46 at every width (not full width on phone). Label Söhne 400 20/28, centred. 1px border #191919 (same as fill), padding 8px 20px plus the border; border-radius 1980px (a full pill). No icon, no shadow
  - hover (observed): background #080808, label #FFFFFF
- **button primary nav** (observed): fill #191919, text #FFFFFF, height 38, padding x 16, radius pill, font size 14, weight 400, face body. Nav "Get started": 104.1x38, padding 8px 16px, 1px border #191919, radius 1386px. Transition background-color 0.3s linear, color 0.3s linear. The same pill on phone
  - hover (observed): background #080808, label #FFFFFF
- **nav link** (observed): text #242424, font size 14, weight 400, face body. Plain text links, no underline, 25px apart; hover showed no color, underline or background change in the measurement (Chromium, 600ms after hover)
- **footer link** (observed): text #6B6B6B, font size 13, weight 400, face body. Plain text, no underline, 16px apart on desktop, 20px apart below 904px; no hover change measured
- **hairline** (observed): text #242424. 1px solid #242424 full-bleed rule: the nav bottom border (y75-76) and the footer top border (y831 at 1440x900)

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-color | linear | 300ms | pill button background and label color on hover (#191919 to #080808) | observed |
| app-splash |  | 1000ms | app open: the wordmark types on letter by letter, kept under one second (1000ms is the published upper bound; easing not published) | published |

## Signature moves

### One GT Super sentence owns the first screen

Where: the hero of every logged-out marketing page.
Do: Headline GT Super 400 (stand-in Newsreader 380 opsz 72) at 120px with a 100px line box and tight tracking (-0.055em on the real face, -0.042em on the stand-in), pure #000000, left-aligned at the container edge, broken by hand into two lines ("Human" / "stories & ideas"); under it only a Söhne 22/28 #242424 subline and one #191919 pill.
Don't: center the headline, add a second CTA, put an eyebrow or badge above it, color any word, or set it in Söhne or bold.
Example: "Human stories & ideas".

### Black pill, plain label

Where: every primary action (nav and hero).
Do: #191919 fill and 1px #191919 border, full-pill radius, #FFFFFF Söhne 400 label in sentence case, no icon or arrow, no shadow; hover darkens to #080808 over 0.3s linear.
Don't: use a green or colored button, square corners, an outline secondary button next to it, or an arrow icon.
Example: "Start reading".

### Cream page held by hairlines

Where: nav, hero and footer.
Do: One #F7F4ED ground from top to bottom; structure comes only from two 1px #242424 full-bleed rules (under the nav, above the footer). No cards, shadows, gradients or panels.
Don't: use a white page, grey section bands, drop shadows or rounded cards.

### Wordmark alone, black or white

Where: nav and anywhere the brand signs.
Do: The GT Super-derived Medium wordmark with no symbol, black (#242424 on the site) or white only, clear space = its height on all sides; in a 1:1 enclosed container use the cropped "Me" icon instead.
Don't: bring back the ellipsis symbol, color the wordmark, fill it with an image or gradient, or squeeze the full wordmark into a square.

### Printed two-color collage bleeding off the edge

Where: the right side of the desktop hero only.
Do: A still collage of flat #34AA45 green shapes (a flower, a rectangle with a hand holding a pencil cut out of it) and #242424 engraving-style linework (a geometry diagram with lettered points, dotted arcs, eight-point stars, dashed line) with a grainy printed edge; 460x600, cropped by the viewport's right edge; transparent background over the cream.
Don't: use color photography, 3-D renders, gradients, more than one hue of green, or put the illustration behind the text.

## Voice: rules

Product voice is spare and declarative ("Human stories & ideas", "Start reading"). The about page speaks in we/you about depth, nuance and writing that matters. Design posts are candid and wry about Medium's own history.

Why it works: A writing platform keeps its own voice quiet so writers are heard (our reading of the 2020 post: the brand should never get in the way).

|  |  |
|---|---|
| Tone guide | not published |

- Sentence case everywhere (observed)
- We and you (observed)
- Short, concrete verbs on buttons (observed)
- No hype, no exclamation marks on marketing pages (observed)
- Don't use marketing superlatives
- Don't write long headlines

Sources: https://medium.com/about (Our story; read 2026-10-30), https://medium.com/membership (read 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

## Logo: rules

Medium signs with its wordmark alone: a custom serif modified from GT Super, smoother and tighter than its 2017-2020 predecessor. The 2020 ellipsis symbol was dropped in 2024. In square, enclosed spaces Medium crops the wordmark so the M is centred and the e runs off the edge. On the homepage the wordmark is an inline SVG, 112.3x25, filled #242424.

Why it works: Using the wordmark alone is, in Medium's words, an embrace of the human-typed word; the cropped "Me" implies more beyond the frame and nods to first-person writing (published).

|  |  |
|---|---|
| Primary | Wordmark only, black or white |
| Clear space | X = wordmark height, all sides |
| Icon | "Me" crop, 1:1 enclosed containers only |
| Min size | not published |
| On site | 112.3x25, #242424 (observed) |

- The wordmark is the first choice wherever the space is not a 1:1 container: press images, banners, responsive sites, video thumbnails (published)
- Clear space on all sides = the wordmark's height (30px tall needs 30px clear) (published)
- Black or white only; it may sit on photos or colored grounds with adequate contrast (published)
- If the container is 1:1 and enclosed, use the cropped icon; anywhere else, the full wordmark (published rule, 2024)
- The icon is a secondary identifier, used once Medium is already established; black or white; clear space = icon height (published)
- Never alter, modify or redraw the wordmark or icon (published)
- Don't color the wordmark, apply a gradient or fill it with an image
- Don't squeeze the full wordmark into a square
- Don't reintroduce the ellipsis symbol
- Don't redraw or retype the wordmark in GT Super or a stand-in font

Real examples, to look at on Medium's own pages (not for reuse):
- The Medium wordmark: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)
- Wordmark clear space, X = wordmark height: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)
- Wordmark in black and in white: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)
- The Medium icon (cropped "Me"): https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)
- The usage rule: 1:1 and enclosed gets the icon, anywhere else the wordmark: https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30)
- Medium marks 2012, 2015, 2017, 2020: https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30)

Sources: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30), https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)

## Color: rules

The brand leans on black and white; color is reserved for marketing illustration. The logged-out homepage (2026-10-30) is one warm cream #F7F4ED ground with #242424 ink, a #000000 headline, #191919 pill buttons and #6B6B6B footer links. The only hue on the page is the illustration green #34AA45. Dark mode swaps to #171717 / #121212 grounds, #E5E5E5 text and white pills.

Why it works: Medium describes itself as a blank canvas for other people's writing, which black and white represent; the secondary palette stands for the range of perspectives (published, 2020).

|  |  |
|---|---|
| Ground | #F7F4ED |
| Text | #242424 |
| Headline | #000000 |
| Button | #191919, hover #080808 |
| Muted | #6B6B6B |
| Illustration | #34AA45 + #242424 |
| Dark mode | #171717 / #121212 / #E5E5E5 / #D2D2D2 |

- Core: black and white (published); on the site, near-black #242424 text on cream #F7F4ED (observed)
- Secondary colors only on marketing surfaces about the Medium brand (published, 2020; hexes not published)
- Buttons are near-black #191919, never a hue (observed)
- Green #34AA45 appears only inside illustration (observed)
- Wordmark black or white only (published)
- Don't use green or any hue for text, links or buttons
- Don't use pure white as the homepage ground (the site uses cream #F7F4ED)
- Don't invent hex values for the 2020 secondary palette

Do and don't:
- Do: "Start reading". A #191919 pill with a white Söhne label on cream.
- Don't: "Start reading". Green as a UI color: Medium keeps #34AA45 inside illustration.

Real examples, to look at on Medium's own pages (not for reuse):
- 2020 posters: the secondary palette (blue, red-orange) carrying word-built illustrations: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)
- 2020 billboard on green: "Beyond the obvious.": https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)
- Homepage hero illustration: the only color on the page: https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

Sources: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30), https://medium.com/ with prefers-color-scheme: dark (Playwright, 1440x900, 2026-10-30)

## Typography: rules

GT Super (Grilli Type) for headlines, Söhne (Klim) for everything else; story bodies in Source Serif. On the homepage GT Super runs at 120px with a 100px line box and -0.055em tracking; Söhne at 22, 20, 14 and 13px, all weight 400.

Why it works: COLLINS chose GT Super for its 70s-80s editorial roots and big x-height, readable on small screens; Söhne was already Medium's supporting face and stayed for its clarity (published, third-party interview).

|  |  |
|---|---|
| Display | GT Super 400 -> Newsreader 380 opsz 72 |
| UI | Söhne 400 -> Geist 400 |
| Reading | Source Serif 20/32 |
| Hero | 120/100, -6.6px (80/72 phone) |
| Subline | 22/28 |

- GT Super for display lines only, regular weight, tight tracking, sentence case (observed)
- Söhne 400 for nav, buttons, sublines and footer; 700 only for story titles (observed)
- Long-form reading in a serif: Source Serif 20/32 at a 680px measure (observed)
- Stand-ins: Newsreader 380 opsz 72 for GT Super, Geist 400 for Söhne (our recipe, calibrated)
- Use px line boxes as measured, not ratios of the stand-in size (our recipe)
- Don't set headlines in bold or in a sans
- Don't use all caps
- Don't loosen the headline tracking to 0

Do and don't:
- Do: "Human stories & ideas". GT Super regular, tight, sentence case, two lines.
- Don't: "HUMAN STORIES & IDEAS". Caps or bold sans: reads as a generic tech landing page.

Real examples, to look at on Medium's own pages (not for reuse):
- The wordmark's GT Super letterforms up close: https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30)

Sources: https://the-brandidentity.com/feed/collins-refresh-medium-keeps-one-eye-future-editorial-origins/ (The Brand Identity, Nov 3 2020, quoting COLLINS; read 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30), https://medium.com/blog/a-more-expressive-medium-starting-with-medium-63b562206d8f (a live story page, computed styles at 1440, 2026-10-30)

## Graphic elements: rules

There is no decorative device in the UI: the signature is restraint. Two full-bleed 1px #242424 rules frame the page; the only graphic is the hero illustration.

Why it works: Text first (published, 2024).

|  |  |
|---|---|
| Rule | 1px solid #242424, full bleed |
| Radius | pill buttons only |

- 1px #242424 hairlines under the nav and above the footer (observed)
- Pills for actions, nothing else rounded (observed)
- No cards, shadows, gradients or icons on the homepage (observed)
- Don't add cards, badges or icon rows
- Don't add drop shadows

Sources: https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30)

## Iconography: rules

The logged-out homepage uses no icons. Medium publishes no icon guidelines; its logo guide shows the Medium icon sitting in a row of monochrome social icons.

|  |  |
|---|---|
| Icon system | not published |

- No icons on the landing page (observed)
- When Medium appears in a social icon set, use the "Me" icon in black or white (published)
- Don't add arrows or icons to buttons

Real examples, to look at on Medium's own pages (not for reuse):
- The Medium icon in a set of social icons, black and white: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)

Sources: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

## Illustration: rules

Two eras. 2020 (COLLINS): "language as illustration", images built from letters and words, sometimes 3-D or moving, sometimes interlaced with photography, inspired by concrete poetry. 2024 on: Medium says it is moving away from those ASCII-style text illustrations toward a warmer, more human approach on the logged-out homepage and blog images. The current homepage collage: flat green #34AA45 shapes with grainy printed edges plus black engraving-style diagram linework, on transparent, 1152x1504 source shown at 460x600.

Why it works: Words building images showed what happens on Medium (published, 2020); the newer, warmer style matches the human-writing positioning (published, 2024; no rules for it yet).

|  |  |
|---|---|
| Hero image | 460x600, right-edge bleed |
| Inks | #34AA45, #242424 |
| Phone | hidden |

- Hero illustration: one still image, desktop only (>=904px), 460x600, at x = max(782, viewport - 460) so it bleeds off the right edge on narrower desktops (observed)
- Two inks only: green #34AA45 and #242424, transparent ground so the page cream shows (observed)
- Motifs: hand-drawn or printed objects (flower, writing hand with pencil) collaged with scientific diagram linework and stars (observed)
- The 2024 style has no published rules: Medium said more would follow (published)
- Don't use stock photos or 3-D renders in the hero
- Don't tint the illustration to another color
- Don't place text over it

Real examples, to look at on Medium's own pages (not for reuse):
- Current homepage illustration (light mode): https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)
- Dark-mode version: green with white linework: https://medium.com/ with prefers-color-scheme: dark (Playwright, 1440x900, 2026-10-30)
- 2020: a globe built from topic words: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)
- 2020: words interlaced with photography: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)

Sources: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30), https://www.itsnicethat.com/news/collins-medium-rebrand-graphic-design-191020 (It's Nice That, Oct 19 2020; read 2026-10-30), https://the-brandidentity.com/feed/collins-refresh-medium-keeps-one-eye-future-editorial-origins/ (The Brand Identity, Nov 3 2020, quoting COLLINS; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

## Photography: rules

Medium publishes no photography rules. Its logo guide shows the wordmark over calm, single-subject photos (birds on sky, a figure at dusk, sunset) and colored textures, always with large empty areas behind the mark. The homepage uses no photography.

|  |  |
|---|---|
| Principles | not published |

- Wordmark over photos only where contrast is adequate and the subject does not interfere (published)
- No photography on the landing page (observed)
- Don't put the wordmark over a busy part of an image

Real examples, to look at on Medium's own pages (not for reuse):
- Wordmark on a lighter photo: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)
- Wordmark on a darker photo: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)

Sources: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30)

## Interface and layout: rules

The homepage is exactly one screen at every width: fixed 76px nav, a cream hero field filling the viewport minus a 69px footer, and the footer. Content sits in a 1192px container (64/48/24px margins); the hero text block is vertically centred; the illustration hangs off the right viewport edge on desktop.

Why it works: One sentence and one action: the page asks only that you start reading (our reading).

|  |  |
|---|---|
| Container | 1192px |
| Margins | 64 / 48 / 24 |
| Nav | 76px fixed |
| Footer | 69px (72 on phone) |
| Breakpoints | 728, 904 |

- Container 1192px max; margins 64 / 48 / 24 at >=904 / 728-903 / <728 (observed)
- Headline wrapper max 720px; 48px gaps between headline, subline and button (32 after the headline on phone) (observed)
- Page height = viewport height; nothing below the fold (observed)
- Breakpoints 728 and 904 (observed)
- Don't add sections below the hero on this page
- Don't center the hero text

Real examples, to look at on Medium's own pages (not for reuse):
- 2020 homepage design on a laptop (yellow era), for contrast with today: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)

Sources: https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

## Rules: rules

The only formal rules Medium publishes are its logo guidelines; the rest is observed.

|  |  |
|---|---|

- Wordmark black or white, never altered (published)
- Icon only in 1:1 enclosed containers (published)
- Clear space = mark height (published)
- Black and white first; color for marketing illustration (published)
- Cream ground, near-black pills, GT Super headline, Söhne UI (observed)

Sources: https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30), https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30), https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30), https://medium.com/ (Playwright, Chromium UA Chrome 130 Mac, 1440x900 and 390x844, plus 768/1024/1280/1920 and a 320-1600px width sweep, 2026-10-30)

## Campaigns

### A more expressive Medium (identity by COLLINS) (2020)

New wordmark polish, the ellipsis symbol, word-built illustrations and an expanded secondary palette for marketing.

How the system shows: GT Super headlines in sentence case, images made of words, bold flat grounds (blue, red-orange, green, yellow) on marketing only, black and white in product.
Why it works: The illustrations show what Medium does: language that clarifies and expands ideas (published).
Channels: web, posters, out of home, product. Source: https://blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f (Karene Tropen, Oct 14 2020; read 2026-10-30)

### Wordmark-only refresh (2024)

Dropped the ellipsis symbol; wordmark alone everywhere, a cropped "Me" app icon, a type-on splash under one second; warmer, more human homepage illustration.

How the system shows: Fewer brand elements, more type; the homepage moves to cream with a printed-looking collage.
Why it works: Puts the typed word first in an internet full of spam and AI content (published).
Channels: web nav, app icon, splash animation, avatars, blog images. Source: https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30)

## Applications

| Format | What | Source |
|---|---|---|
| App icon / favicon / official avatar | The cropped "Me" icon, black or white | https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30) |
| App splash | Wordmark types on, under one second | https://medium.design/about-mediums-new-ish-logo-458885b2d8ab (Jason Combs, Oct 31 2024; read 2026-10-30) |
| Press and banner images | Wordmark on photo or colored ground, clear space = its height | https://medium.design/logos-and-brand-guidelines-f1a01a733592 (Medium Logo and Usage Guidelines, last updated Oct 30 2024; read 2026-10-30) |

## By format

Where the system shows up and how loud it gets. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page (medium.com logged-out homepage, as the live site builds it) | 2 | Exactly kit.spec.page, in this order and nothing more: fixed cream nav (wordmark; Our story, Membership, Write, Sign in; Get started pill), one-screen cream hero (GT Super 120/100 headline in two hand-broken lines, Söhne 22/28 subline, one 196x46 #191919 Start reading pill, the 460x600 illustration flush right on desktop only), footer strip of grey links under a 1px #242424 rule. Stand-ins Newsreader 380 opsz 72 (-0.042em) and Geist 400 (-0.012em) at the measured px. Product voice: three-word headline, sentence case, verb buttons. Labels verbatim. The illustration from study.slot_assets | The headline and subline copy; the illustration subject (keep two inks, printed texture, right-edge bleed) |
| Story / article page | 0 | Söhne title 42/52 700, Source Serif 20/32 body at a 680px measure, #242424 on white, wordmark in the nav | Writer's own images; no brand illustration |
| Brand campaign (posters, out of home, social) | 4 | GT Super headline in sentence case, wordmark black or white with clear space = its height | Secondary color grounds and illustration (hexes not published: take them from the campaign source, never invent) |
| App icon, avatar, favicon | 1 | Cropped "Me" icon, black or white, only in 1:1 enclosed containers | none |
| Deck or proposal page | 2 | Cream or white ground, GT Super titles, Söhne text, one near-black pill or none, wordmark alone (our recipe) | One illustration per section at most, two inks |

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Medium's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Minimum logo size: not published
- Secondary palette (2020) hex values: not published; colors appear only in campaign images
- Color proportions or contrast rules: not published
- Type scale, weights and tracking: not published (all type values here are measured on medium.com)
- GT Super and Söhne font files and licences: commercial, not supplied; stand-ins calibrated instead
- Grid, spacing and layout system: not published (measured)
- Iconography guidelines: not published
- Rules for the 2024 "warmer, more human" illustration style: not published (Medium said more would follow)
- Photography principles: not published beyond the wordmark-on-photo contrast rule
- Motion principles and easing: not published (only the splash is under one second)
- Voice and tone guide, banned words: not published
- Positioning statement and a named values list: not published (both here are our reading or paraphrase)
- Accessibility and inclusion guidance: not published
- Data visualization colors: not published
- Press or media kit page: none found (medium.com/press is 404; the Press link is a mailto); the logo asset download is a Google Drive folder, not fetched
- COLLINS case study page: 404 on 2026-10-30
- Nav and footer link hover states: no visible change measured

Logos and reference images belong to Medium. Look at them on Medium's own pages; don't reuse them.