Medium — Brand Design System Deep Dive

1. Brand Overview

Medium’s design language is exactly what you’d expect from a platform built for words: stripped down, high contrast, and typographically confident. The moment you land on medium.com, you’re greeted by generous white space, large type, and an almost monochrome palette. It’s not trying to dazzle you with gradients or complex UI chrome. This is a reading environment first, brand experience second — but the brand’s presence is still felt in every pixel.

Medium’s philosophy here is restraint. They lean heavily into typography as the personality driver, using GT Super for drama and Sohne for utility. Colors are functional, not decorative — mostly black, white, and shades of gray, with rare accents like a bold blue (#005fcc) for interactions. This makes content the hero, and UI elements fade into support roles.

You can tell they’ve made deliberate choices to keep visual noise low. The button styles are simple pills with absurdly high border-radius values (we’re talking 1980px), essentially guaranteeing a perfectly rounded pill no matter the text length. Shadows? Only one mild gray shadow exists (rgb(128, 128, 128) 0px 0px 5px 0px), and it’s almost invisible. Borders are thin and functional, often 1px solid with neutral colors like #191919 or #c1c1c1.

This works because Medium isn’t competing on “UI flair” — it’s competing on “legibility and trust.” A clean reading experience signals authority, and the sparse palette makes the brand timeless. No seasonal rebrands, no trend-chasing. This is content-first minimalism.

The audience? Writers, thinkers, and readers who value clarity over decoration. The brand design system is tuned so that typography is always the loudest voice in the room. And they nailed it.

2. Color System

2.1 Primary Colors

Medium’s primary “brand” color is essentially black. You see #191919 (rgb(25, 25, 25)) in the primary button backgrounds and text hover states. This is their action color — not green, not orange, just pure near-black. It’s bold, it’s readable, it’s safe. It’s also a statement: “Our primary action color is the same as our text color.” That’s unusual. Competitors like Substack use orange for CTAs, Ghost uses blue. Medium refuses to add color where function doesn’t demand it.

The one exception is #005fcc (rgb(0, 95, 204)), a saturated blue used for hover/focus states in some interactive contexts. It’s rare — think of it as a subtle accent, not a core brand color.

2.2 Complete Palette

Here’s every color extracted from the production site:

No greens, reds, or yellows in core UI — except one isolated green border (rgb(26, 137, 23)) on a button, likely a special state.

2.3 Color Relationships

Contrast is king here. #191919 on #ffffff is a WCAG AAA-level combination. Even their secondary text (#6b6b6b on #ffffff) is comfortably above AA contrast. There’s no “soft gray on light gray” nonsense — everything is readable. Dark mode isn’t explicitly implemented here, but the palette is minimal enough to invert easily if they wanted to.

2.4 Usage Guide

• Workhorse combo: #191919 text on #ffffff background — use everywhere for maximum legibility.
• Accent usage: Use #005fcc only for interactive hover/focus states. Don’t use it for static text.
• Avoid: Pairing #6b6b6b with #f7f4ed — contrast drops.
• Borders: Keep borders in #191919 or #c1c1c1 for visual consistency.

3. Typography

3.1 Font Families

Three main stacks:

• GT Super — serif, high contrast, used for giant headings. Fallbacks: Georgia, Cambria, Times New Roman, Times. Custom font, not from Google/Adobe.
• Sohne — sans-serif, modern grotesque feel. Fallbacks: Helvetica Neue, Helvetica, Arial.
• medium-content-sans-serif-font — system font stack: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue.

No Google Fonts, no Adobe Fonts. This is a custom + native combo.

3.2 Type Scale

3.3 Hierarchy

The jump from 120px GT Super to 22px Sohne is dramatic — headlines are truly hero elements. Body/link text sits at 16px, which is comfortable for reading. Captions are 13–14px, not too small to lose readability. This scale reinforces the “content is king” philosophy: titles are huge, everything else is secondary.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Every spacing value is a multiple (with some oddball 10px/25px values):

4.2 Layout

Breakpoints: none explicitly extracted. This suggests either fluid layouts or breakpoints hidden in deeper CSS. Given the typography scale and spacing, they probably design for mobile-first and scale up.

5. Visual Elements

Border Radius

Ridiculous pill shapes dominate:

Shadow System

Only one shadow: rgb(128, 128, 128) 0px 0px 5px 0px. Low confidence, barely visible. Mostly flat design.

Borders

Thin, functional:

• 1px solid #191919 — buttons
• 1px solid #1a8917 — green accent button (rare)
• 1px solid #c1c1c1 — textarea
• 0px 0px 1px solid rgba(0, 0, 0, 0.8) — dividers

6. Components

6.1 Buttons

Default Primary:

• Background: #191919
• Text: #ffffff
• Padding: 8px 16px
• Border radius: 1386px (pill)
• Border: 1px solid #191919
• No shadow

Hover:

• Background: #000000

No active/focus extracted, but hover is strong.

6.2 Links

Two variants:

1. Default: rgba(0, 0, 0, 0.8), no underline. Hover: #191919.
2. Default: #242424, no underline. Hover: #191919.

6.3 Forms

Inputs not detailed; only textarea border: 1px solid #c1c1c1.

6.4 Cards

No explicit card data; given the lack of shadows, likely bordered or plain.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-dark-gray: #242424;
  --color-mid-gray: #6b6b6b;
  --color-white: #ffffff;
  --color-near-black: #191919;
  --color-off-white: #f7f4ed;
  --color-rich-black: #060606;
  --color-accent-blue: #005fcc;
  --color-pure-black: #000000;

  /* Typography */
  --font-gt-super: "gt-super", Georgia, Cambria, "Times New Roman", Times;
  --font-sohne: "sohne", "Helvetica Neue", Helvetica, Arial;
  --font-system: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";

  --heading1-size: 7.50rem;
  --heading1-line-height: 0.83;
  --heading1-spacing: -6.6px;
  --heading1-weight: 400;

  --body-size: 1rem;
  --caption-size-sm: 0.81rem;
  --caption-size-md: 0.88rem;

  /* Spacing */
  --space-8: 8px;
  --space-10: 10px;
  --space-24: 24px;
  --space-25: 25px;
  --space-48: 48px;
  --space-75: 75px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-pill-lg: 1386px;
  --radius-pill-xl: 1980px;

  /* Shadows */
  --shadow-soft: rgb(128, 128, 128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Medium Design System Specification

You are a Medium design expert. Build UIs matching their visual language exactly.

## Brand Context
Medium’s design system is content-first, minimal, and typographically driven. It uses a monochrome palette with rare accents, oversized headlines, and pill-shaped buttons. The goal is clarity and legibility, not decorative UI.

## Color Palette
- Dark Gray: #242424 — Primary text, dark UI elements
- Mid Gray: #6b6b6b — Secondary text, captions
- White: #ffffff — Page background, text on dark buttons
- Near Black: #191919 — Primary buttons, hover text, borders
- Off-White: #f7f4ed — Alternate background for reading surfaces
- Rich Black: #060606 — Hover background for buttons
- Accent Blue: #005fcc — Hover/focus accent for interactive elements
- Pure Black: #000000 — Hover state for text/buttons

## Typography
- Headings: "gt-super", Georgia, Cambria, "Times New Roman", Times
- UI Sans: "sohne", "Helvetica Neue", Helvetica, Arial
- System Sans: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue"

| Level     | Size        | Weight | Line Height | Use For              |
|-----------|-------------|--------|-------------|----------------------|
| H1        | 120px       | 400    | 0.83        | Page hero titles     |
| H1 Small  | 22px        | 400    | 1.27        | Secondary headings   |
| ButtonLg  | 20px        | 400    | 1.40        | Large CTAs           |
| Body      | 16px        | 400    | —           | Paragraph text       |
| CaptionMd | 14px        | 400    | 1.43        | Captions             |
| CaptionSm | 13px        | 400    | 1.54        | Small labels         |

## Spacing & Grid
Base: 8px grid. Scale: 8px, 10px, 24px, 25px, 48px, 75px.
- Buttons: 8px vertical padding, 16px horizontal.
- Cards: 24px padding.
- Sections: 48px–75px spacing.

## Border Radius
- sm: 2px — badges
- pill-lg: 1386px — buttons
- pill-xl: 1980px — buttons

## Shadows & Depth
- Soft shadow: rgb(128, 128, 128) 0px 0px 5px 0px (rare)
- Mostly flat design — use borders for separation.

## Component Specifications

### Primary Button
Default:
- background: #191919
- color: #ffffff
- padding: 8px 16px
- border-radius: 1386px
- border: 1px solid #191919
Hover:
- background: #000000
Focus:
- outline: none
Disabled:
- opacity: 0.5, cursor: not-allowed

### Link
Default:
- color: rgba(0,0,0,0.8)
- text-decoration: none
Hover:
- color: #191919

### Textarea
- border: 1px solid #c1c1c1
- border-radius: 2px
- padding: 8px

## Layout & Responsive Rules
- Max content width: fluid
- Page padding: 24px mobile / 48px desktop
- Grid gap: multiples of 8px

## Interaction Rules
- Transition: 150ms ease for background color changes
- No animation on text
- Hover states are color changes only

## DO List
- Use only colors from the palette
- Maintain 8px grid
- Use GT Super for large headings
- Keep buttons pill-shaped
- Maintain high contrast

## DON'T List
- Add decorative shadows
- Use rounded corners inconsistently
- Introduce new colors
- Reduce headline size below spec
- Use gradients

## Code Examples

Primary Button (CSS):
```css
.btn-primary {
  background: #191919;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 1386px;
  border: 1px solid #191919;
  font-family: "sohne", "Helvetica Neue", Helvetica, Arial;
  font-size: 14px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #000000; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Card:
```css
.card {
  background: #ffffff;
  padding: 24px;
  border: 1px solid #c1c1c1;
  border-radius: 2px;
}
```

Textarea:
```css
.textarea {
  border: 1px solid #c1c1c1;
  border-radius: 2px;
  padding: 8px;
  font-size: 16px;
}
.textarea:focus { border-color: #191919; outline: none; }
```

9. Summary

TL;DR: Medium’s design system is a masterclass in restraint: monochrome palette, oversized headlines, pill-shaped buttons, and minimal UI chrome. It’s tuned for reading, not for visual spectacle. Every design choice says “content first.”

Brand Keywords:

• content-first-minimalism
• typographic-confidence
• high-contrast-legibility
• functional-monochrome
• pill-radius-obsession