Brand books Draft · facts being checked

Brand book

Medium

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. Our reading

The system

Fixed, everywhere

Medium logo
Logo
AaGT Super + Söhne
Type pairing
  • 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.

How loud each format gets

SilentStory / article page
QuietApp icon, avatar, favicon
CalmLanding page (medium.com logged-out homepage, as the live site builds it)Deck or proposal page
Warm
LoudBrand campaign (posters, out of home, social)
Loudest

Our engine's setting, built from their rules.

Strategy

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

01

Depth

a system that rewards depth, nuance and time well spent over sensational, surface-level stories Published

02

Human writing

text first: human writing without ads, spam or fraud, in an internet full of AI-generated content Published

03

Open to anyone

anyone can publish and find readers without building a following first Published

04

Member-supported

funded by members instead of ads or selling data; part of each membership goes to the writers you read Published

Full spec
For Published
readers and writers of every kind: developers, novelists, designers, CEOs, anyone with a story
Problem Published
a noisy internet where sensational stories, ads, spam and AI-generated content win
Promise Published
deepen your understanding
Goal Published
To deepen our collective understanding of the world through the power of writing.

Proof behind each pillar

Story Published

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.

Values

What you read and write matters

words can divide or empower, so the product rewards depth and nuance

Published
Substance over packaging

thoughtful conversation over drive-by takes; the design stays quiet so the writing leads

Published
Anyone can have a voice

open platform regardless of background, affiliation or expertise; the brand takes a back seat to writers

Published
No ads, no selling data

supported by members; quality comes first

Published

Category. open platform for reading and publishing human writing Published

Why them

  1. Member-funded, no ads
  2. Built-in readers: no mailing list or following needed first
  3. Human writing first

Boilerplate Published

Medium is a home for human stories and ideas.

Taglines

Human stories & ideas

A place to read, write, and deepen your understanding

Everyone has a story to tell

Support human stories

More real lines

Personality and voice

Thoughtfulbut not highbrowOur reading
Quietbut not dullOur reading
Humanbut not nostalgicOur reading
Candidbut not corporateOur reading

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).

Full spec
  • 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)

plainwarmthoughtfulcandid

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.

  • Sentence case everywhere (observed)
  • We and you (observed)
  • Short, concrete verbs on buttons (observed)
  • No hype, no exclamation marks on marketing pages (observed)
  • 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).

Their words

humanstoriesideasreadwritedeepenunderstandingdepthnuancewritersmemberswisdom

  • Don’t use marketing superlatives
  • Don’t write long headlines
Tone guidenot published

Source: medium.com/about%20(Our%20story;%20read%202026-10-30)medium.com/membership%20(read%202026-10-30)medium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)

Color

Start reading
Do A #191919 pill with a white Söhne label on cream.

Start reading

Don’t Green as a UI color: Medium keeps #34AA45 inside illustration.

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).

Full spec
  • 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
Ground#F7F4ED
Text#242424
Headline#000000
Button#191919, hover #080808
Muted#6B6B6B
Illustration#34AA45 + #242424
Dark mode#171717 / #121212 / #E5E5E5 / #D2D2D2

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.

Source: blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f%20(Karene%20Tropen,%20Oct%2014%202020;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)medium.com/%20with%20prefers-color-scheme:%20dark%20(Playwright,%201440x900,%202026-10-30)

Typography

Human stories & ideas

Aa
GT SuperDisplay · open stand-in
Aa
SöhneText · open stand-in

Human stories & ideas

Do GT Super regular, tight, sentence case, two lines.

HUMAN STORIES & IDEAS

Don’t Caps or bold sans: reads as a generic tech landing page.

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).

Full spec
Their faceUseLicenseOpen stand-in
GT Super (Grilli Type)Commercial (Grilli Type); not supplied. Stand-in Newsreader 380 opsz 72 (OFL), -0.042em, same px sizes
Söhne (Klim Type Foundry)Commercial (Klim); not supplied. Stand-in Geist 400 (OFL), -0.012em
  • 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
DisplayGT Super 400 -> Newsreader 380 opsz 72
UISöhne 400 -> Geist 400
ReadingSource Serif 20/32
Hero120/100, -6.6px (80/72 phone)
Subline22/28

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.

Source: the-brandidentity.com/feed/collins-refresh-medium-keeps-one-eye-future-editorial-origins/%20(The%20Brand%20Identity,%20Nov%203%202020,%20quoting%20COLLINS;%20read%202026-10-30)medium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)medium.com/blog/a-more-expressive-medium-starting-with-medium-63b562206d8f%20(a%20live%20story%20page,%20computed%20styles%20at%201440,%202026-10-30)

Graphic elements

Human stories & ideas

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.

One GT Super sentence owns the first screen · the hero of every logged-out marketing page

Start reading

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.

Black pill, plain label · every primary action (nav and hero)

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.

Cream page held by hairlines · nav, hero and footer

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.

Wordmark alone, black or white · nav and anywhere the brand signs

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.

Printed two-color collage bleeding off the edge · the right side of the desktop hero only

Specimens use sample copy, not Medium’s.

Text first (published, 2024).

Full spec
  • 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
Rule1px solid #242424, full bleed
Radiuspill buttons only

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.

Source: medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)medium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)

Iconography

Full spec
  • 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
Icon systemnot published

Source: medium.design/logos-and-brand-guidelines-f1a01a733592%20(Medium%20Logo%20and%20Usage%20Guidelines,%20last%20updated%20Oct%2030%202024;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)

Illustration

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).

Full spec
  • 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
Hero image460x600, right-edge bleed
Inks#34AA45, #242424
Phonehidden

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.

