# The Verge — Design System
> The Verge is a high-profile technology journalism website that explores how technology shapes the future and makes us feel.
- **Canonical:** https://uiuxskills.com/library/the-verge
- **Source:** https://www.theverge.com
- **Category:** Media & Consumer Tech
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:35.081Z

---

---
version: alpha
name: The Verge
tagline: The Verge is about technology and how it makes us feel.
description: >-
  The Verge is a bold, high-contrast digital publication covering technology, science, art, and
  culture.
tone: modern, high-energy, authoritative, brutalist
color-scheme: dark
colors:
  primary: "#3CFFD0"
  secondary: "#216655"
  accent: "#5200FF"
  background: "#131313"
  surface: "#1A1A1A"
  surface-container: "#242424"
  on-primary: "#131313"
  on-surface: "#FFFFFF"
  on-surface-variant: "#A0A0A0"
  outline: "#2C2C2C"
  error: "#FF3D00"
typography:
  display-lg:
    fontFamily: Georgia, serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.1"
  display-md:
    fontFamily: Georgia, serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.2"
  headline-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
  headline-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 20px
    fontWeight: 700
    lineHeight: "1.3"
  body-lg:
    fontFamily: Georgia, serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.6"
  body-md:
    fontFamily: Arial, sans-serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: Arial, sans-serif
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Arial, sans-serif
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0.1em
rounded:
  xs: 1px
  sm: 3px
  md: 6px
  lg: 12px
  xl: 18px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    width: auto
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    width: auto
    borderColor: "{colors.primary}"
  button-secondary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
    borderColor: "{colors.primary}"
  badge-latest:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    width: auto
  badge-following:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    width: auto
  card:
    backgroundColor: "{colors.background}"
    width: 100%
    borderColor: "{colors.outline}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  link:
    textColor: "{colors.accent}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    width: 100%
    borderColor: "{colors.primary}"
  alert-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface}"
    width: 100%
motion:
  duration-short: 200ms
  duration-medium: 400ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: none
  md: none
  lg: none
---

## Overview

The Verge features a striking, high-contrast, brutalist digital aesthetic. It pairs a deep dark-mode canvas with vibrant neon accents, specifically mint green and electric blurple, and sharp, geometric layouts. This combination evokes a cutting-edge, tech-forward, and highly energetic editorial tone that feels both authoritative and raw.

## Colors

The color strategy relies on a high-contrast dark-mode canvas accented by highly saturated neon colors to draw immediate visual interest to interactive elements and category highlights.

