<!-- Generated by ExtractVibe — https://extractvibe.com/brand/vercel.com -->
<!-- Extracted: 2026-04-26T13:07:45.962Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Vercel"
description: "Vercel projects a sophisticated and highly functional image, catering to developers with tools that are both powerful and aesthetically refined. It balances a serious, technical foundation with an underlying sense of modern efficiency and a forward-thinking approach to web development."
colors:
  primary: "#171717"
  tertiary: "#0072f5"
  neutral: "#4d4d4d"
  surface: "#fafafa"
  on-surface: "#171717"
  on-surface-secondary: "#4d4d4d"
  link: "#0072f5"
  surface-dark: "#171717"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "48px"
    letterSpacing: "-2.4px"
  headline-lg:
    fontFamily: "Geist"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
    letterSpacing: "-0.28px"
  headline-md:
    fontFamily: "Geist"
    fontSize: "32px"
    fontWeight: "600"
    lineHeight: "40px"
    letterSpacing: "-1.28px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "6px"
  md: "100px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#0072f5"
    rounded: "6px"
    padding: "0px 12px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#0072f5"
    boxShadow: "rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px"
  button-outline:
    textColor: "#171717"
    rounded: "50%"
    padding: "1px 6px"
    fontSize: "13.3333px"
    fontWeight: "400"
    borderWidth: "1px"
---

# Vercel — Design System

## Overview

Vercel's design system embodies the archetypes of The Magician and The Creator, manifesting a sophisticated and highly functional aesthetic. It is engineered for developers, prioritizing powerful tools and aesthetically refined interfaces. The design communicates a modern efficiency and a forward-thinking approach to web development, aligning with the precision and innovation found in brands like Stripe, Linear, GitHub, and Figma. This is a system built for clarity, performance, and technical excellence.

This design system is not whimsical, decorative, or overtly playful. It avoids excessive ornamentation, bright primary color palettes, or informal typography. The focus remains on utility, readability, and a streamlined user experience. Every design choice reinforces Vercel's commitment to developer-first tooling, ensuring that the interface serves as an unobtrusive yet powerful extension of the developer's workflow. It is serious, technical, and refined, without being cold or inaccessible.

**Key characteristics:**

- Vibe — developer-first, modern, efficient, technical, refined, performance-oriented
- Archetypes — The Magician, The Creator
- Comparable to — Stripe, Linear, GitHub, Figma
- Design era — contemporary-minimal
- Emotional tone — authoritative-innovative
- Target audience — Web developers, software engineers, and tech-forward companies seeking high-performance, scalable, and easy-to-deploy web solutions, particularly those interested in AI-driven cloud infrastructure.
- Visual energy — 6/10 (moderate)

## Colors

The color palette is deliberately minimalist, centered on a primary color of `#171717` and a surface color of `#fafafa`. This high-contrast, monochrome foundation signals technical precision, sophistication, and a focus on content. The starkness underscores Vercel's efficient and performance-oriented nature, ensuring visual clarity and reducing cognitive load. This choice reflects a brand that is serious about its craft and provides a clean canvas for complex technical information.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#171717` | Near-Black |
| accent / tertiary | `#0072f5` | Dodger Blue |
| surface | `#fafafa` | Off-White |
| background | `#fafafa` | Off-White |
| text | `#171717` | Near-Black |
| secondary text | `#4d4d4d` | Dark Gray |
| link | `#0072f5` | Dodger Blue |
| muted | `#4d4d4d` | Dark Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#171717` | Near-Black |

## Typography

