Quick Answer

The Verge is a brand design system known for its distinctive visual language. The design uses signature brand colors as primary color. It is built on a clean dark canvas with strong typographic hierarchy. Full design tokens, color palette, and component library are documented on this page.

The Verge

The Verge's 2024 redesign — near-black canvas (#131313), 107px Manuka display headlines, acid-mint (#3cffd0) and ultraviolet (#5200ff) hazard accents, StoryStream timeline feed with pill-cornered color-block tiles.

Homepage Example

The Verge
TechScienceCulture
Latest
Review: New Tech
Science
Deep Dive
© The Verge

Color Palette (11)

jelly-mint#3cffd0
verge-ultraviolet#5200ff
console-mint#309875
deep-link-blue#3860be
focus-cyan#1eaedb
purple-rule#3d00bf
canvas-black#131313
surface-slate#2d2d2d
hazard-white#ffffff
secondary-text#949494
muted-text#e9e9e9

Typography (8)

hero-wordmark
hero-wordmark107px · weight 900
secondary-display
secondary-display90px · weight 900
tertiary-display
tertiary-display60px · weight 900
large-headline
large-headline34px · weight 700
heading-medium
heading-medium24px · weight 700
body
body16px · weight 500
eyebrow-allcaps
eyebrow-allcaps12px · weight 400
micro-timestamp
micro-timestamp11px · weight 500

Components (5)

button-primary-mint
button-primary-mint
button-secondary-slate
button-secondary-slate
button-outlined-mint
button-outlined-mint
button-outlined-uv
button-outlined-uv
pill-tag-accent
pill-tag-accent

Border Radius

2 (2px)
3 (3px)
4 (4px)
20 (20px)
24 (24px)
30 (30px)
40 (40px)
pill (9999px)

Design Philosophy

Overview

The Verge's 2024 redesign feels like somebody wired a Condé Nast magazine to a chiptune soundboard. The canvas is almost-black (#131313), headlines are built from Manuka at up to 107px, and the whole page is peppered with acid-mint #3cffd0 and ultraviolet #5200ff.

Key Characteristics

  • Near-black editorial canvas (#131313) — no light mode
  • Acid-mint #3cffd0 + ultraviolet #5200ff as hazard-tape accents
  • Massive Manuka display headlines up to 107px
  • Fully saturated color-block story tiles on a dark page
  • Timeline "StoryStream" feed with mono uppercase timestamps

Do's and Don'ts

Use #131313 as the canvas for every view. Use Manuka exclusively at 60px+ for hero headlines. Round everything: 20px for cards, 24px for feature cards. Use PolySans Mono for UPPERCASE labels.

개요

The Verge의 2024년 재설계는 누군가 Condé Nast 매거진을 칩튠 사운드보드에 연결한 것 같은 느낌입니다. 캔버스는 거의 검정색(#131313)이고 헤드라인은 최대 107px의 마누카로 구성되었으며 전체 페이지는 애시드 민트 #3cffd0 및 자외선 #5200ff.

으로 장식되어 있습니다.

주요 특징

  • 검은색에 가까운 편집 캔버스(#131313) — 조명 모드 없음
  • 애시드 민트 #3cffd0 + 자외선 #5200ff 위험 테이프 액센트
  • 최대 107px의 대규모 마누카 디스플레이 헤드라인
  • 어두운 페이지의 채도가 높은 컬러 블록 스토리 타일
  • 모노 대문자 타임스탬프가 포함된 타임라인 "StoryStream" 피드

해야 할 일과 하지 말아야 할 일

#131313을 모든 보기의 캔버스로 사용하세요. 영웅 헤드라인에는 60px 이상에서만 Manuka를 사용하세요. 모든 것을 반올림합니다: 카드의 경우 20px, 기능 카드의 경우 24px. 대문자 라벨에는 PolySans Mono를 사용하세요.

概要

The Verge の 2024 年の再デザインは、誰かが Condé Nast 誌をチップチューン サウンドボードに配線したような印象を受けます。キャンバスはほぼ黒 (#131313) で、見出しは最大 107 ピクセルのマヌカで作成され、ページ全体にはアシッドミント #3cffd0 と紫外線 #5200ff が散りばめられています。

主な特徴

  • ほぼ黒の編集キャンバス (#131313) — ライト モードなし
  • アシッドミント__HEXCODE_5___ + 紫外線__HEXCODE_6___をハザードテープのアクセントとして
  • 最大 107 ピクセルの大規模なマヌカ表示見出し
  • 暗いページ上の完全に飽和したカラーブロックのストーリー タイル
  • 単大文字のタイムスタンプを含むタイムライン「StoryStream」フィード

推奨事項と禁止事項

_#131313 をすべてのビューのキャンバスとして使用します。ヒーローの見出しには 60px 以上でのみ Manuka を使用してください。すべてを丸めます: カードの場合は 20 ピクセル、フィーチャー カードの場合は 24 ピクセル。大文字のラベルには PolySans Mono を使用してください。

Design Insights

Practical Takeaways for Designers

Studying Theverge's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Theverge applies its tokens at theverge.com.

Practical Takeaways for Designers

Studying Theverge's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Theverge applies its tokens at theverge.com.

Practical Takeaways for Designers

Studying Theverge's system reveals several repeatable patterns: the use of a single dominant brand color rather than a multi-color palette (reducing decision fatigue), consistent border radius values across interactive elements (creating cohesive visual rhythm), and the deliberate spacing between components (improving scanability). These are not accidental — they are the result of a disciplined design system that prioritizes user experience over visual novelty. Designers building their own systems would benefit from studying how Theverge applies its tokens at theverge.com.

Related Design Systems

Explore similar design languages from the same category:

· About · Contact