Source: blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f%20(Karene%20Tropen,%20Oct%2014%202020;%20read%202026-10-30)medium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)itsnicethat.com/news/collins-medium-rebrand-graphic-design-191020%20(It's%20Nice%20That,%20Oct%2019%202020;%20read%202026-10-30)the-brandidentity.com/feed/collins-refresh-medium-keeps-one-eye-future-editorial-origins/%20(The%20Brand%20Identity,%20Nov%203%202020,%20quoting%20COLLINS;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)

Photography

Full spec
  • 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
Principlesnot published

Source: medium.design/logos-and-brand-guidelines-f1a01a733592%20(Medium%20Logo%20and%20Usage%20Guidelines,%20last%20updated%20Oct%2030%202024;%20read%202026-10-30)

Interface & layout

The page, band by band

Nav (fixed)
Hero

Buttons

Full spec

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.

Measured from medium.com/%20(logged%20out)'s 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.

Spacing

MeasureDesktopPhone
Page margin64px24px
Hero text widthmax 720px, centeredfull width
Navigation76px76px

Type, at size

Hero headline (h2), "Human / stories & ideas"

GT Super (Grilli Type) · 120px (phone 80) · line 100px · tracking -6.6px · weight 400

Hero subline (h3)

Söhne (Klim Type Foundry) · 22px · line 28px · weight 400

Hero CTA label (Start reading)

Söhne (Klim Type Foundry) · 20px · line 28px · weight 400

Nav links and the Get started label

Söhne (Klim Type Foundry) · 14px · line 20px · weight 400

Footer links

Söhne (Klim Type Foundry) · 13px · line 20px · weight 400

Story title (reading page, not on the homepage)

Söhne (Klim Type Foundry) · 42px · line 52px · tracking -0.462px · weight 700

Story subtitle

Söhne (Klim Type Foundry) · 22px · line 28px · weight 400

Section heading inside a story

Söhne (Klim Type Foundry) · 20px · line 24px · weight 600

Story body text (reading serif)

GT Super (Grilli Type) · 20px · line 32px · tracking -0.06px · weight 400

Byline and meta (read time, date)

Söhne (Klim Type Foundry) · 14px · line 20px · weight 400

Page anatomy

How Medium’s own landing pages are built, observed on medium.com/%20(logged%20out), 2026-10-30. The full measurements are in spec.md.

Navigation
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.
Hero
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.
Between hero and footer: nothing
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.
Footer
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.

Source: medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)

In use

A more expressive Medium (identity by COLLINS) · 2020

The illustrations show what Medium does: language that clarifies and expands ideas (published). Our reading

Wordmark-only refresh · 2024

Puts the typed word first in an internet full of spam and AI content (published). Our reading

Full spec

Where the system shows up and how loud it gets.

FormatWhat they didSource
App icon / favicon / official avatarThe cropped "Me" icon, black or whitemedium.design/logos-and-brand-guidelines-f1a01a733592%20(Medium%20Logo%20and%20Usage%20Guidelines,%20last%20updated%20Oct%2030%202024;%20read%202026-10-30)
App splashWordmark types on, under one secondmedium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)
Press and banner imagesWordmark on photo or colored ground, clear space = its heightmedium.design/logos-and-brand-guidelines-f1a01a733592%20(Medium%20Logo%20and%20Usage%20Guidelines,%20last%20updated%20Oct%2030%202024;%20read%202026-10-30)

Our setting for each format

FormatLoudnessMust appearWhat varies
Landing page (medium.com logged-out homepage, as the live site builds it)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_assetsThe headline and subline copy; the illustration subject (keep two inks, printed texture, right-edge bleed)
Story / article pageSöhne title 42/52 700, Source Serif 20/32 body at a 680px measure, #242424 on white, wordmark in the navWriter's own images; no brand illustration
Brand campaign (posters, out of home, social)GT Super headline in sentence case, wordmark black or white with clear space = its heightSecondary color grounds and illustration (hexes not published: take them from the campaign source, never invent)
App icon, avatar, faviconCropped "Me" icon, black or white, only in 1:1 enclosed containersnone
Deck or proposal pageCream 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

Rules

Do

  • 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)

Don’t

    Source: medium.design/logos-and-brand-guidelines-f1a01a733592%20(Medium%20Logo%20and%20Usage%20Guidelines,%20last%20updated%20Oct%2030%202024;%20read%202026-10-30)medium.design/about-mediums-new-ish-logo-458885b2d8ab%20(Jason%20Combs,%20Oct%2031%202024;%20read%202026-10-30)blog.medium.com/a-more-expressive-medium-starting-with-medium-63b562206d8f%20(Karene%20Tropen,%20Oct%2014%202020;%20read%202026-10-30)medium.com/%20(Playwright,%20Chromium%20UA%20Chrome%20130%20Mac,%201440x900%20and%20390x844,%20plus%20768/1024/1280/1920%20and%20a%20320-1600px%20width%20sweep,%202026-10-30)

    Steal this kit

    Your name and logo, Medium’s system.

    Comes with you

    • Color roles and how much of each
    • Type pairing, with open fonts
    • Voice rules the writing check enforces
    • Icon, photo, illustration and motion recipes
    • The strategy frame, to fill with yours

    Stays yours

    • Your name and logo
    • Your proof: numbers, customers, quotes
    • Your purpose and claims. Theirs aren’t yours to make

    Use this kit for my brand Use this brand in Claude

    Hand it to a developer

    Your brand next

    Get your brand audit Put your brand in Claude What goes in a brand book

    What Medium doesn’t publish
    • 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

    Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-30. Not affiliated with Medium.