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
Color Palette (11)
Typography (8)
Components (5)
Border Radius
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.
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:
Frequently Asked Questions
Q. What are The Verge's brand colors?
The The Verge palette uses 11 colors, led by jelly-mint (#3cffd0), verge-ultraviolet (#5200ff), console-mint (#309875), deep-link-blue (#3860be), focus-cyan (#1eaedb). The primary brand color is jelly-mint (#3cffd0).
Q. What fonts does the The Verge design system use?
Display type is set in Manuka at 107px / weight 900, while body and UI text uses PolySans Mono at 11px / weight 500.
Q. What kind of website is The Verge?
The Verge is a Media & Consumer Tech brand. Its design system documents 11 colors, 8 type styles and a 8-step border-radius scale.
Q. What border radius values does The Verge use?
The radius scale runs from 2 (2px) to 30 (30px): 2 (2px), 3 (3px), 4 (4px), 20 (20px), 24 (24px), 30 (30px).
Q. Where can I see the The Verge design system?
This page shows The Verge's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.