Medium

Overview

Medium is a digital publishing platform that prioritizes clarity, accessibility, and thoughtful discourse. The design system embodies a "Refined Minimalism" aesthetic—one that strips away unnecessary ornamentation to focus on typography, whitespace, and purposeful color accents. The brand serves writers, readers, and thinkers who value substance over flash; the interface should feel like a well-designed book or magazine, not a social network. The emotional response is one of calm focus: users should feel they are entering a space dedicated to reading and reflection, not distraction. The color palette is deliberately restrained—a near-white canvas (#ffffff), deep charcoal text (#242424), and a single vibrant green accent (#1a8917) reserved for calls-to-action and key interactive moments. The typography system relies on two distinct font families: Sohne for headlines and UI labels (geometric, modern, precise), and a system-stack serif-influenced body font for article content (readable, timeless, approachable). Voice: measured, intelligent, never condescending. Example: "Read the story that changed how we think about AI—no paywall, just ideas."

Colors

Medium's color philosophy is rooted in editorial restraint. The primary surface is pure white (#ffffff), with a subtle secondary tier at #f2f2f2 for containers and dividers. Text is a warm charcoal (#242424) for maximum readability at all sizes; secondary text drops to #6b6b6b for metadata and supporting copy. The primary accent is a saturated, forest green (#1a8917), used exclusively on the most important CTAs (Sign Up button, Follow button) and interactive states. This green is never used for body text or backgrounds—it is reserved as a signal of action. A secondary accent, a bright blue (#437aff), appears in status badges and utility contexts (e.g., "In Review" states). Error states use a muted red (#c94a4a) on light backgrounds. The surface stack is minimal: surface (#ffffff), surface-

Typography

The type system is a two-track hierarchy: Sohne (sans-serif, geometric) for UI and headlines, and medium-content-sans-serif-font (a system stack including -apple-system, BlinkMacSystemFont, Segoe UI, and fallbacks) for body content. Headlines use Sohne at weights 600–700 with tight negative letter-spacing (-0.011em to -0.014em) to create visual impact and hierarchy. Display text (60px, 700 weight, -0.04em letter-spacing) is reserved for hero moments; headline-lg (42px, 700 weight) anchors article titles; headline-md (32px, 600 weight) breaks up long-form sections. Body text is set in the system stack at 16–18px with generous line-height (24–28px) and minimal letter-spacing (0 to -0.004em) for comfortable reading. Labels and UI text use Sohne at 13–14px, 400 weight, with 0.01em letter-spaci

Layout

Medium uses a fluid, centered layout with a max-width of 1192px (container-max-width: 1192px). The grid is 12 columns on desktop, collapsing to 4 columns on tablet and 1 column on mobile. Horizontal padding (gutter) is 24px on desktop, 16px on tablet, and 12px on mobile. Vertical rhythm is built on an 8px unit: section spacing uses lg (40px) for major breaks, md (24px) for subsection gaps, and sm (12px) for component-level spacing. The article content area is narrower—approximately 680px—to optimize line length for readability (55–75 characters per line). Whitespace is generous and intentional: never crowd elements. Use md (24px) between a headline and its supporting text, lg (40px) between major content sections. Margins are symmetric and predictable. The spacing scale is: xs (4px, for mi

Elevation & Depth

Medium eschews dramatic shadows in favor of subtle, flat-plane elevation. Depth is conveyed through color shifts (lighter surfaces for elevated elements) and minimal shadows. The elevation scale is: sm (0 1px 4px rgba(0, 0, 0, 0.05)) for cards and small containers—barely perceptible, used to separate content from the background; md (0 4px 12px rgba(0, 0, 0, 0.08)) for modals and dropdowns; lg (0 16px 40px rgba(0, 0, 0, 0.12)) reserved for full-screen overlays or critical moments. Borders are preferred over shadows for defining edges: use inset 0 0 0 1px rgba(0, 0, 0, 0.05) on cards and input f

Shapes

Medium's shape philosophy is "Architectural Clarity"—rounded corners are used sparingly and purposefully, never decoratively. Buttons use full-radius (border-radius: 99em) to create a pill shape, signaling interactivity and approachability. Cards and containers use a subtle 8px radius (border-radius: 8px) to soften hard edges without drawing attention. Input fields also use 8px. Modals and popovers use 12px (border-radius: 12px) for a slightly more prominent presence. Badges and tags use full-radius (99em) to emphasize their compact, self-contained nature. The rationale: sharp corners (0px) fe

Components

Action Elements Buttons are the primary interactive element. The primary button (Sign Up, Follow) uses background: #1a8917, color: #ffffff, border-radius: 99em, padding: 5px 12px, height: 32px, font-size: 13px, font-weight: 400. On hover, the background shifts to #156d12 (darker green, +0.05 opacity increase). On active/pressed, maintain the hover state. Disabled buttons reduce opacity to 0.3 and set cursor: not-allowed. The secondary button (Sign In) uses background: #242424, color: #000000, same radius and padding, with hover state background: #000000, color: #ffffff. Ghost buttons (outline-only) use background: transparent, border: 1px solid #f2f2f2, color: #242424, and on hover, background: #f2f2f2. All button text is center-aligned and uses letter-spacing: 0.01em for UI clarity.

Do's and Don'ts

**Do**

• Do use the green accent (#1a8917) exclusively on primary CTAs and interactive states—never on backgrounds or body text.
• Do maintain 24px gutter spacing on desktop and 16px on tablet; never compress below 12px.
• Do use Sohne for all headlines and UI labels; reserve the system stack for body content only.
• Do apply subtle shadows (0 1px 4px rgba(0, 0, 0, 0.05)) to cards; never use dramatic drop-shadows.
• Do use full-radius (99em) on buttons and badges; use 8px on cards and inputs.
• Do set line-height to 24px or greater for body text; never use line-height < 1.5.
• Do test all color combinations for WCAG AA contrast (4.5:1 for text, 3:1 for UI components).

**Don't**

• Don't use the green accent on non-interactive elements or as a background color.
• Don't mix Sohne and serif fonts in the same headline; pick one and commit.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full).
• Don't apply shadows to text or small UI elements; keep the flat aesthetic.
• Don't reduce padding below 12px on buttons or cards; whitespace is a feature, not a bug.
• Don't use more than two accent colors in a single view; restraint is the brand.
• Don't set letter-spacing below -0.04em or above 0.1em; maintain readability.