What is Medium's primary brand color?

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.

What typography does Medium use, and what should I substitute?

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.

Why are the buttons so heavily rounded?

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.

Why is the hero headline 120px?

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.

Does Medium have a dark mode for this surface?

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.

Can I use this DESIGN.md to build a reading-first React app?

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.

Medium Design System

Medium's homepage design as a DESIGN.md file.

About Medium DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source medium.com

News & Publishing

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.

What makes it distinct

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 400a 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 stackGT Super serif for the hero word, Söhne sans for every nav link, byline, and button label, with zero blended weights
Hand-screened editorial illustrationa stamped green flower and pencil hand occupy the right column, the only color voltage in an otherwise monochrome page

Live at medium.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

medium.com

Explore Medium

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Medium design system FAQ

Common questions about Medium's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Medium — official site

The publishing platform itself — read the homepage to see the GT Super hero and cream canvas in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Medium in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→