---
name: Vercel
description: "This site is a definitive example of modern, developer-focused design, combining stark minimalism with high-contrast UI and precise typography."
version: alpha

colors:
  background: "#ffffff"
  primary: "#171717"
  secondary: "#4d4d4d"
  neutral: "#666666"
  bg-soft: "#fafafa"
  muted-soft: "#8f8f8f"
  line: "rgba(235,235,235,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.92px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.8px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

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

---

## Overview

A high-performance developer platform with a stark, monochrome aesthetic punctuated by vibrant gradients.

*A precision instrument for modern web infrastructure*

## Colors

A stark, monochrome foundation where typography and high-contrast UI elements carry the visual weight.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#171717`)** — uses `ink` token
- **Secondary text (`#4d4d4d`)** — uses `ink-soft` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(235,235,235,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Tight negative tracking for display sizes
- Generous vertical rhythm in body copy
- Monospaced font for all code representations

## Layout

Centered single-column layout with wide margins, utilizing a visible 12-column grid in the hero

*Rhythm:* 4px base grid with consistent multiples for spacing and sizing

## Elevation & Depth

- rgba(0,0,0,0.08) 0px 0px 0px 1px
- rgba(0,0,0,0.04) 0px 2px 2px 0px
- Borders: 1px solid #ebebeb

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** High-contrast pill-shaped buttons; primary is solid black with white text, secondary is outlined with black text
- **card:** Subtle bordered cards with light shadows and generous padding
- **chip:** Small rounded tags with minimal padding and thin borders
- **input:** Clean text inputs with subtle borders and internal padding
- **hero:** Large central headline with prominent background graphic, clear CTAs, and supporting subtext

## Do's and Don'ts

**Don't:**
- Don't use vibrant or neon colors as primary UI elements — screenshot shows a strictly monochrome interface
- Don't use rounded corners on all elements — screenshot shows sharp, geometric shapes like the logo and cards
- Don't use wide, decorative fonts — screenshot shows a clean, functional sans-serif for all headings
- Don't create overly complex layouts with many columns — screenshot shows a spacious, single-column flow
- Don't use drop shadows for depth — screenshot relies on thin borders and high contrast for separation
- Don't use all-caps for body text — screenshot reserves uppercase for small labels or tags

---

## System Prompt (paste into AI agent)

```
Design system for a high-performance developer platform. Use a stark monochrome palette centered on black (#171717) and white (#ffffff) with functional grays. Typography should be a clean geometric sans-serif for display and a humanist sans for body text. Layout is spacious and centered, utilizing a visible grid. Components are high-contrast, often pill-shaped, with subtle borders. Critical constraints: maintain a strict monochrome foundation, avoid soft or rounded aesthetics, and keep typography precise and legible. Ensure all interactive elements provide clear, fast feedback.
```