Medium

Overview

Medium is a digital publishing platform built on the principle that thoughtful writing deserves a refined, distraction-free reading experience. The design aesthetic is 'Typographic Minimalism'—a philosophy that prioritizes clarity, legibility, and the primacy of content over decoration. The brand serves writers, readers, and thinkers who value substance over noise, creating an environment where human stories and ideas flourish without visual clutter. The emotional response is one of calm focus: users feel they are entering a space of intellectual depth, not commercial urgency.

Medium's voice is conversational yet authoritative, accessible yet sophisticated. The brand avoids hyperbole and marketing speak, instead using precise, measured language that respects the reader's intelligence. Vocabulary leans toward the literary (serif typefaces for headlines, classical proportions) while remaining contemporary in interaction patterns. Example sentence in Medium's voice: 'Read stories from people who understand what matters—and write your own.'

Colors

The color system is rooted in a neutral-dominant palette anchored by near-black (#191919, #242424) and pure white (#ffffff), with strategic accent colors for action and status. Primary (#191919) is the brand's signature dark tone, used for all primary CTAs ('Get started', 'Start reading'), body text, and interactive focus states. It conveys authority and editorial confidence. Secondary (#1a8917) is a vibrant, warm green used sparingly for accent actions, success states, and the brand's illustrative elements (the geometric plant motif in the hero). This green (#1a8917 → hover #156D12) creates visual interest without compromising the minimalist aesthetic. Error red (#c94a4a) is reserved for validation and destructive actions. The surface stack uses subtle grays (#f2f2f2, #e5e5e5) to create d

Typography

The type system employs a two-family strategy: serif for editorial hierarchy (headlines, display text) and sans-serif for interface and body copy. Headlines use gt-super (a geometric serif from Grotesk), sized from 70px (headline-lg) down to 40px (headline-md), with aggressive negative letter-spacing (-0.05em to -0.055em) to create visual impact and reinforce the brand's editorial authority. Body copy uses medium-content-sans-serif-font (a custom stack) at 16px (body-md) with 24px line-height (1.5x) for comfortable reading on screens; longer-form articles scale to 18px body-lg with 28px line-height. Interface labels use sohne (a humanist sans-serif) at 14px (label-md) with 400 weight for consistency with the minimalist aesthetic. All display text applies font-feature-settings: 'pnum' on, '

Layout

The layout uses a fluid 12-column grid with a fixed max-width of 1192px, centered on screen. Horizontal padding scales responsively: 64px on desktop (≥1080px), 48px on tablet (728–1079px), and 24px on mobile (≤727px). This ensures content never feels cramped or stretched. The vertical rhythm is built on 8px units: major section breaks use 40px (lg spacing), card padding uses 24px (md spacing), and internal element spacing uses 12px (sm spacing). The hero section occupies full viewport height (100vh) on desktop, with the headline and CTA positioned in the left column (max-width: 720px) to create asymmetry and guide the eye toward the illustration on the right. Footer links are grouped with 24px horizontal margin (margin: 0 24px) and 24px vertical padding (padding: 24px 0) to create breathin

Elevation & Depth

Depth is conveyed through subtle shadows and surface layering rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) has no shadow—the default surface (#ffffff). Level 2 (Elevated Cards, Hover States) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px vertical offset and 8px blur, creating a gentle lift. Level 3 (Modals, Dropdowns) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) and 8px offset for pronounced separation. Borders are preferred over shadows for interactive elements: input fields and cards us

Shapes

The shape philosophy is 'Refined Geometry'—a balance between sharp, architectural precision and human-friendly softness. Buttons use border-radius: 99em (full pill shape) to signal that they are clickable and approachable; this applies to both primary and secondary buttons uniformly. Cards and containers use border-radius: 1rem (16px) for a subtle, modern feel that avoids the harshness of sharp corners while remaining distinct from fully rounded buttons. Input fields use border-radius: 0.5rem (8px) for a slightly tighter radius, maintaining visual hierarchy and preventing inputs from appearing

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use background: rgba(25, 25, 25, 1) (#191919), color: rgba(255, 255, 255, 1), padding: 8px 20px, height: 40px, border-radius: 99em, and font-size: 14px (label-md). On hover, background transitions to #000000 (button-primary-hover) over 300ms linear. Secondary buttons (button-secondary) use transparent background with a 1px border in #191919, same text color, and identical padding; on hover, they shift to background: #e5e5e5 (surface-container-high) while maintaining text color. Accent buttons (button-accent) use background: #1a8917 (secondary green), color: #ffffff, and on hover shift to #156D12 over 300ms. All buttons have cursor: pointer and :disabled state with opacity: 0.1 and cursor: not-

Do's and Don'ts

**Do**

• Do use gt-super serif for all display and headline text (70px+) to reinforce editorial authority and brand distinctiveness.
• Do apply negative letter-spacing (-0.05em to -0.055em) on headlines to create visual compression and modern sophistication.
• Do use the full pill button shape (border-radius: 99em) consistently for all primary CTAs to signal clear, clickable actions.
• Do maintain 24px vertical padding (md spacing) between major sections to create breathing room and scannable rhythm.
• Do apply the 300ms linear transition on all interactive color changes (background, text, border) to signal responsiveness without distraction.
• Do use the secondary green (#1a8917) sparingly—only for accent actions, success states, and illustrative elements—to preserve visual hierarchy.
• Do layer surfaces using subtle background colors (#f2f2f2, #e5e5e5) and 1px borders rather than heavy shadows to maintain minimalism.
• Do ensure body copy uses 16px font-size with 24px line-height (1.5x) and 80% opacity (rgba(0,0,0,0.8)) for comfortable, sustained reading.

**Don't**

• Don't use sans-serif typefaces for headlines; reserve gt-super serif for all display text to maintain the editorial, authoritative voice.
• Don't apply border-radius values smaller than 0.5rem (8px) to interactive elements—this risks making buttons and inputs feel cramped and unclear.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on any component; excessive shadow depth contradicts the minimalist aesthetic.
• Don't mix the secondary green (#1a8917) with primary black (#191919) in the same component; use one accent color per element to avoid visual noise.
• Don't apply animations longer than 300ms on standard interactions (hover, focus); this creates perceived sluggishness and reduces responsiveness.
• Don't use more than two font families in a single view; stick to gt-super (serif) for headlines and medium-content-sans-serif-font (sans) for body.
• Don't reduce line-height below 1.4x (22px for 16px body text); this harms readability and contradicts the brand's focus on clarity.
• Don't apply color transitions to text elements without also transitioning background or border; this creates visual inconsistency and feels incomplete.