---
title: "Medium design system"
variant: extended
source: https://medium.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/medium-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Medium · Design System

> Warm paper, bold type, room for ideas.

**Theme:** light · **Industry:** media · **Source:** https://medium.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Medium opens with a spacious editorial hero, pairing a large black serif headline with a warm off-white canvas and a vivid green illustration. A restrained navigation bar, rounded black calls to action, and fine horizontal rules keep the page focused on reading.

## North star

Let warm paper, oversized literary typography, and one vivid editorial illustration carry the page, keeping controls and framing understated.

## Overview

The page is built around a warm, paper-like canvas (#f7f4ed) rather than a stark white background. Nearly black text and rules provide firm contrast, while white appears in the measured surface and button treatment; the visible primary buttons are black pills with white labels. The hero headline uses gt-super, a large expressive serif that gives the page its literary character, while sohne handles navigation, supporting copy, and controls in a quieter sans-serif. A two-column composition places left-aligned copy and CTA against a right-side green editorial illustration. That illustration supplies the only strong chromatic interruption, so its green reads as artwork rather than a general interface accent. Generous open space surrounds the hero, with thin horizontal rules framing the header and footer. The result is flat and calm: typography, canvas, and illustration do the work instead of shadows or layered cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Reading Paper | `#f7f4ed` | `--color-reading-paper` | brand | Warm page canvas for the hero and broad section background. |
| Soft Ink | `#242424` | `--color-soft-ink` | neutral | Primary navigation and body text, link text, and thin structural rules. |
| Clean Surface | `#ffffff` | `--color-clean-surface` | surface | Measured light surface and button label color on the dark CTA. |
| Quiet Gray | `#6b6b6b` | `--color-quiet-gray` | neutral | Muted supporting copy and subdued footer text. |
| Headline Black | `#000000` | `--color-headline-black` | neutral | High-contrast hero headline and strongest typographic emphasis. |
| Button Charcoal | `#191919` | `--color-button-charcoal` | semantic | Filled pill backgrounds for the primary reading and signup actions. |

### Semantic aliases

`--color-canvas` → `#f7f4ed` (Reading Paper) · `--color-surface` → `#ffffff` (Clean Surface) · `--color-text` → `#000000` (Headline Black) · `--color-text-muted` → `#242424` (Soft Ink) · `--color-text-subtle` → `#6b6b6b` (Quiet Gray) · `--color-border` → `#242424` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f4ed` | 19.12:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#242424` | `#f7f4ed` | 14.13:1 | AAA |
| `#242424` | `#ffffff` | 15.52:1 | AAA |
| `#6b6b6b` | `#f7f4ed` | 4.85:1 | AA |
| `#6b6b6b` | `#ffffff` | 5.33:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sohne | `--font-body` | webfont | 400 | Navigation, supporting text, body copy, links, and buttons. | Inter |
| gt-super | `--font-display` | webfont | 400 | Oversized hero display headline. | DM Serif Display |

- **sohne:** Measured regular weight; keep UI copy clean and unembellished, with sentence-case labels.
- **gt-super:** Measured regular weight with tight negative tracking and compact line-height for a tightly stacked editorial headline.

### Type scale — Custom (ratio ≈ 2.098, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 0.83 | -0.055em | — | gt-super | Oversized serif hero headline, stacked across two lines. |
| h1 | 22px | 400 | 1.27 | 0 | — | sohne | Supporting page heading and primary introductory statement. |
| h2 | 20px | 400 | 1.4 | 0 | — | sohne | Secondary headings and supporting content titles. |
| body | 13px | 400 | 1.54 | 0 | — | sohne | Short explanatory hero copy and standard page text. |
| button | 14px | 400 | 1.43 | 0 | — | sohne | Primary CTA labels, including Start reading. |
| link | 14px | 400 | 1.43 | 0 | — | sohne | Navigation items and footer links. |

OpenType features in use: `"lnum", "pnum"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 20, 24, 25, 48, 75 px.
- Section rhythm 48px · element gap — · card padding — · max content width 1192px.

The measured page max width is 1192px, with the hero organized as two columns and copy aligned to the left. At the 1440px screenshot width, the headline and CTA occupy the left half while the illustration sits on the right and is partly cropped by the viewport edge. The header and footer are separated from the hero by fine horizontal rules. The measured spacing scale runs from 8px to 75px, with a 48px section gap and comfortable density; preserve generous open space rather than adding dense modules.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s linear` on interactive elements.

The page reads as flat: no measured shadows or gradients define its hierarchy. Thin dark horizontal rules frame the header and footer, while the hero remains open without card containers. Layering comes from the illustration overlapping its own diagram-like marks, not from elevated UI surfaces.

## Imagery

The hero uses a distinctive flat editorial illustration rather than product photography or 3D. A vivid green flower, geometric diagram marks, and a green panel with a white hand motif sit on the right, partially extending beyond the visible edge. Keep the artwork loose and print-like against the warm canvas, and treat its green as an illustration color rather than a reusable interface accent.

## Components

### Header navigation

A slim horizontal top bar places the Medium wordmark at left and compact story, membership, writing, and sign-in links at right, ending in a dark pill CTA.

### Hero headline

Large black GT Super serif display type, left aligned and stacked into two compact lines.

### Hero supporting copy

A single concise Sohne sentence sits beneath the headline in dark neutral text.

### Primary CTA

Dark charcoal (#191919) pill with white text; the prominent Start reading button uses measured 20px Sohne text.

### Editorial illustration

Right-side green artwork combines a flower, diagram annotations, and a graphic hand panel; it is the page's principal color accent.

### Footer links

A compact centered row of muted utility links sits below a thin horizontal rule.

### Measured component styles

- **Primary button** (“Get started”): background #191919 · text #ffffff · border 1px solid #191919 · radius 1386px · padding 8px 16px · 400 14px sohne
- **Link** (“Get started”): transparent background · text #242424 · radius 0px · padding 0px · 400 16px medium-content-sans-serif-font

## Do

- Use the warm #f7f4ed canvas as the dominant page background.
- Set the hero display in a high-contrast serif and keep its lines tightly stacked.
- Align hero copy and its CTA to the left.
- Reserve vivid green for editorial artwork, not routine controls.
- Use dark pill-shaped CTAs with clear white labels.
- Separate major bands with fine horizontal rules and ample whitespace.

## Don't

- Do not replace the paper-like canvas with a stark full-page white.
- Do not use sans-serif display typography for the main hero headline.
- Do not spread the illustration's green across unrelated UI elements.
- Do not introduce heavy shadows, gradients, or layered card treatments.
- Do not crowd the hero with extra content or competing calls to action.
- Do not center the hero copy when the measured composition is left aligned.

## Agent prompt

Build a new editorial homepage in Medium's visual style. Use Reading Paper (#f7f4ed) as the broad canvas, Soft Ink (#242424) for navigation and rules, and Headline Black (#000000) for the main display headline. Set the hero in a large, tightly stacked serif similar to GT Super, with restrained sans-serif UI copy similar to Sohne. Use a left-aligned copy column and a right-side flat editorial illustration; allow the artwork to be partly cropped at the viewport edge. Treat any vivid green as illustration-only, not a general UI accent. Add a slim navigation bar, fine horizontal dividers, and a dark charcoal (#191919) rounded primary CTA with white text. Keep the composition spacious and flat, with no shadows or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim navigation above a two-column hero, with left-aligned headline and CTA and right-side illustration. | Primary reading CTA, Top-level navigation, Supporting value statement | Warm canvas, Oversized serif headline, Dark pill button, Thin horizontal rules |

## Source CSS custom properties (selected)

```css
--color-bg-neutral-primary: light-dark(#ffffff, #171717);
--color-bg-neutral-secondary: light-dark(#f2f2f2, #242424);
--color-bg-neutral-tertiary: light-dark(#f9f9f9, #1f1f1f);
--color-bg-neutral-quaternary: light-dark(#242424, #d2d2d2);
--color-bg-neutral-elevated: light-dark(#ffffff, #1c1c1c);
--color-bg-neutral-elevated-stacked: light-dark(#ffffff, #2b2b2b);
--color-bg-neutral-elevated-inverted: light-dark(#242424, #1c1c1c);
--color-bg-brand-primary: light-dark(#191919, #ffffff);
--color-bg-brand-primary-hover: light-dark(#080808, #f2f2f2);
--color-bg-accent-secondary: light-dark(#bbdbba, #156d12);
--color-bg-accent-secondary-hover: light-dark(#9fcc9e, #10530e);
--color-bg-accent-tertiary: light-dark(#d2e7d1, #10530e);
--color-bg-accent-quaternary: light-dark(#e8f3e8, #0c3d0a);
--color-bg-error-primary: light-dark(#c94a4a, #762323);
--color-bg-error-primary-hover: light-dark(#b63636, #451717);
--color-bg-utility-yellow-primary: light-dark(#fffae1, #461f01);
--color-bg-utility-blue-primary: light-dark(#e5f2ff, #22214f);
--color-bg-verified-book-author-intro: light-dark(#e5f2ff, #171717);
--color-border-verified-book-author-intro: light-dark(transparent, #2b2b2b);
--color-fg-neutral-primary: light-dark(#242424, #e5e5e5);
--color-fg-neutral-primary-hover: light-dark(#000000, #ffffff);
--color-fg-neutral-secondary: light-dark(#6b6b6b, #b3b3b3);
--color-fg-neutral-secondary-hover: light-dark(#3f3f3f, #d2d2d2);
--color-fg-neutral-tertiary: light-dark(#ffffff, #121212);
--color-fg-accent-primary: light-dark(#1a8917, #6ab668);
--color-fg-accent-primary-hover: light-dark(#156d12, #40993d);
--color-fg-error-primary: light-dark(#c94a4a, #ce5a5a);
--color-fg-error-primary-hover: light-dark(#b63636, #c94a4a);
--color-fg-utility-blue-primary: light-dark(#437aff, #3c9fff);
--color-fg-social-linkedin: light-dark(#0a66c2, #e5e5e5);
--color-border-neutral-primary: light-dark(#f2f2f2, #3f3f3f);
--color-border-neutral-primary-hover: light-dark(#e5e5e5, #2b2b2b);
--color-border-neutral-secondary: light-dark(#242424, #d2d2d2);
--color-border-neutral-secondary-hover: light-dark(#000000, #f9f9f9);
--color-border-neutral-tertiary: light-dark(#e5e5e5, #3f3f3f);
--color-border-neutral-tertiary-hover: light-dark(#d2d2d2, #3f3f3f);
--color-border-brand-primary: light-dark(#191919, #ffffff);
--color-border-accent-primary: light-dark(#1a8917, #6ab668);
--color-border-accent-primary-hover: light-dark(#156d12, #40993d);
--color-border-error-primary: light-dark(#c94a4a, #762323);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/medium-com