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

# The Verge · Design System

> Bold technology journalism, arranged like a modern magazine

**Theme:** light · **Industry:** media · **Source:** https://www.theverge.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._

The Verge homepage pairs a restrained white editorial canvas with oversized display branding, dense story grids, and vivid purple controls. Serif reading text and compact sans-serif labels give the page a distinctive magazine rhythm.

## North star

Treat the homepage as a print-inspired news magazine: prioritize strong headlines, image-led stories, and precise purple accents over decorative UI.

## Overview

The page is built on a white canvas, with pale gray bands and panels separating the masthead from the long editorial feed. Near-black headlines and serif article text carry most of the visual weight; saturated purple marks active controls, link accents, and fine section rules, while lime appears sparingly on a subscribe control or within promotional artwork. A large, vertical Verge wordmark anchors the lead story, whose photograph is paired with a bold, compact headline. Below, the content shifts into a three-column magazine-like system: feature modules and ranked lists on the left, a narrow stream of updates on the right, and generous blank advertising areas that preserve separation. PolySans handles headlines, navigation, and metadata; fkRomanStandard gives article copy a literary texture. Thin gray dividers, minimal card framing, and restrained spacing keep the dense page legible without making it feel like a generic dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and the dominant background behind navigation and editorial content. |
| Reading Gray | `#4a4a4a` | `--color-reading-gray` | semantic | Muted copy and inactive Following control text. |
| Signal Violet | `#5200ff` | `--color-signal-violet` | accent | Latest and Subscribe controls, linked text accents, and thin editorial section rules. |
| Press Ink | `#131313` | `--color-press-ink` | brand | Headlines, navigation, primary body text, and the high-contrast wordmark. |
| Lime Wash | `#f5fcc7` | `--color-lime-wash` | semantic | Measured only in gradient artwork; use as promotional creative, not a core page background. |
| Divider Gray | `#e9e9e9` | `--color-divider-gray` | neutral | Hairline borders and inactive segmented-control background. |
| Electric Lime | `#d6f31f` | `--color-electric-lime` | accent | Rare button accent and promotional artwork detail; not a dominant homepage color. |
| Masthead Mist | `#f6f6f6` | `--color-masthead-mist` | surface | Pale upper announcement band and occasional light section surface. |
| Caption Gray | `#636363` | `--color-caption-gray` | semantic | Small counts and secondary editorial metadata. |
| Media Gray | `#dbdbdb` | `--color-media-gray` | neutral | Subtle borders around media elements; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Masthead Mist) · `--color-text` → `#131313` (Press Ink) · `--color-text-muted` → `#4a4a4a` (Reading Gray) · `--color-border` → `#e9e9e9` (Divider Gray) · `--color-accent` → `#5200ff` (Signal Violet) · `--color-accent-2` → `#d6f31f` (Electric Lime) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#131313` | `#ffffff` | 18.58:1 | AAA |
| `#131313` | `#f6f6f6` | 17.19:1 | AAA |
| `#4a4a4a` | `#ffffff` | 8.86:1 | AAA |
| `#4a4a4a` | `#f6f6f6` | 8.2:1 | AAA |
| `#5200ff` | `#ffffff` | 7.49:1 | AAA |
| `#5200ff` | `#f6f6f6` | 6.93:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.024), rgba(0, 0, 0, 0) 45%), linear-gradient(118deg, rgba(0, 0, 0, 0.04) 0.5px, rgba(0, 0, 0, 0) 0.5px), linear-gradient(color(srgb 0.959804 0.988235 0.780392), color(srgb 0.959804 0.98823`
- `linear-gradient(105deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0) 55%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| fkRomanStandard | `--font-body` | webfont | 400 | Article body copy and editorial reading text | Source Serif 4 |
| polySans | `--font-display` | webfont | 700, 400, 300 | Headlines, navigation, links, labels, and metadata | Inter |

- **fkRomanStandard:** Regular-weight serif text with compact line height; creates a literary contrast against the sans-serif headlines.
- **polySans:** Headlines are bold and tight; navigation is lighter; small labels use uppercase with wide tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.413, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 900 | 0.8 | 0 | — | manuka | Oversized brand display wordmark beside the lead story. |
| h1 | 34px | 700 | 1 | 0 | — | polySans | Primary lead-story headline. |
| h2 | 31px | 700 | 1.3 | -0.01em | — | polySans | Major editorial section headings and feature titles. |
| h3 | 26px | 700 | 1.1 | 0 | — | polySans | Secondary story headlines within feed modules. |
| h4 | 24px | 300 | 1.1 | 0.01em | — | polySans | Lighter-weight supporting headlines and editorial subheads. |
| body | 16px | 400 | 1.3 | -0.01em | — | fkRomanStandard | Article summaries and readable editorial copy. |
| caption | 11px | 400 | 1.2 | 0.1em | uppercase | polySans | Compact uppercase author, date, and metadata labels. |
| nav | 19px | 300 | 1.2 | 0 | — | polySans | Top-level category navigation links. |
| link | 18px | 700 | 1.2 | 0 | — | polySans | Prominent story links and clickable headlines. |
| eyebrow | 11px | 400 | 1.2 | 0.1em | uppercase | polySans | Small uppercase category and section labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 25, 30, 50 px.
- Section rhythm 40px · element gap 20px · card padding 2px · max content width 1100px.

A centered editorial shell uses a measured maximum width of 1100px. The top area separates a pale announcement band from a compact navigation row; the main feed then spreads across three columns, with a broad lead-story region and narrower update stream. Section headings align to the left and use thin violet rules. Long-form blocks alternate with ranked lists, image-led story grids, and large blank advertising slots. Spacing stays comfortable despite high story density, using clear gaps to distinguish modules rather than rounded cards.

## Shape & elevation

- Radius: button `9999px` · media `3px` · xs `2px` · sm `3px` · pill `9999px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0) 0px -1px 0px 0px inset`
- Shadow `inset-2` (link): `rgb(82, 0, 255) 0px -1px 0px 0px inset`
- Shadow `inset-3` (button, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
- Shadow `lg` (card): `rgb(255, 255, 255) 0px 3px 0px 20px, rgba(0, 0, 0, 0.3) 0px -25px 40px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.2) 0px 2px 2px 0px`
- Shadow `inset-4` (link): `rgb(60, 255, 208) 0px -1px 0px 0px inset`

Most of the interface is flat, with no persistent card shadows. Separate content using thin gray hairlines, white space, and occasional purple rules. Reserve stronger layering for a featured story or embedded media card; keep corners nearly square and avoid a soft, rounded-dashboard appearance.

## Imagery

Use editorial photography as the primary visual material: lead images are large and rectangular, while secondary stories use smaller crops or thumbnails. Images remain natural and largely unembellished, with no consistent color grading. Promotional artwork may introduce bright colors, including lime, but should read as an embedded ad rather than the core palette.

## Components

### Masthead and navigation

Compact horizontal header with black category links, a thin bottom rule, Subscribe and Sign In actions, and utility icons.

### Lead story

Large rectangular editorial photograph paired with an oversized, tight sans-serif headline and compact author/date metadata.

### Latest switcher

Two-part pill control: purple Latest selection with white uppercase text, alongside a light-gray Following state in muted gray.

### Section feed

Editorial blocks begin with a thin violet rule and a left-aligned section title, followed by image-led stories and supporting links.

### Ranked list

Most Popular and Most Discussed lists use numbered pale markers, bold story links, and understated metadata.

### Update stream

Narrow right-hand column of timestamped posts, link-heavy serif copy, small author markers, and occasional embedded media.

### Measured component styles

- **Primary button** (“SUBSCRIBE”): background #5200ff · text #ffffff · radius 2px · padding 4px 5px 5px 5px · 400 11px polySansMono · uppercase · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px inset
- **Secondary button** (“FOLLOWING”): background #e9e9e9 · text #4a4a4a · radius 24px · padding 10px 24px · 600 12px polySansMono · uppercase
- **Link** (“86”): transparent background · text #636363 · radius 0px · padding 0px · 400 11px polySans · uppercase
- **Card** (“Most Popular 1 A college in Illinois tri”): transparent background · text #131313 · border 3px solid #5200ff · radius 0px · padding 8px 0px 0px 0px · 400 16px ui-sans-serif
- **Navigation item** (“Tech Reviews Science Entertainment AI Po”): transparent background · text #131313 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Keep the page canvas white and the upper band pale gray.
- Use violet for active controls, link accents, and section rules.
- Pair bold PolySans headlines with readable serif story copy.
- Let editorial photographs lead major story modules.
- Use thin dividers and whitespace instead of enclosing every story in a card.
- Keep metadata small, uppercase, and visually subordinate.

## Don't

- Do not turn the layout into a rounded-card dashboard.
- Do not use lime as a large page background.
- Do not apply heavy shadows to ordinary story modules.
- Do not replace the editorial hierarchy with uniform tiles.
- Do not use colored gradients as the default page treatment.
- Do not make metadata compete with headlines.

## Agent prompt

Build a new editorial page in The Verge's visual style. Use Gallery White (#ffffff) as the main canvas, with Masthead Mist (#f6f6f6) only for a quiet upper band. Set headlines and navigation in a bold, clean sans-serif close to PolySans, and use a literary serif close to fkRomanStandard for article copy. Use Press Ink (#131313) for headlines and primary text; reserve Signal Violet (#5200ff) for active controls, link accents, and thin section rules. Organize content in a centered magazine grid with a dominant image-led lead story, smaller supporting stories, ranked lists, and a narrow update column. Keep borders hairline-thin, cards mostly flat, and spacing generous enough to separate dense modules. Treat Electric Lime (#d6f31f) as a rare accent, not a background.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width pale gray band above the navigation, visually quiet and mostly empty. | top-of-page breathing room | Masthead Mist background, subtle lower divider |
| 2 | navigation | Horizontal masthead with logo, category links, utility controls, and a thin bottom rule. | category navigation, subscribe and sign-in actions | near-black links, violet subscribe button, hairline divider |
| 3 | content-feed | Three-column editorial feed with lead story, section modules, ranked lists, and a narrow right update stream. | latest/following switcher, ranked stories, continuous story browsing | large lead image, violet section rules, small metadata, flat story modules, embedded media |

## Source CSS custom properties (selected)

```css
--font-fkroman: 'fkRomanStandard', 'fkRomanStandard Fallback', Georgia, serif;
--font-manuka: 'manuka', 'manuka Fallback', Impact, Helvetica, sans-serif;
--font-polysans: 'polySans', 'polySans Fallback', Helvetica, Arial, sans-serif;
--font-polysans-mono: 'polySansMono', 'polySansMono Fallback', Courier New, Courier, monospace;
```

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