# Vercel — Design System
> Vercel's monochrome devtools system. Geist sans + mono, single functional accent, zero decorative gradients.
- **Canonical:** https://uiuxskills.com/library/vercel
- **Source:** https://vercel.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:24.799Z

---

---
version: alpha
name: Vercel
description: Cloud platform for frontend developers to build, deploy, and scale web applications.
tone: >-
  Professional, technical, direct, and efficient. The tone is authoritative yet accessible to
  developers, focusing on performance metrics and infrastructure reliability.
color-scheme: light
colors:
  primary: "#2C8CE1"
  surface: "#FFFFFF"
  surface-container: "#F7F7F7"
  on-surface: "#111111"
  on-surface-variant: "#666666"
  outline: "#EAEAEA"
  error: "#FF4040"
  success: "#0070F3"
  focus-ring: "#2C8CE1"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  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: "#0070F3"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Vercel maintains a high-performance, developer-centric aesthetic that prioritizes clarity, speed, and technical precision. The visual language is minimalist and monochromatic, relying on subtle grays and high-contrast typography to ensure that code and product features remain the primary focus.

## Colors

The color strategy is intentionally restrained, using a monochromatic foundation to provide a clean canvas for high-contrast functional highlights.

*   Primary (#2C8CE1): The core brand blue used for primary actions and highlights.
*   Surface (inferred) (#FFFFFF): Standard white background for light mode.
*   Surface-container (inferred) (#F7F7F7): Light gray for secondary containers and cards.
*   On-surface (inferred) (#111111): Primary text color for high contrast.
*   On-surface-variant (inferred) (#666666): Secondary text color for labels and metadata.
*   Outline (inferred) (#EAEAEA): Border color for dividers and input fields.
*   Error (inferred) (#FF4040): Semantic color for errors and destructive actions.
*   Success (inferred) (#0070F3): Semantic color for success states.
*   Focus-ring (inferred) (#2C8CE1): Focus ring color matching the primary brand color.

## Typography

Typography is set in the Inter typeface, utilizing a clear hierarchy to distinguish between marketing headers and technical documentation.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-sm (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-md (inferred): Button and label text.

## Layout

Vercel employs a responsive grid system that scales from a single column on mobile to a 12-column layout on desktop, utilizing a 4px base unit for all spacing. The page structure generally follows the order: nav, hero, social-proof, features, infrastructure, pricing, and footer. The hero pattern features a centered headline and subhead with dual primary/secondary CTAs, often accompanied by a product visualization. On mobile, the navigation collapses into a menu drawer to maintain a clean, focused interface.

## Elevation & Depth

Depth is used sparingly, primarily to distinguish interactive cards from the background. The elevation scale provides subtle, single-layer shadows: `elevation.sm` for light card lift, `elevation.md` for standard interactive components, and `elevation.lg` for modal or overlay focus.

## Shapes

The brand uses a mix of sharp, structural corners and full rounding for interactive elements. This creates a balance between technical precision and approachable UI. Structural containers typically use `rounded.md`, while buttons and badges utilize `rounded.full` or `rounded.sm` to emphasize their interactive nature.

## 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
The primary button uses a `{colors.primary}` background with `{typography.label-md}` text. It is designed for high-visibility actions. Secondary buttons use a `{colors.surface}` background with a `{colors.outline}` border to maintain a minimalist aesthetic.

### Card
Cards are defined by a `{colors.surface}` background and `{rounded.md}` corners. They serve as the primary container for feature highlights and content blocks, often paired with an `{colors.outline}` border to separate them from the `{surface-container}` background.

### Input Field
Input fields use a `{colors.surface}` background with `{rounded.sm}` corners and an `{colors.outline}` border. Upon interaction, the border transitions to `{colors.focus-ring}` to provide clear feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for non-link text. |
| Apply `{rounded.md}` to all card components. | Do not use excessive shadows on `{card}` components. |
| Use `{typography.body-md}` for main content. | Never apply `{typography.display-lg}` to body text. |
| Maintain consistent `{spacing.md}` between sections. | Avoid using `{spacing.xs}` for primary layout margins. |
| Use `{colors.outline}` for all subtle dividers. | Avoid using `{colors.error}` for non-destructive actions. |
| Ensure all interactive elements have a `{colors.focus-ring}`. | Do not mix font families; stick to the system sans-serif stack. |
| Use `{rounded.sm}` for input fields. | Do not use large radii on structural inputs. |
| Use `{badge-success}` for status indicators. | Avoid using high-contrast colors for background fills. |

## Content Style

CTA labels use imperative verbs in sentence case, such as "Deploy" or "Get a Demo," focusing on immediate action.

Headings are phrased to be direct, benefit-oriented, and concise, ensuring the value proposition is communicated instantly.

Copy density is kept low to ensure scannability, utilizing short paragraphs and frequent lists to break up technical information.

## Imagery & Icons

The imagery style is mixed, combining clean, vector-based illustrations with high-fidelity product screenshots. Icons follow a thin-stroke, monochromatic language that aligns with the minimalist aesthetic. Illustrations should be used to clarify complex infrastructure concepts, while product screenshots should be presented with high fidelity to maintain professional credibility.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Vercel, a minimal enterprise developer platform. Match its direct, technical tone — restrained, precise, and professional. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, pixel sizes, or raw font stacks.
2. Respect only the component variants listed under `components:` (e.g., `button-primary`, `button-secondary`, `card`, `card-elevated`, `input-field`, `badge`, `badge-error`, `badge-success`). Do not invent variants the spec does not define.
3. Apply the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values. Use `{spacing.md}` as the default section-level gap per the Layout narrative.
4. Follow the Shapes section: `{rounded.md}` for structural containers and cards, `{rounded.sm}` for inputs and badges, `{rounded.full}` for interactive pill elements. Do not apply large radii to structural inputs.
5. If a user's request conflicts with the Do's and Don'ts table — for example, using `{colors.primary}` for non-link body text — surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply a `{colors.focus-ring}` outline to all keyboard-interactive elements.
- Write CTA labels as imperative sentence-case verbs ("Deploy", "Get a Demo") per the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or elevation values absent from the spec.
- Use generic system defaults when a named token exists.
- Apply `{colors.error}` to non-destructive actions or `{colors.primary}` to non-link text.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite page copy, button labels, headings, or navigation items.
- Alter page structure, routes, or section order.

## When in doubt
- If a required value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface-variant}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values supersede the spec.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, consistent with the single-column-to-12-column layout described in the spec.