The type system exclusively employs Geist and Geist Mono, with a fallback to `monospace`. This selection reinforces Vercel's developer-first ethos. Geist provides a modern, highly readable sans-serif for general text, while Geist Mono ensures code blocks and technical data are rendered with perfect alignment and clarity. The hierarchy is established through weight and size variations within these families, maintaining a consistent, refined, and technical voice across all interfaces. This system prioritizes legibility and functional elegance above all else.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Geist | body | self-hosted | 400, 500 |
| Geist | heading | self-hosted | 400, 500, 600 |
| Geist Mono | mono | self-hosted | 500 |
| monospace | mono | system | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Geist | 48px | 600 | 48px | -2.4px |
| Heading 2 | Geist | 14px | 500 | 20px | -0.28px |
| Heading 3 | Geist | 32px | 600 | 40px | -1.28px |
| Body | Geist | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case
- Monospace — Geist Mono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` |
| card | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, rgb(250, 250, 250) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 0px 0px 1px` |
| element | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px, rgb(250, 250, 250) 0px 0px 0px 1px` |
| button | `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px` |
| button | `rgb(235, 235, 235) 0px 0px 0px 1px` |
| button | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` |

## Shapes

Border-radius scale:

- `sm` — 6px
- `md` — 100px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#0072f5`
- Radius — `6px`
- Padding — `0px 12px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #0072f5`
- Shadow — `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px`
- Sample copy — "Skip to content"

**Outline**

- Text — `#171717`
- Radius — `50%`
- Padding — `1px 6px`
- Font size — `13.3333px`
- Font weight — `400`

## Do's and Don'ts

### Do

- Utilize Geist (self-hosted) for all body text in weights 400 and 500, maintaining sentence-case for all content.
- Employ Geist (self-hosted) for all headings, using weights 400, 500, and 600, consistently in sentence-case.
- Apply Geist Mono (self-hosted) or system 'monospace' font at 500 weight for all code snippets and monospaced text.
- Use the primary color #171717 for all main text and the accent color #0072f5 for interactive elements and highlights.
- Implement a clean, high-contrast palette with #fafafa as the background color, ensuring readability.
- Design secondary buttons with a #ffffff background, #0072f5 text, 6px border-radius, a #0072f5 border, and a shadow of `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px`.
- Apply subtle, multi-layer shadows on cards and elements, specifically `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` or `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px`.
- Maintain a consistent spacing system based on a 2px base unit, with border radii of 6px for small elements, 100px for medium, and 9999px for pill-shaped elements.

### Don't

- Avoid using any gradients in visual designs; the brand's aesthetic is flat with subtle depth via shadows.
- Do not use emojis in any marketing or product copy; the brand maintains a serious and professional tone.
- Refrain from using exclamations in copy; the brand's communication is matter-of-fact and direct.
- Do not use title case or all caps for headings; all headings must adhere to sentence-case.
- Avoid overly playful or casual language; maintain a tone that is formal yet enthusiastic, with a moderate vocabulary and heavy use of technical jargon where appropriate.
- Do not introduce new font families beyond Geist and Geist Mono; consistency in typography is paramount.
- Avoid bright, vibrant, or overly saturated colors outside of the defined accent blue #0072f5; the palette is intentionally restrained.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 8/10 | irreverent |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented imperative verbs, often combined with benefit-focused phrases or specific product names
- Rhetorical devices — repetition

### Sample copy

> Build and deploy on the AI Cloud.

> Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.

> Fast load times, zero overhead with Vercel's highly optimized infrastructure and CDN, reducing bounce rates and improving SEO.

> Security, speed, and AI included, so you can focus on your user.

> AI GatewayOne endpoint, all your models

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/vercel.com) | 100% |
| favicon | — | png | [link](brands/vercel.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-6.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-7.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-8.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-9.png) | 95% |
| favicon | — | png | [link](brands/vercel.com/logo-10.png) | 95% |

## Sources

- Official brand guidelines — https://vercel.com/design
- Live brand page — https://extractvibe.com/brand/vercel.com
- Raw JSON — https://extractvibe.com/api/brand/vercel.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/vercel.com/design.md
- Extracted — 2026-04-26T13:07:45.962Z
- Generator — ExtractVibe vv1
- Quality score — 100/100