24 KiB

Raw Blame History

Design System Inspired by The Verge (Light Mode)

1. Visual Theme & Atmosphere

The Verge's light mode maintains the same bold editorial identity but on a clean white canvas (#ffffff). The headlines remain impactful with heavy display faces, and the acid-mint #3cffd0 and ultraviolet #5200ff accents still function as visual hazard tape. Story tiles continue to be saturated color blocks, creating a vibrant contrast against the light background. The mood remains "developer console meets club night meets tech tabloid," but with a brighter, more open feel that enhances readability during daytime use.

The StoryStream timeline remains a key identifier: a vertical feed where every post is a rounded rectangle with saturated color, framed by a thin border, and marked by a mono-uppercase timestamp. The massive wordmark still dominates the masthead, asserting the editorial territory.

Depth is achieved through subtle 1px borders (#131313, #3cffd0, or #5200ff) rather than shadows, maintaining the flat, clean aesthetic while providing clear visual hierarchy.

Key Characteristics:

Clean white editorial canvas (#ffffff) as the default surface
Acid-mint #3cffd0 + ultraviolet #5200ff as hazard-tape accents
Impactful display headlines up to 107px
Rounded pill-card everything: 20/24/30/40px corner radii
Fully saturated color-block story tiles on a light page
Timeline "StoryStream" feed with mono uppercase timestamps
Flat depth — 1px borders in black, mint, purple for visual hierarchy

2. Color Palette & Roles

Primary (Brand Hazards)

Jelly Mint (#3cffd0): The Verge's signature acid-mint accent. Used as CTA button fill, link underlines, active tab borders, and high-attention story-tile backgrounds.
Verge Ultraviolet (#5200ff): The complementary brand hazard. Used for secondary color-block tiles, promotional spans, and outlined buttons.

Secondary & Accent

Console Mint Border (#309875): A darker variant of the jelly mint used on card outlines and button borders.
Deep Link Blue (#3860be): The link hover color — the one moment blue appears on the site.
Focus Cyan (#1eaedb): Reserved for button focus rings. Never shown outside a keyboard-focus state.
Purple Rule (#3d00bf): A darker ultraviolet variant used as the vertical border on StoryStream <li> items.
Dim Gray (#8c8c8c): Active/pressed button background — the "pressed down" state.

Surface & Background

Canvas White (#ffffff): The default light surface for the entire homepage. Clean, bright, and optimized for readability.
Surface Slate (#f2f2f2): Secondary card background, used when a story tile doesn't need to be a saturated color block.
Surface Slate 2 (#e6e6e6): Tertiary background for nested components.
Image Frame (#d4d4d4): The 1px border that wraps inline imagery.
Hazard White (#ffffff): Used as story-tile fill, button border, and primary text.
Absolute Black (#000000): Reserved for text on the mint/yellow/white tiles.

Neutrals & Text

Primary Text (#131313): Headlines and display text on the canvas.
Secondary Text (#6a6a6a): Bylines, timestamps, photo credits.
Muted Text (#8c8c8c): Button text on light slate buttons.
Inverted Text (#ffffff): Used only on dark accent tiles (purple, black) to keep contrast legible.

Semantic & Accent

Focus Ring (#1eaedb): Keyboard focus only.
Overlay Black (rgba(19, 19, 19, 0.1)): Subtle 1px ring used as the quiet shadow alternative on stacked cards.

Gradient System

The Verge uses zero decorative gradients in light mode as well. Color is applied in solid blocks, not as washes, maintaining the hazard-tape visual identity.

3. Typography Rules

Font Family

Anton (Google Fonts) — fallback: Impact, Helvetica. The signature display face for The Verge wordmark and feature headlines. A heavy-weight industrial sans-serif with a condensed stance. Runs at 60–107px on the homepage.
Space Grotesk (Google Fonts) — fallback: Helvetica, Arial. The UI and secondary headline workhorse. Covers weights 300 / 500 / 700.
Space Mono (Google Fonts) — fallback: Courier New, Courier. The monospaced sibling, used exclusively for ALL-CAPS labels: kickers, timestamps, category tags, button labels.
Newsreader (Google Fonts) — fallback: Georgia. A serif used sparingly for specific body/caption treatments.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Hero Wordmark / Display	Anton	104px / 6.5rem	400	0.95	1px	The top-of-page logo and feature headlines
Secondary Display	Anton	72px / 4.5rem	400	0.85	0.5px	Section-level feature headlines
Large Headline	Space Grotesk	34px / 2.13rem	700	1.00	—	Section and module headlines
Heading Wide	Space Grotesk	32px / 2.00rem	700	1.00	-0.3px	Story tile headlines
Heading Medium	Space Grotesk	24px / 1.50rem	700	1.00	—	Compact tile headlines
Light Capitalized Label	Space Grotesk	19px / 1.19rem	300	1.20	1.9px	Thin-weight capitalized eyebrows
All-Caps Label XL	Space Grotesk	18px / 1.13rem	300	1.40	1.8px	UPPERCASE section kickers
Body Relaxed	Space Grotesk	16px / 1.00rem	500	1.60	—	Long-form reading body
Eyebrow All-Caps	Space Grotesk	12px / 0.75rem	400	1.30	1.8px	UPPERCASE kicker above tile headlines
Mono Timestamp	Space Mono	11px / 0.69rem	700	1.20	1.1px	UPPERCASE StoryStream timestamps
Mono Button Label	Space Mono	12px / 0.75rem	700	2.00	1.5px	UPPERCASE button text, very open leading
Serif Body	Newsreader	16px / 1.00rem	400	1.30	-0.16px	Review decks, print-voice excerpts

Principles

Anton is always the hero, never the UI. If you see Anton below 60px you're looking at a bug.
Space Grotesk is the workhorse, Space Mono is its uniformed sibling. Mono is used exclusively for UPPERCASE labels, timestamps, tags, and certain buttons.
Thin-weight (300) capitalized headlines are a signature Verge move. The 19–20px weight-300 with 1.9px tracking creates a "fashion magazine whisper" that contrasts with the large Anton shout above it.
Letter-spacing has two registers: positive (0.72–1.9px) for ALL-CAPS mono and sans labels, negative (-0.16px) for serif appearances.
Newsreader is the editorial exception, not the rule. Reserve it for long-form print-voice moments.
Line heights are tight (0.85–1.30) for every display and label, relaxed (1.60–2.00) only for reading body and mono button labels.

4. Component Stylings

Buttons

Primary — Jelly Mint Pill

Background: #3cffd0 (Jelly Mint)
Text: #000000 (Absolute Black), Space Mono 12px / 700 UPPERCASE
Border: none (pure fill)
Border radius: 24px — fully rounded pill
Padding: 12px 28px
Hover: background shifts to rgba(60, 255, 208, 0.3), adds a 1px #309875 ring
Active: background rgba(140, 140, 140, 0.87), opacity 0.5
Focus: background #1eaedb, white text, 1px solid #0500ff border
Transition: ~180ms ease on background and shadow

Secondary — Dark Pill

Background: #131313 (Primary Text)
Text: #ffffff (Hazard White), Space Mono 12px / 700 UPPERCASE
Border: none
Border radius: 24px
Padding: 12px 28px
Hover: background rgba(19, 19, 19, 0.2), text #131313, 1px #8c8c8c ring
Focus: same cyan focus treatment as primary

Tertiary — Outlined Mint

Background: transparent
Text: #309875 (Console Mint Border), Space Mono 12px / 700 UPPERCASE
Border: 1px solid #309875
Border radius: 40px — larger pill for secondary outline style
Padding: ~12px 24px
Hover: inverts to mint fill, black text
Transition: 150ms ease

Outlined Ultraviolet (Promotional)

Background: transparent
Text: #5200ff (Verge Ultraviolet)
Border: 1px solid #5200ff
Border radius: 30px
Used for "Subscribe" or "Join the Stream" style promotional callouts

Pill Tag (Non-interactive)

Background: #3cffd0 (Jelly Mint)
Text: #000000 (Absolute Black), Space Mono 11px / 700 UPPERCASE
Border radius: 20px (tighter radius than buttons)
Padding: ~6px 14px

Cards & Containers

StoryStream Tile

Background: either #ffffff + 1px rgba(19, 19, 19, 0.1) border, OR a saturated accent fill (mint, purple, yellow, pink, orange, white)
Border radius: 20px (standard) or 24px (feature)
Border: 1px solid rgba(19, 19, 19, 0.1) (on light) or 1px solid #309875 (on mint)
Padding: ~24–32px interior
Hover: no lift, no scale — the headline text color transitions from #131313 to #3860be (deep link blue)
Transition: 150ms ease on color only

Feature Card (Top Story)

Background: #ffffff with 1px hairline border, OR full-bleed color accent
Border radius: 24px
Padding: 32px+
Image inside: clipped to match the outer radius
Hover: text color shift only; the image remains static

StoryStream Rail (Timeline)

A vertical dashed or solid rule (1px #3d00bf or rgba(19, 19, 19, 0.1) on #ffffff) runs along the left edge of each item
Timestamps sit on the left rail in Space Mono 11px / 700 / UPPERCASE / 1.1px tracking
Each entry is a pill-cornered rectangle separated from its neighbors by 12–16px vertical gap

Inputs & Forms

Default: #f2f2f2 (Surface Slate) background, 1px solid rgba(19, 19, 19, 0.15) border, 2px border radius, Space Grotesk 15px text in #131313, placeholder in #8c8c8c.
Focus: border transitions to #3cffd0 (jelly mint) with optional 1px solid #5200ff inner ring on deep focus.
Error: border turns #5200ff (ultraviolet — used as error/alert accent here).
Transition: ~150ms ease on border-color.

Top nav: white background, 1px solid rgba(19, 19, 19, 0.1) border, with the Verge wordmark (Anton) left-aligned, a search icon and a few UPPERCASE mono category links (11px, Space Mono, 1.1px tracking), and a single mint-pill CTA (usually "Subscribe") pinned right.
Wordmark: massive on first scroll — treated as a hero element.
Hover: every link transitions from #131313 to #3860be (deep link blue). No underline — it's a color-only response.
Active section: marked by a 1px mint underline (inset box-shadow 0px -1px 0px 0px inset #3cffd0)
Mobile: the wordmark shrinks, category nav collapses into a hamburger drawer. Inside the drawer, links are mono-uppercase and stack with 16–20px gaps.

Image Treatment

Aspect ratios: 16:9 dominates for hero and feature images, 4:3 for mid-feed, 1:1 for thumbnails and author avatars.
Corners: always rounded to match the parent card — 3px, 4px, or inherit 20px / 24px from the tile.
Frame: 1px #d4d4d4 or rgba(19, 19, 19, 0.08) hairline around photography.
Full-bleed: only within the color-block tiles, where the image runs to the padded edge of the accent fill.
Hover: static — no zoom, no scale, no opacity shift. The headline below is the only interactive response.
Lazy loading: loading="lazy" on everything below the first fold; eager on the masthead hero only.

StoryStream Timeline Item (Distinctive)

Vertical rail line (1px #3d00bf or rgba(19, 19, 19, 0.1) on #ffffff)
Mono timestamp on the left in Space Mono 11px / UPPERCASE
Pill-cornered body card (20px radius) with kicker, headline, and optional deck
Stacked vertically with 12–16px gap, the rail continuing between them
Often interleaved with full-bleed accent tiles that "break" the timeline rhythm for emphasis

5. Layout Principles

Spacing System

Base unit: 8px.
Scale: 1, 2, 4, 5, 6, 8, 9, 10, 12, 14, 15, 16, 20, 24, 25px.
Section padding: 32–72px vertical between major feed sections. StoryStream items themselves are tighter — 12–16px gaps.
Card padding: 20–32px interior. Feature cards expand to 40–48px.
Inline spacing: kickers sit ~6–10px above headlines; headlines sit ~10–14px above decks; timestamps sit ~6–8px below decks.
Micro-scale: The 2/4/5/6/9/10px values are used inside buttons, pills, and tight label clusters, not in the editorial grid.

Grid & Container

Max width: ~1280–1300px.
Column patterns: a 12-column underlying grid that resolves into 3-column hero + 1-column StoryStream rail + feature panels. Color-block tiles frequently span 2–3 columns.
Container padding: 24px mobile / 48px desktop on the outer edges.
Gutters: 16–24px between columns, tighter (8–12px) inside StoryStream items.

Whitespace Philosophy

The Verge treats whitespace as a dramatic reset between loud moments. The light canvas allows for more breathing room, creating a balanced rhythm between content and empty space. The page is airy but still maintains the Verge's characteristic boldness through color and typography.

Border Radius Scale

2px — inputs, small badges (feels like a typewriter tag)
3px — inline images (just enough to soften against the canvas)
4px — nested card images and small button variants
20px — standard pill cards and color-block tiles
24px — feature tile radius and primary button pill
30px — large promotional buttons
40px — outlined CTA pills (the loudest pill in the system)
50% — avatar circles, icon buttons, and certain round badges

6. Depth & Elevation

Level	Treatment	Use
0	No border, no shadow	Default `#ffffff` canvas text
1	`rgba(0,0,0,0) 0px 0px 0px 0px inset` (placeholder)	Reset state for interactive elements
2	`1px solid rgba(19, 19, 19, 0.1)` or `#d4d4d4` hairline	Image frames and quiet card outlines
3	`1px solid #3cffd0` hairline	Active button outlines, focused story tiles
4	`1px solid #5200ff` hairline	Promotional/alternate state outlines
5	`rgba(19, 19, 19, 0.33) 0px 0px 0px 1px`	The single "atmospheric" ring — applied to layered cards
6	`0px -1px 0px 0px inset` (mint/black/white)	Active tab underline — a signature Verge move
7	Saturated accent fill (`#3cffd0`, `#5200ff`, white, yellow, pink)	Story-tile elevation via color, not shadow

The Verge's depth philosophy in light mode remains color-as-elevation. When something needs to stand out, it gets a mint fill or a 1px hazard-color border rather than a shadow. The #ffffff canvas stays clean and flat, with hierarchy carried by color saturation.

Decorative Depth

1px inset underline on active tabs/nav links (mint, black, or white depending on context)
Subtle rgba(19, 19, 19, 0.33) 1px ring on stacked cards — the only effect that faintly resembles a shadow
No gradients, no glows, no atmospheric blurs anywhere. The hazard-tape aesthetic would break if anything faded softly.

7. Do's and Don'ts

Do

Do use #ffffff as the canvas for every view in light mode.
Do use Jelly Mint (#3cffd0) and Verge Ultraviolet (#5200ff) as hazard accents — buttons, borders, active states, and saturated color-block tiles.
Do use Anton exclusively at 60px+ for hero headlines. Treat anything smaller as a bug.
Do round everything: 20px for cards, 24px for feature cards, 30–40px for pill buttons.
Do use Space Mono for UPPERCASE labels, timestamps, kickers, and button text. Lowercase mono doesn't exist here.
Do apply 1.5–1.9px letter-spacing to every ALL-CAPS label — this is a Verge signature.
Do use saturated color-block tiles (mint, purple, yellow, pink, orange, white) to elevate a story — never a drop shadow.
Do use #3860be (deep link blue) as the hover color on every link, regardless of base color.
Do apply the StoryStream timeline rail (1px dashed/solid #3d00bf or rgba(19, 19, 19, 0.1)) on feed views.
Do use thin-weight (300) Space Grotesk at 19–20px with 1.9px tracking for "fashion-whisper" capitalized eyebrows.

Don't

Don't use a dark background in light mode. The white canvas is the product.
Don't add box-shadow for elevation. Use 1px borders or saturated accent fills instead.
Don't use square corners. Every interactive and content container is rounded.
Don't use Anton for UI, buttons, or body copy. It's strictly display.
Don't use lowercase mono. Space Mono is always UPPERCASE.
Don't let mint and ultraviolet appear as background washes — they're hazard accents, not canvas tints.
Don't use gradients anywhere. The system is solid color blocks only.
Don't introduce new accent colors outside the declared mint / purple / yellow / pink / orange tile palette.
Don't pair Anton with Newsreader in the same headline cluster — Anton is the only display shout, serif pulls are reserved for body moments.

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Small Mobile	<400px	Single column, Anton hero scales down to ~48–54px, StoryStream rail collapses to inline timestamps
Mobile	400–549px	Single column, color-block tiles stack full-width, nav is a hamburger drawer
Large Mobile	550–767px	Still single column but padding opens up, tile radii stay at 20px
Tablet	768–1023px	2-column StoryStream with feature card spanning, wordmark shrinks ~50%
Small Desktop	1024–1179px	Full 3–4 column editorial grid, mint pill CTA restored to nav
Desktop	1180–1299px	Max padding, Anton wordmark at full hero scale
Large Desktop	≥1300px	Container caps at ~1280–1300px, whitespace expands at the margins, no further scaling

Touch Targets

Primary pill buttons are ~44px minimum height (12px vertical padding + 13px text + 2px border) — meets WCAG AA.
Mono uppercase nav links are smaller (~28–32px tall) — for derivative work, pad to 44px on mobile.
Circle icon buttons are 40–44px circles, touch-friendly.

Collapsing Strategy

Nav: wordmark scales from hero (Anton 60–104px) to ~24–32px on mobile. Category links collapse to a hamburger drawer below 900px.
Grid: 4-col → 3-col → 2-col → 1-col. Feature cards that span 2 columns on desktop reflow to full-width single-column on mobile.
Spacing: section padding tightens from 72px → 56px → 48px. Tile interior padding tightens from 32px → 20px.
Type: Anton hero scales from 104px to ~48–54px on mobile. Space Grotesk headlines scale from 34px → 24px. Mono labels stay pinned at 11–12px (they don't shrink further or they become unreadable).
Color tiles: accent story blocks never lose saturation on mobile — they just reflow to full width.

Image Behavior

Responsive raster via srcset, aspect ratios preserved.
No art-direction swaps — same crop scales across all viewports.
loading="lazy" on everything below the fold, eager on the masthead hero.
Images inside color-block tiles inherit the tile's inner radius (4px or 20px nested).

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: "Jelly Mint (#3cffd0)"
Background (Canvas): "Canvas White (#ffffff)"
Accent (Secondary Hazard): "Verge Ultraviolet (#5200ff)"
Heading Text: "Primary Text (#131313)"
Body Text: "Primary Text (#131313)" (primary) or "Secondary Text (#6a6a6a)"
Secondary Text / Metadata: "Secondary Text (#6a6a6a)"
Card Border: "rgba(19, 19, 19, 0.1)" hairline on light, "Console Mint Border (#309875)" on mint variants
Link Hover: "Deep Link Blue (#3860be)"

Example Component Prompts

"Create a StoryStream timeline item on a #ffffff canvas: a 20px-radius rectangle with a 1px solid rgba(19, 19, 19, 0.1) border, a Space Mono 11px / 700 / UPPERCASE / 1.1px tracking timestamp on the left rail, a 12px Space Grotesk UPPERCASE kicker in mint (#3cffd0), and a 24px / 700 Space Grotesk headline in black below. No shadow, no lift — hover only shifts the headline color to #3860be."
"Design a primary subscribe button with a Jelly Mint (#3cffd0) fill, black text in Space Mono 12px / 700 / UPPERCASE / 1.5px tracking, 24px border radius, 12px × 28px padding. Hover state shifts to rgba(60, 255, 208, 0.3) background with a 1px #309875 ring, 180ms ease."
"Build a feature hero with a 104px Anton 400 headline in black with 1px letter-spacing and 0.95 line-height, a thin-weight 300 Space Grotesk 19px capitalized kicker above with 1.9px tracking, on a #ffffff canvas with 72px vertical padding."
"Create a color-block accent tile filled with Verge Ultraviolet (#5200ff), 24px border radius, white text, a Space Mono 11px UPPERCASE category label with 1.5px tracking at the top, and a 32px Space Grotesk 700 headline below."
"Design a dark secondary button with a #131313 background, #ffffff Space Mono 12px text, 24px radius pill shape, 12px × 28px padding. Hover matches the primary button — rgba(19, 19, 19, 0.2) bg with black text."

Iteration Guide

When refining existing screens generated with this design system:

Audit the canvas. If you see a dark background anywhere in light mode, flatten it to #ffffff.
Audit corners. Every rectangle should land on 2/3/4/20/24/30/40px or 50%. Square corners break the voice.
Audit shadows. Strip every box-shadow that isn't a 1px inset underline or a 1px hazard-color border. The Verge uses color for elevation, not shadow.
Audit type roles. Anton only ≥60px. Space Mono only UPPERCASE. Space Grotesk 300 at 19–20px should have 1.9px tracking. Newsreader only for body/magazine moments, never UI.
Audit accent usage. Mint and ultraviolet should appear as hazard accents — buttons, 1px borders, active underlines, saturated tile fills. If they're appearing as background washes or gradient fades, correct to solid blocks.
Audit labels. Every kicker, timestamp, category tag, and button label should be ALL CAPS with 1.1–1.9px letter-spacing. Missing tracking = missing voice.
Audit link hover. Every link, regardless of its base color, should hover to #3860be deep link blue with no underline. Any other hover color is drift.

24 KiB Raw Blame History Unescape Escape