---
name: Theverge
description: "The Verge's design is a benchmark for modern editorial sites, balancing bold visual identity with excellent readability and usability."
version: alpha

colors:
  background: "#131313"
  primary: "#ffffff"
  secondary: "#949494"
  tertiary: "#3cffd0"
  neutral: "#949494"
  line: "rgba(148, 148, 148, 0.5)"

typography:
  display:
    fontFamily: display-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The Verge is a leading technology publication featuring bold typography, a dark theme, and a high-contrast accent color.

*A premium tech-focused digital magazine with a clean, modern, and slightly playful aesthetic.*

## Colors

A high-contrast dark theme dominated by a primary green accent for focus, with grayscale for supporting text.

- **Background (`#131313`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#949494`)** — uses `ink-soft` token
- **Accent (`#3cffd0`)** — uses `accent` token
- **Muted (`#949494`)** — uses `muted` token
- **Borders (`rgba(148, 148, 148, 0.5)`)** — uses `line` token

## Typography

- **Display:** display-serif
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

Main content area with a right-hand sidebar for latest stories and embedded content.

*Rhythm:* Standard 4px base with generous vertical spacing for readability.

## Elevation & Depth

- 0px 2px 2px 0px rgba(0, 0, 0, 0.2)
- Borders: Subtle 1px borders in muted gray or black for separation.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with a bright accent background and uppercase text.
- **card:** Content blocks with subtle borders and clear typography hierarchy.
- **chip:** Small tags or labels with uppercase text, often using accent or muted colors.
- **input:** Search or input fields with subtle borders and dark backgrounds.
- **hero:** Full-width imagery with large, bold headlines overlaid.

## Do's and Don'ts

**Don't:**
- Don't use a light theme — screenshot shows a dark, high-contrast background.
- Don't use thin, light fonts for headlines — screenshot shows bold, heavy display type.
- Don't rely on a single neutral color — screenshot uses a bright green accent.
- Don't use small, tight spacing — screenshot shows generous padding and margins.
- Don't use rounded, bubbly UI elements — screenshot shows sharp corners and pill shapes.
- Don't use low-contrast text — screenshot ensures readability with white on dark backgrounds.

---

## System Prompt (paste into AI agent)

```
The Verge is a premier technology news and culture publication. Its design system is built on a dark, high-contrast palette (#131313 background, #ffffff ink, #3cffd0 accent) with bold display-serif and humanist-sans typography. It emphasizes clean layouts, generous spacing, and a clear content hierarchy. Critical design rules include maintaining high contrast for readability, using bold typography for impact, and incorporating a vibrant accent color for interactive elements. Avoid light themes, thin fonts, and low-contrast text. The system uses a 4px base scale and supports both desktop and mobile viewing.
```