Brand-adapted extraction

The Verge design system.

A dark editorial machine: mint hazard lines, ultraviolet rails, brutal condensed headlines, compact metadata and story modules built from grids, slashes and timelines.

THE
VERGE

The future of tech is loud

Feature tile / Full-bleed accent block / Mono metadata

11:42 AM

AI policy hits another wall

REVIEWS

Gadget culture, framed in neon

SCIENCE

Ranked, clipped, discussed

BrandThe Verge

CategoryTech media

PatternEditorial

Depth10 sections

01 / Colors

Dark canvas with high-voltage mint and ultraviolet. Color appears as solid editorial blocks, not soft gradients.

Canvas black#131313Default homepage surface.

Jelly mint#3cffd0Subscribe, section rules, labels and high-attention tiles.

Ultraviolet#5200ffPromo tiles, outlines and rail accents.

Surface slate#2d2d2dSecondary dark panels.

Hazard white#ffffffPrimary text and spotlight tiles.

Metadata gray#949494Bylines, dates and secondary information.

Hover blue#3860beLink hover color.

Accent yellow#f5d742Saturated story interruption tile.

Accent pink#ff4db8Culture/media feature block.

Accent orange#ff7a1aReview/promo story tile.

02 / Typography

Manuka-like display shouting over PolySans-like editorial UI. Mono uppercase timestamps and labels are essential.

DisplayAa Verge 123Manuka / 90-107px

HeadlineAa Tech culturePolySans / 34px

Story titleThe future of consoles is bleak24px / tight

Serif deckMagazine-style supporting copy.FK Roman fallback

TimestampMAY 9 / 11:42 AMMono uppercase

03 / Buttons

The Verge is link-first, but CTAs use mint pill fills, dark slate pills and outlined hazard treatments.

04 / Cards and surfaces

No soft SaaS cards. The system uses flat story tiles, saturated blocks, 1px borders, timeline rails and editorial image frames.

Dark story tile

Black canvas, white border, mint timestamp.

Mint feature tile

Saturated accent block with black text.

Ultraviolet promo

High-voltage secondary brand color.

Slate panel

Quiet dark secondary surface.

Yellow interruption

Color block that breaks the feed rhythm.

Culture pink tile

Loud media surface.

Section rail

05 / Brand-specific product patterns

The Verge modules are editorial: feature story, StoryStream timeline, ranked lists, Latest rails, podcast cards and newsletter promos.

Angular feature story

Big condensed title over dark surface with mint label.

11:42 AM / New AI rule proposed12:05 PM / Hardware prices jump1:18 PM / Console future debated

StoryStream timeline

Dotted ultraviolet rail with timestamped editorial entries.

Most popular hardware storyOpenAI trial updateReview score controversy

Ranked list module

Numbered square markers and compact story copy.

Latest from Tech

Latest from AI

Latest from Policy

Latest from Reviews

Latest rail

Four-up media grid with image frames and tight titles.

Podcast/media module

Decoder-style dark promo with ultraviolet/mint cues.

Newsletter promo

Mint signup block with black type and mono label.

06 / Forms

Form fields stay dark, tight and editorial: square-ish inputs, white/gray borders, mint focus and ultraviolet error.

Search storiesEmailSectionTip

Subscribe to newsletter Breaking news alertsError

07 / Spacing

The rhythm is paced, not airy: tight StoryStream gaps, 24-32px cards, 64-96px major editorial sections.

4px

8px

16px

24px

32px

64px

96px

Section top rule

16px label gap, 24px card gutter, 96px editorial reset.

Story tile padding 24-32px

Timeline item gap 12-16px

08 / Radius

Despite the harsh editorial mood, story modules use rounded pill corners. Forms and image frames stay sharper.

2px
input

4px
image

20px
tile

24px
feature

40px
outline

999px
pill

09 / Elevation

Depth is mostly flat. Borders, rules and color blocks replace soft shadows.

1px border

Mint rule

Accent border

Purple inset

10 / Extracted component tokens

Copyable implementation tokens and notes for another frontend or AI agent.

--verge-mint: #3cffd0;
--verge-purple: #5200ff;
--verge-purple-rule: #3d00bf;
--verge-hover-blue: #3860be;
--verge-focus-cyan: #1eaedb;
--verge-canvas: #131313;
--verge-surface: #2d2d2d;
--verge-frame: #313131;
--verge-text: #ffffff;
--verge-muted: #949494;
--verge-soft: #e9e9e9;
--verge-yellow: #f5d742;
--verge-pink: #ff4db8;
--verge-orange: #ff7a1a;
--verge-display: Impact, "Arial Narrow", sans-serif;
--verge-sans: PolySans, Inter, Helvetica, Arial, sans-serif;
--verge-mono: "Courier New", monospace;
--verge-serif: Georgia, serif;
--radius-story: 20px;
--radius-feature: 24px;
--radius-outline: 40px;
--section-rule: 3px solid #3cffd0;
--story-border: 1px solid #ffffff;
--timeline-rule: 1px dashed #3d00bf;

Implementation notes
Keep the canvas dark. Avoid gradients and shadows. Structure pages with top mint rules, slash separators, compact uppercase metadata, hard image frames, StoryStream rails and saturated interruption tiles.