*   **Primary (`{colors.primary}`) (#3CFFD0):** Vibrant mint green used for active states, primary badges, and key interactive highlights.
*   **Secondary (`{colors.secondary}`) (#216655):** Darker mint/teal used for subtle accents, borders, or hover states.
*   **Accent (`{colors.accent}`) (#5200FF):** Electric violet/blurple used for inline links and specific category highlights.
*   **Background (`{colors.background}`) (#131313):** Deep dark gray/black background forming the primary canvas.
*   **Surface (inferred) (`{colors.surface}`) (#1A1A1A):** Slightly lighter dark gray for containers and input fields.
*   **Surface-Container (inferred) (`{colors.surface-container}`) (#242424):** Container background for secondary elements and inactive badges.
*   **On-Primary (inferred) (`{colors.on-primary}`) (#131313):** Dark text used on top of the vibrant primary mint green for optimal contrast.
*   **On-Surface (`{colors.on-surface}`) (#FFFFFF):** Pure white text for high-contrast readability on dark surfaces.
*   **On-Surface-Variant (inferred) (`{colors.on-surface-variant}`) (#A0A0A0):** Muted gray for secondary text, metadata, and inactive states.
*   **Outline (inferred) (`{colors.outline}`) (#2C2C2C):** Dark border and divider color to separate content streams.
*   **Error (inferred) (`{colors.error}`) (#FF3D00):** Vibrant red used for error states and critical alerts.

## Typography

The typography strategy pairs classic, authoritative editorial serif typefaces for long-form reading with clean, geometric sans-serif typefaces for UI controls, metadata, and high-density feeds.

*   **Display-Lg (inferred) (`{typography.display-lg}`):** Bold Georgia serif used exclusively for major feature headlines on the homepage to establish strong editorial hierarchy.
*   **Display-Md (inferred) (`{typography.display-md}`):** Bold Georgia serif used for secondary feature headlines and section headers.
*   **Headline-Lg (`{typography.headline-lg}`):** Bold Helvetica/Arial sans-serif used as the standard headline size for article cards and feed items.
*   **Headline-Md (inferred) (`{typography.headline-md}`):** Bold Helvetica/Arial sans-serif used for smaller card titles and sidebar headings.
*   **Body-Lg (`{typography.body-lg}`):** Regular Georgia serif optimized for comfortable, long-form reading of article paragraphs.
*   **Body-Md (`{typography.body-md}`):** Regular Arial sans-serif used for feed descriptions, summaries, and secondary text.
*   **Label-Md (inferred) (`{typography.label-md}`):** Bold, uppercase Arial sans-serif with slight letter-spacing, used for interactive labels, buttons, and navigation items.
*   **Label-Sm (inferred) (`{typography.label-sm}`):** Bold, uppercase Arial sans-serif with wider letter-spacing, used for metadata, timestamps, and small badge text.

## Layout

The layout relies on a dense, multi-column grid with sharp vertical dividers. Content is structured with clear visual hierarchy, utilizing tight spacing and prominent borders to separate editorial streams, featured stories, and feed items. 

*   **Grid & Spacing:** Built on a strict geometric scale using `{spacing.sm}` (8px) and `{spacing.md}` (16px) for gutters and tight internal padding, scaling up to `{spacing.xl}` (32px) and `{spacing.2xl}` (48px) for major section blocks.
*   **Section Order:** The standard page flows from `nav` to `hero`, followed by `features`, and terminates at the `footer`.
*   **Hero Pattern:** An asymmetric layout featuring a massive, bold headline on the left, a large featured image in the center, and a dense, real-time feed on the right.
*   **Responsive Behavior:** A mobile-first approach where the multi-column grid collapses into a single vertical stream, and the navigation menu condenses into a hamburger drawer.

## Elevation & Depth

Flat brutalist aesthetic with no soft drop shadows across all levels. Depth is conveyed entirely through flat color contrast and sharp borders rather than soft drop shadows. 

*   **elevation.sm:** Set to `none`. Structural containers sit flat on the canvas.
*   **elevation.md:** Set to `none`. Dropdowns and popovers are defined by high-contrast outlines using `{colors.outline}`.
*   **elevation.lg:** Set to `none`. Modals and overlay drawers sit on the same visual plane, separated by solid background fills like `{colors.surface}` and borders.

## Shapes

The brand utilizes extremely sharp corners for buttons and structural containers, reinforcing its technical, raw aesthetic. 

Standard structural elements and buttons use `{rounded.xs}` (1px) or `{rounded.sm}` (3px) to maintain a rigid, blocky appearance. Fully rounded pill shapes using `{rounded.full}` are reserved strictly for interactive badges, status indicators, and filters (such as the "LATEST" toggle) to make them instantly recognizable as interactive UI controls.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### button-primary
*   **Anatomy:** Flat, sharp-cornered container using `{rounded.xs}` with `{colors.primary}` background and `{colors.on-primary}` text. Uses `{typography.label-md}` in uppercase.
*   **States:** On hover (`button-primary-hover`), the background transitions to `{colors.on-surface}` and text transitions to `{colors.background}`.
*   **Use When:** High-priority actions such as "Subscribe" or primary form submissions.

### button-secondary
*   **Anatomy:** Transparent background with a solid border using `{colors.primary}` and text using `{colors.primary}`. Uses `{typography.label-md}` in uppercase.
*   **States:** On hover (`button-secondary-hover`), the background fills with `{colors.secondary}` and text transitions to `{colors.on-surface}`.
*   **Use When:** Secondary actions such as "Sign In" or "See All Latest".

### badge-latest
*   **Anatomy:** Pill-shaped container using `{rounded.full}` with `{colors.primary}` background and `{colors.background}` text. Uses `{typography.label-sm}`.
*   **States:** Static indicator or toggle active state.
*   **Use When:** Highlighting real-time, newly published content or active filter states.

### badge-following
*   **Anatomy:** Pill-shaped container using `{rounded.full}` with `{colors.surface-container}` background and `{colors.on-surface-variant}` text. Uses `{typography.label-sm}`.
*   **States:** Static indicator or toggle inactive state.
*   **Use When:** Marking content streams that are followed or secondary inactive filter states.

### card
*   **Anatomy:** Full-width container using `{colors.background}` and a solid 1px border using `{colors.outline}`.
*   **States:** Static container; nested links handle hover transitions.
*   **Use When:** Grouping article previews, feed items, or editorial features in the main grid.

### divider
*   **Anatomy:** A solid line with a height of 1px using `{colors.outline}`.
*   **States:** Static.
*   **Use When:** Separating vertical content streams, feed items, or distinct sections in a multi-column layout.

### link
*   **Anatomy:** Inline text styled with `{colors.accent}` and `{typography.body-md}`.
*   **States:** On hover (`link-hover`), the text color transitions to `{colors.primary}`.
*   **Use When:** Inline hyperlinks within editorial copy or secondary navigation paths.

### input-field
*   **Anatomy:** Container using `{colors.surface}` background, `{colors.on-surface}` text, and a solid border using `{colors.outline}`.
*   **States:** On focus (`input-field-focus`), the border transitions to `{colors.primary}`.
*   **Use When:** Search inputs, newsletter sign-ups, and text entry fields.

### alert-error
*   **Anatomy:** Full-width banner using `{colors.error}` background and `{colors.on-surface}` text.
*   **States:** Static alert.
*   **Use When:** Displaying critical system errors or failed form submissions.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for active states, primary badges, and key interactive highlights. | Do not use `{colors.primary}` for body text, as it is reserved for high-priority accents. |
| Apply `{colors.background}` as the primary canvas color to maintain the signature dark-mode editorial feel. | Never use low-contrast text colors on `{colors.background}`; ensure all text meets high readability standards. |
| Use `{rounded.xs}` or `{rounded.sm}` for standard buttons and structural containers to preserve the sharp, brutalist look. | Never apply `{rounded.full}` to standard buttons; keep them sharp with `{rounded.xs}`. |
| Set inline links to `{colors.accent}` to ensure they stand out clearly within body copy. | Do not style inline links with `{colors.primary}` unless they are in a hovered state (`link-hover`). |
| Separate content streams using a 1px divider styled with `{colors.outline}`. | Do not use soft, blurry drop shadows like `elevation.sm` or `elevation.md` to define boundaries. |
| Use `{typography.display-lg}` exclusively for major feature headlines to establish strong editorial hierarchy. | Do not mix serif and sans-serif fonts arbitrarily; keep `{typography.body-lg}` for long-form body text. |
| Maintain consistent breathing room between content blocks using `{spacing.md}` and `{spacing.lg}`. | Do not crowd elements or drop spacing below `{spacing.xs}` for primary editorial layouts. |
| Use `{colors.surface-container}` with `{rounded.full}` for secondary interactive badges like `badge-following`. | Do not use `{colors.surface}` without high-contrast text, ensuring `{colors.on-surface}` is applied. |

## Content Style

*   **CTA Style:** Imperative, direct, and action-oriented. Button labels are kept short, often utilizing single-word commands or brief phrases such as "Subscribe", "Sign In", or "See All Latest" to drive immediate user action.
*   **Heading Tone:** Provocative, narrative-driven, and direct. Headlines focus on the human impact of technology, utilizing strong, declarative statements that challenge or intrigue the reader rather than simple descriptive titles.
*   **Copy Density:** High density with a structured rhythm. The layout balances short, highly scannable news summaries in real-time feeds with deeply structured, immersive long-form editorial paragraphs that prioritize readability.

## Imagery & Icons

The visual system combines high-quality editorial photography with bold, highly saturated colors and occasional illustrative or high-contrast graphic elements. Photographic assets are often treated with dramatic lighting or vibrant overlays to align with the high-energy, tech-forward aesthetic. Icons are clean, geometric, and functional, avoiding decorative flourishes to maintain the raw, brutalist design language.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for The Verge, a bold, high-contrast brutalist digital publication with a modern, high-energy editorial tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.headline-lg}`, `{spacing.md}` — never hardcode hex values, px sizes, or font names.
2. Respect all components defined under `components:` exactly. Do not invent variants, states, or radius combinations the spec doesn't list (e.g. a rounded-primary-button does not exist).
3. Follow the Shapes narrative strictly: `{rounded.xs}` or `{rounded.sm}` for buttons and structural containers; `{rounded.full}` only for badges and status indicators.
4. Elevation is always `none`. Convey depth through flat color contrast (`{colors.surface}`, `{colors.surface-container}`) and 1px borders using `{colors.outline}` — never soft shadows.
5. When a user request conflicts with the Do's and Don'ts table, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for every color, type style, spacing value, and radius.
- Render all defined interactive states: `button-primary-hover`, `button-secondary-hover`, `link-hover`, `input-field-focus`.
- Apply `{motion.duration-short}` and `{motion.easing-standard}` to all hover and focus transitions.
- Use `{typography.label-md}` in uppercase for all button labels and navigation items.
- Maintain body text in `{typography.body-lg}` (serif) for long-form copy; `{typography.body-md}` (sans-serif) for feed summaries and metadata.
- Keep minimum spacing at `{spacing.xs}` for primary editorial layouts.

**Must NOT:**
- Invent colors, font sizes, radius values, or spacing values outside the spec.
- Apply `{colors.primary}` to body text or inline links in their default state.
- Apply `{rounded.full}` to buttons or structural containers.
- Use `{colors.accent}` for anything other than inline links in their default state.
- Add emoji, decorative flourishes, or marketing filler copy.
- Rewrite, replace, or invent page copy, headlines, labels, or navigation items.
- Alter page section order (nav → hero → features → footer) as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative theme file exists, it takes precedence.
- For ambiguous backgrounds, default to `{colors.surface}` for containers and `{colors.background}` for the primary canvas.
- For unspecified breakpoints, use mobile-first with the multi-column grid collapsing to a single vertical stream at 768px, per the Layout section.
- Prefer composing existing components over introducing new tokens or variants.