Medium

Medium's design system is a "Masterclass in Reading." It is an elegant, editorial environment that prioritizes the written word through high-quality typograp…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

Design System: Medium

Overview

Medium's design system is a "Masterclass in Reading." It is an elegant, editorial environment that prioritizes the written word through high-quality typography and a monochrome-first aesthetic.

Design Philosophy

Readability above All: Every design choice—from font selection to line length—is optimized for deep, focused reading.
Editorial Sophistication: Uses high-contrast serifs to evoke the feeling of a premium physical magazine or literary journal.
Monochrome Restraint: Primarily uses Black and White to reduce visual noise, with Green as the single point of brand focus.
The Writer as Hero: The UI is a canvas for the writer's ideas, featuring minimal decoration and a focus on clean metadata.

Colors

Medium Green (#15693B): A deep, organic green used for primary actions (Follow, Sign Up) and brand identity. It represents growth and knowledge.
Pure Monochrome: Uses absolute Black (#000000) for text and absolute White (#FFFFFF) for the canvas to ensure maximum contrast.
Subtle Overlays: Uses very light grey overlays for metadata and secondary navigation.

Typography

Noe Display: A high-contrast, elegant serif used for impactful headlines. It provides the "editorial" voice.
Charter: A workhorse serif designed for reading on screens. It is warm, balanced, and reduces eye fatigue.
Inter: A clean, neutral sans-serif used for the "plumbing" of the site (menus, buttons, metadata).

Components

The Article Feed: A minimalist vertical list with large, bold headlines and small, muted metadata.
Subscribe/CTA: Usually a simple, green outlined button or a solid green pill.
Clap Button: A playful, interactive icon that represents social engagement without the weight of a traditional "Like" button.

Visual Effects

Generous Leading: High line-height (1.6x) to create a relaxed, airy reading experience.
Drop Caps: Used occasionally at the start of articles to add a classic editorial flourish.
Smooth Image Loading: Uses a blurred-to-sharp "progressive" image loading effect to maintain the feeling of speed.

Medium

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: Medium

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents