Xcgh

Generated Oct 9, 2026

DESIGN.md for vercel.app

vercel.app8 colors5 componentsGeistSans

Remix

12 screenshots captured· vercel.app

1 / 12 · Agentic Infrastructure - Vercel · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Vercel
description: |
  Vercel's design system embodies a minimalist, forward-thinking aesthetic
  rooted in clarity and restraint. The palette is fundamentally
  monochromatic—anchored in pure black and white with carefully calibrated
  grays—creating a professional, tech-forward presence that prioritizes content
  and function over ornamentation. The system favors negative space, geometric
  precision, and subtle depth through layered micro-shadows rather than bold
  visual statements. This restraint conveys confidence and technical
  sophistication, positioning the brand as a mature infrastructure platform for
  developers building autonomous agents and applications at scale. Typography is
  expansive and bold at hero scales, with generous letter-spacing on display
  sizes that adds elegance without sacrificing legibility. Interactive elements
  are softly rounded (pill-shaped buttons), and surfaces are defined more by
  color shifts and hairline borders than by heavy shadows, creating an interface
  that feels approachable despite its technical purpose.
source:
  url: "https://vercel.app"
  pagesAnalyzed: 6
  extractedAt: 2026-10-09
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  on-primary: "#222222"
  ink: "#171717"
  body: "#4D4D4D"
  muted: "#666666"
  faint: "#8F8F8F"
  neutral-1: "#EBEBEB"
  neutral-2: "#C9C9C9"
typography:
  display-xl:
    fontFamily: GeistSans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -3.84px
  display-lg:
    fontFamily: GeistSans
    fontSize: 56px
    fontWeight: 450
    lineHeight: 1
    letterSpacing: -3.36px
  body-xl:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 450
    lineHeight: 1.33
    letterSpacing: -0.96px
  body-xl-tight:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 450
    lineHeight: 1.1
    letterSpacing: -1.2px
  body-lg:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: -0.32px
  body-lg-strong:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-md-strong:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  label:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: GeistSans
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.82
    letterSpacing: 0.2px
    textTransform: capitalize
  code-md:
    fontFamily: "Geist Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
    textTransform: uppercase
  code-sm:
    fontFamily: "Geist Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-sm-strong:
    fontFamily: "Geist Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.67
    letterSpacing: 0px
    textTransform: uppercase
  code-xs:
    fontFamily: "Geist Mono"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 4px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 44px
  band: 48px
borderWidths:
  thin: 1px
shadows:
  sm: "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"
  md: "rgb(235, 235, 235) 0px 0px 0px 1px"
  lg: "rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#171717"
    textMuted: "#4D4D4D"
    border: "#E3E3E3"
    accent: "#8F8F8F"
    accentFg: "#000000"
    focusRing: "#FFFFFF"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#FFFFFF"
    textMuted: "#A4A4A4"
    border: "#353536"
    accent: "#FFFFFF"
    accentFg: "#0B0B0C"
    focusRing: "#FFFFFF"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(to top in oklab, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 100%)"
  - context: section
    kind: radial
    value: "radial-gradient(circle at 0% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%), radial-gradient(circle at 100% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%), radial-gradient(circle at 100% 100%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%)"
  - context: section
    kind: linear
    value: "linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, lab(100 0 0) 100%)"
    filter: "blur(48px)"
components:
  button-primary:
    typography: "{typography.body-lg-strong}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "0px 12px 0px 12px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 0px 0px 0px 1px"
    rounded: "3.35544e+07px"
    backgroundColor: "{colors.primary}"
  button-secondary:
    typography: "{typography.body-lg-strong}"
    textColor: "{colors.primary}"
    height: 40px
    padding: "0px 12px 0px 12px"
    rounded: "3.35544e+07px"
    backgroundColor: "{colors.ink}"
  button-primary-sm:
    textColor: "{colors.ink}"
    height: 32px
    padding: "0px 6px 0px 6px"
    fontSize: 14px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 0px 0px 0px 1px"
    fontFamily: GeistSans
    fontWeight: 500
    lineHeight: 1.5
    rounded: 6px
    backgroundColor: "{colors.primary}"
  button-secondary-sm:
    textColor: "{colors.primary}"
    height: 32px
    padding: "0px 6px 0px 6px"
    fontSize: 14px
    fontFamily: GeistSans
    fontWeight: 500
    lineHeight: 1.5
    rounded: 6px
    backgroundColor: "{colors.ink}"
  button-text:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    height: 32px
  button-icon:
    typography: "{typography.label}"
    textColor: "{colors.faint}"
    height: 24px
    rounded: "{rounded.xs}"
  badge-text:
    typography: "{typography.body-xl}"
    textColor: "{colors.ink}"
    height: 32px
  navigation:
    textColor: "{colors.ink}"
    height: 64px
    fontSize: 16px
    fontFamily: GeistSans
    fontWeight: 400
    lineHeight: 1.5
  footer:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    padding: "40px 24px 40px 24px"
  link:
    textColor: "{colors.ink}"
    padding: "20px 20px 20px 20px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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, rgb(250, 250, 250) 0px 0px 0px 1px"
    fontFamily: GeistSans
    fontWeight: 400
    lineHeight: 1.5
    rounded: 6px
    backgroundColor: "rgb(250, 250, 250)"
  link-sm:
    textColor: "{colors.ink}"
    padding: "0px 12px 0px 12px"
    fontSize: 14px
    fontFamily: GeistSans
    fontWeight: 500
    lineHeight: 1.5
    rounded: "3.35544e+07px"
states:
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgba(0, 0, 0, 0)"
  card-hover:
    target: card
    state: hover
    opacity: 1
  nav-hover:
    target: nav
    state: hover
    opacity: 0
  other-focus-visible:
    target: other
    state: focus-visible
    opacity: 1
  nav-focus-visible:
    target: nav
    state: focus-visible
    opacity: 0
  other-active:
    target: other
    state: active
    opacity: 0.1
  other-disabled:
    target: other
    state: disabled
    opacity: 0.7
breakpoints:
  - width: 375
    containerWidth: 327
    gridColumns: 2
    navLinksVisible: 80
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 24
  - width: 768
    containerWidth: 720
    gridColumns: 3
    navLinksVisible: 80
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 976
    gridColumns: 4
    navLinksVisible: 82
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1280
    containerWidth: 1232
    gridColumns: 6
    navLinksVisible: 82
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1440
    containerWidth: 1392
    gridColumns: 6
    navLinksVisible: 82
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 24
coverage:
  statesFound: 61
  gradientsFound: 3
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Vercel

1. Visual Theme & Atmosphere

Vercel's design system embodies a minimalist, forward-thinking aesthetic rooted in clarity and restraint. The palette is fundamentally monochromatic—anchored in pure black and white with carefully calibrated grays—creating a professional, tech-forward presence that prioritizes content and function over ornamentation. The system favors negative space, geometric precision, and subtle depth through layered micro-shadows rather than bold visual statements. This restraint conveys confidence and technical sophistication, positioning the brand as a mature infrastructure platform for developers building autonomous agents and applications at scale. Typography is expansive and bold at hero scales, with generous letter-spacing on display sizes that adds elegance without sacrificing legibility. Interactive elements are softly rounded (pill-shaped buttons), and surfaces are defined more by color shifts and hairline borders than by heavy shadows, creating an interface that feels approachable despite its technical purpose.

Key Characteristics:

Monochromatic palette with high contrast between ink (#171717) and canvas (#FFFFFF)
Minimalist visual language emphasizing whitespace and geometric clarity
Negative letter-spacing on large display sizes (-3.84px on 64px headings) for premium typography
Pill-shaped buttons ({rounded.full}) softening the otherwise geometric grid
Layered micro-shadows for barely-there depth rather than bold elevation
Subtle neutral grays for secondary text and decorative elements
Tech-forward, professional tone targeting developer audiences

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFFFFF): Used as CTA fill, brand accent, and active state indicator. Sits at the foundation of interactive surfaces, typically paired with dark text or dark backgrounds for contrast.

Neutral Scale

Ink ({colors.ink} — #171717): Primary text color for headings, labels, and interface copy. Darkest semantic value, providing maximum contrast against light surfaces.
Body ({colors.body} — #4D4D4D): Standard body copy and secondary interface text. Mid-tone gray providing readable contrast on neutral backgrounds without the weight of full black.
Muted ({colors.muted} — #666666): Tertiary text for captions, helper text, and metadata. Used for visual hierarchy de-emphasis.
Faint ({colors.faint} — #8F8F8F): Placeholder text, disabled states, and minimal visual elements. Lowest priority text layer.
On Primary ({colors.on-primary} — #222222): Label and text color applied over primary (#FFFFFF) surfaces, ensuring contrast and readability.

Neutral Scale (Decorative)

Neutral 1 ({colors.neutral-1} — #EBEBEB): Decorative neutral used for subtle borders, dividers, and card backgrounds. No specific semantic role assigned.
Neutral 2 ({colors.neutral-2} — #C9C9C9): Decorative neutral for secondary dividers or background layers. No specific semantic role assigned.

3. Typography Rules

Font Family

Primary: GeistSans (sans-serif family, optimized for screen rendering)
Secondary: Geist Mono (monospace, for code blocks and technical content)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	GeistSans	64px	400	1	-3.84px	Hero headings, page titles
Display Lg	GeistSans	56px	450	1	-3.36px	Section headings, prominent titles
Body XL	GeistSans	24px	450	1.33	-0.96px	Large feature copy, call-outs
Body XL Tight	GeistSans	24px	450	1.1	-1.2px	Large feature copy with tighter line spacing
Body Lg	GeistSans	16px	450	1.5	-0.32px	Feature copy, elevated body text
Body Lg Strong	GeistSans	16px	500	1.5	0px	Emphasized body copy, button labels on primary buttons
Body Md	GeistSans	14px	400	1.43	0px	Standard body copy, interface text
Body Md Strong	GeistSans	14px	500	1.43	0px	Emphasized body text, secondary button labels
Label	GeistSans	14px	400	1.5	0px	Form labels, semantic markers
Caption	GeistSans	11px	500	1.82	0.2px	Footnotes, tiny captions, attribution
Code Md	Geist Mono	14px	400	1.43	0px	Code blocks, terminal output (uppercase transformed)
Code Sm	Geist Mono	12px	400	1.33	0px	Inline code, small code snippets
Code Sm Strong	Geist Mono	12px	500	1.67	0px	Emphasized code, highlighted tokens (uppercase transformed)
Code Xs	Geist Mono	11px	400	1.5	0px	Tiny code references, badges (uppercase transformed)

Principles

Negative letter-spacing at scale: Display sizes (64px, 56px) employ aggressive negative letter-spacing (-3.84px, --3.36px) to create premium, condensed typography that signals hierarchy and emphasis.
Generous line heights on body: Body copy uses 1.43–1.5 line heights, creating readable, spacious layouts aligned with modern web standards.
Monospace for code: Dedicated monospace stack (Geist Mono) for technical content, with uppercase text transformation applied to code roles for visual distinction.
Weight variation: Weights shift between 400 (regular) and 500 (medium) to signal emphasis without introducing a full bold variant, maintaining the minimal aesthetic.
Optical sizing: Smaller sizes (caption, code-xs) use higher line heights (1.82, 1.5) to ensure legibility at diminished scales.

4. Component Stylings

Buttons

Primary Button (Large)

Background: #FFFFFF
Text Color: #171717 ({colors.ink})
Font: GeistSans, 16px, weight 500, line-height 24px
Padding: 0px 12px
Height: 40px
Border Radius: {rounded.full} (pill-shaped)
Border: 1px solid #EBEBEB (hairline, decorative)
Box Shadow: 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

Secondary Button (Large)

Background: #171717
Text Color: #FFFFFF
Font: GeistSans, 16px, weight 500, line-height 24px
Padding: 0px 12px
Height: 40px
Border Radius: {rounded.full} (pill-shaped)
Border: 1px solid #EBEBEB (no visible effect on dark background)
Box Shadow: none

Primary Button (Small)

Background: #FFFFFF
Text Color: #171717
Font: GeistSans, 14px, weight 500, line-height 21px
Padding: 0px 6px
Height: 32px
Border Radius: {rounded.xs} (4px, slightly rounded)
Border: 1px solid #EBEBEB
Box Shadow: 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

Secondary Button (Small)

Background: #171717
Text Color: #FFFFFF
Font: GeistSans, 14px, weight 500, line-height 21px
Padding: 0px 6px
Height: 32px
Border Radius: {rounded.xs} (4px)
Border: 1px solid #EBEBEB
Box Shadow: none

Text Button

Background: transparent (rgba(0, 0, 0, 0))
Text Color: #4D4D4D ({colors.body})
Font: GeistSans, 14px, weight 400, line-height 20px
Padding: 0px
Height: 32px
Border Radius: {rounded.none} (0px, no rounding)
Border: none
Box Shadow: none

Icon Button

Background: transparent
Text Color: #8F8F8F ({colors.faint})
Font: GeistSans, 14px, weight 400, line-height 21px
Padding: 0px
Width/Height: 24px (square)
Border Radius: {rounded.xs} (4px)
Border: 1px solid #EBEBEB
Box Shadow: none

Cards & Containers

Default Card

Background: rgb(250, 250, 250)
Text Color: #171717
Font: GeistSans, 16px, weight 400, line-height 24px
Padding: 20px
Border Radius: {rounded.xs} (6px)
Border: 1px hairline, composite (subtle multi-layer border using rgba(0, 0, 0, 0.08) 0px 0px 0px 1px plus white inner stroke)
Box Shadow: 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

Inputs & Forms

Form Label

Font: GeistSans, 14px, weight 400, line-height 1.5
Text Color: #171717
Letter Spacing: 0px

Input Field (implied from navigation and link patterns)

Background: transparent or surface-default
Text Color: #171717
Font: GeistSans, 14px, weight 400
Line Height: 1.43
Border: 1px solid #EBEBEB or #C9C9C9
Border Radius: {rounded.xs} (4px, variable per context)

Navigation

Navigation Bar (Primary)

Background: transparent or rgba(0, 0, 0, 0) (inherits page background)
Text Color: #171717
Font: GeistSans, 16px, weight 400, line-height 24px
Height: 64px
Padding: 0px
Border: none
Box Shadow: none

Navigation Links

Color: #171717 (default)
Font: GeistSans, 16px, weight 400
Hover state transitions not explicitly defined in extraction; see Known Gaps

Badges & Labels

Badge (Text Style)

Background: transparent
Text Color: #171717
Font: GeistSans, 24px, weight 450, line-height 32px
Padding: 0px
Border Radius: {rounded.none} (0px, no rounding)
Border: none
Box Shadow: none

5. Layout Principles

Spacing System

The system uses an 8px base unit with a geometric scale:

{spacing.xxs} = 4px (micro gaps, icon spacing)
{spacing.xs} = 8px (tight internal spacing, small padding)
{spacing.sm} = 12px (button internals, form gaps)
{spacing.md} = 16px (default padding, standard gutters)
{spacing.lg} = 20px (card padding, section gutters)
{spacing.xl} = 24px (prominent spacing, feature section margins)
{spacing.xxl} = 32px (large section gaps, feature spacing)
{spacing.xxxl} = 40px (footer content padding, banner spacing)
{spacing.section} = 44px (inter-section vertical spacing)
{spacing.band} = 48px (hero band and major section breaks)

Usage context:

Buttons use {spacing.sm} (12px) and {spacing.md} (16px) for internal padding
Cards default to {spacing.lg} (20px) internal padding
Section horizontal padding uses {spacing.xl} (24px) on most viewports
Hero sections and major breaks employ {spacing.band} (48px) or {spacing.section} (44px)

Grid & Container

Viewport	Max Width	Column Count	Content Width
375px (mobile)	375px	2 columns	327px
768px (tablet)	768px	3 columns	720px
1024px (desktop)	1024px	4 columns	976px
1280px (wide)	1280px	6 columns	1232px
1440px (ultrawide)	1440px	6 columns	1392px

Container max-widths increase progressively with viewport; content maintains consistent horizontal gutters (24px on each side across all breakpoints). Grid column count scales: 2 columns on mobile, 3 on tablet, 4 on mid-desktop, 6 on wide screens and above.

Whitespace Philosophy

Whitespace is treated as a first-class design element. The system favors generous negative space around text and interactive elements, with section-to-section vertical gaps of {spacing.section} (44px) or {spacing.band} (48px) providing breathing room between conceptual areas. Card and component internal padding uses {spacing.lg} (20px) or {spacing.xl} (24px), creating readable, uncluttered layouts. Text line heights range from 1.33 to 1.82, ensuring comfortable reading distances. This restraint allows content to be the focus while maintaining visual hierarchy through proximity and scale rather than busy decorative elements.

Border Radius Scale

{rounded.none} = 0px — Sharp corners on text buttons, badges, and structural elements where geometric precision is desired
{rounded.xs} = 4px — Subtle rounding on small buttons (32px height), form inputs, icon buttons, and card corners
{rounded.full} = 9999px — Pill-shaped buttons (primary, secondary large variants) and circular badge elements, softening interactive affordance

Component radius assignments:

Primary & Secondary buttons (40px height): {rounded.full} (pill)
Small buttons (32px height): {rounded.xs} (4px)
Icon buttons: {rounded.xs} (4px)
Cards: {rounded.xs} (6px, measured as 6px in card data)
Text buttons & badges: {rounded.none} (0px)

Border Widths

Hairline = 1px — Used as a decorative or functional divider; applied to card borders, button borders, and subtle containment lines throughout the interface

6. Depth & Elevation

Elevation Levels

Level	Treatment	Use
Flat	No shadow, `rgba(0, 0, 0, 0)` box-shadow	Backgrounds, text layers, truly flat surfaces
Card (Sm)	`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`	Cards, elevated containers, floating surfaces
Button (Md)	`rgb(235, 235, 235) 0px 0px 0px 1px`	Primary buttons, interactive elements with subtle border-based depth
Custom (Lg)	`rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px`	Focus states, highlighted interactive elements with accent ring
Custom (Xl)	`rgba(0, 0, 0, 0)` (fully transparent)	Reserved for future use or deeply nested states

Shadow Philosophy

Vercel employs a layered-micro elevation strategy, where depth is created through stacked, near-transparent shadow layers rather than bold, single-layer shadows. The card shadow, for example, comprises five distinct layers: a 1px outer border at 8% opacity, inner micro-shadows at 2% and 4% opacity providing barely-there lift, and white inner strokes at full opacity creating a subtle inset edge. This approach maintains minimalism while providing sufficient visual separation for interface clarity. Shadows are warm-neutral (black at varying opacity), avoiding cool or colored shadows that would conflict with the monochromatic palette.

Opacity Levels

10% (0.10) — Minimal opacity, used for very subtle overlays or disabled states
42% (0.42) — Mid-range opacity for secondary visual layers
50% (0.50) — Half-opacity for moderate dimming or overlay effects
Additional levels: 60%, 70%, 80%, 90%, 100% employed contextually for hover states, transitions, and visibility toggles

Z-index / Layering

Layer	Z-index	Context
Base	1–2	Standard flow, unlifted surfaces
Dropdown	10, 20, 74, 75, 76	Nested dropdown menus, submenu stacking (74, 75, 76 for deeply nested popovers)
Sticky	100	Navigation bars, sticky headers, persistent overlays

Z-index values are conservative and clustered, allowing for predictable stacking without extreme values. Dropdowns use a stepped scale (10 → 20 → 74–76) to accommodate multi-level nesting; sticky elements (100) sit above all interactive layers.

7. Do's and Don'ts

Do

Use pill-shaped buttons ({rounded.full}) for primary and secondary CTA buttons to signal interactivity through soft affordance
Apply negative letter-spacing to display-size headings (64px, 56px) for premium, condensed typography that commands visual hierarchy
Maintain consistent 24px horizontal padding on sections across all viewports to preserve content breathing room
Layer shadows compositionally using the card shadow pattern with multiple near-transparent layers rather than single bold shadows
Employ the neutral gray ramp (#171717 → #4D4D4D → #666666 → #8F8F8F) for text hierarchy: darkest for primary content, lighter for secondary/tertiary elements
Use {spacing.md} (16px) and {spacing.lg} (20px) as default padding for cards, containers, and interactive surfaces
Apply {rounded.xs} (4px) to small buttons, inputs, and icon buttons; reserve {rounded.full} for large buttons only
Employ white (#FFFFFF) as the primary button fill over dark surfaces and dark (#171717) as secondary to maintain strong contrast and visual clarity
Scale typography by weight (400 → 500) and size rather than introducing additional weight families; maintain the minimal aesthetic
Use hairline 1px borders (#EBEBEB) as subtle containment or visual separators; avoid thick borders

Don't

Do not apply rounded corners to text buttons ({rounded.none} / 0px is correct); reserve rounding for interactive affordance
Do not invent color roles beyond the defined palette; the system has no error/success/warning semantic colors
Do not reduce letter-spacing on display headings to zero; the negative spacing (-3.84px, -3.36px) is a defining visual signature
Do not use shadows to create depth hierarchy; rely on color blocking (surface color changes) and compositional layering instead
Do not exceed 24px horizontal padding on section margins; maintain content centered and constrained
Do not apply opacity levels outside the measured scale (10%, 42%, 50%, 60%, 70%, 80%, 90%, 100%); this ensures consistency
Do not use the full #000000 black for primary text; use {colors.ink} (#171717) which is softer and more refined
Do not create new font sizes; the typography hierarchy is fixed; reuse existing scales for consistency
Do not add shadows to disabled states; rely on opacity reduction and color desaturation instead
Do not mix monospace and sans-serif families outside their defined contexts (code blocks vs. interface text); maintain clear visual roles

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Columns	Key Changes	Primary Use
Mobile	375px	327px	2	Navigation remains visible (80 chars); heading size held at 48px for now	Phones, small devices
Tablet	768px	720px	3	Navigation visible; heading scales to 64px; content expands	Tablets, iPads
Desktop	1024px	976px	4	Full desktop layout; 82-char visible nav; 64px headings	Small laptops, desktop
Wide	1280px	1232px	6	Extended column count; full feature space	Larger monitors
Ultra Wide	1440px	1392px	6	Maximum content width; all features fully visible	High-resolution displays, 4K

Transition points: Layout recalculates at each breakpoint with no intermediate media queries. Column grid expands from 2 → 3 → 4 → 6 columns as viewport widens. Navigation link visibility (80–82 characters) remains stable across breakpoints; a menu toggle is not present at measured breakpoints but may exist below 375px.

Touch Targets

Minimum interactive element size: 40px height (buttons, nav items)
Comfortable spacing between targets: {spacing.md} (16px) or {spacing.lg} (20px) horizontal/vertical gaps
Icon buttons: 24px × 24px with {rounded.xs} (4px) rounding
Small buttons: 32px height with {spacing.sm} (12px) horizontal padding
Link tap areas: 44–64px vertical spacing to allow thumb-friendly tapping on mobile

Collapsing Strategy

Mobile (375px):

Content width narrows to 327px with 24px gutters on each side
Grid collapses to 2 columns
Headings remain large (48px on mobile, 64px on tablet+) to maintain visual hierarchy
Navigation remains visible; no drawer detected at this breakpoint
Horizontal scrolling is prevented; all content fits within viewport

Tablet (768px):

Content expands to 720px; grid shifts to 3 columns
Headings scale up to 64px
Section padding maintains 24px horizontal margins
Navigation links visible (approx. 80 characters visible)

Desktop (1024px+):

Column count increases to 4 or 6 depending on final width
Content centering applied with max-width constraints
Navigation remains horizontal; no mobile drawer observed at 1024px
All features and sections fully visible without horizontal scroll

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary (#FFFFFF) — white button on dark backgrounds or light surfaces; paired with {colors.on-primary} (#222222) text for contrast
Background / Canvas: White (#FFFFFF) — page background; neutral, infinite space
Heading text: Ink (#171717) — darkest value for maximum contrast and hierarchy
Body text: Body (#4D4D4D) — mid-tone gray for comfortable reading
Secondary/Tertiary text: Muted (#666666) or Faint (#8F8F8F) — progressively lighter for visual hierarchy
Borders & Dividers: Neutral 1 (#EBEBEB) — hairline 1px separators
Card backgrounds: Off-white (rgb(250, 250, 250)) — subtle lift from page white

Iteration Guide

Button hierarchy: Primary buttons are white (#FFFFFF) with {rounded.full} pill shape; secondary buttons are black (#171717). Small buttons use {rounded.xs} (4px) instead.
Typography scale: Display sizes (64px, 56px) use negative letter-spacing (-3.84px, -3.36px); body text is GeistSans at 14–16px with 0 letter-spacing. Monospace (Geist Mono) is reserved for code.
Spacing defaults: Use {spacing.md} (16px) for gutters, {spacing.lg} (20px) for card padding, {spacing.xl} (24px) for section margins, and {spacing.band} (48px) for major breaks.
Border radius: Pill-shaped buttons are {rounded.full} (9999px); small buttons, cards, and inputs use {rounded.xs} (4px); text buttons are {rounded.none} (0px).
Shadows: Use the layered-micro card shadow pattern (multi-layer, nearly transparent) for cards and elevated surfaces. Primary buttons add a hairline border (#EBEBEB) instead of shadows.
Grid & responsive: Mobile is 2 columns (375px), tablet is 3 (768px), desktop is 4–6 (1024px+). Content width scales: 327px → 720px → 976px → 1232px → 1392px.
Z-index stacking: Base = 1–2, Dropdown = 10–76, Sticky = 100. Reserve no values above 100 unless future layering demands it.
Text hierarchy via color: #171717 (primary) → #4D4D4D (body) → #666666 (muted) → #8F8F8F (faint). Do not invent intermediate grays.
Opacity scale: Employ 10%, 42%, 50%, 60%, 70%, 80%, 90%, 100% only. Use for hover states, disabled, and overlay effects.
Component patterns: Buttons (primary, secondary, small variants), cards (standard with micro-shadow), navigation (transparent bar, 64px height), forms (14px label, 4px input corners), badges (text-style, no background).

10. Known Gaps

No semantic color ramp: The site does not expose error, success, warning, or info colors in its markup. No status or feedback palette exists in this extraction.
Two decorative colors without assigned roles: {colors.neutral-1} (#EBEBEB) and {colors.neutral-2} (#C9C9C9) are used as borders or secondary decorative elements but have no specific semantic purpose; they are grouped as neutral decorative values only.
Limited interaction state coverage: Hover, focus-visible, active, and disabled states are present in the extraction but are not systematically applied to every component variant (e.g., secondary button hover state, card hover state are noted in raw data but specific color/opacity changes are not detailed for all components). Hover behavior is inferred but not fully specified for every interactive surface.
No dark mode variant: The extraction represents light-mode design only. Derived dark-mode calculations exist in the raw token data but were not shipped by the brand; they are not presented as a system feature.
Screens behind authentication not visited: The analysis covers 6 public pages. Internal dashboards, user profiles, and authenticated surfaces were not captured.
No breakpoint below 375px: Mobile behavior below iPhone SE (375px) width is unknown; exact collapse thresholds for smaller devices are not measured.
Gradient treatment incomplete: Two gradient values are present in the token data (linear-gradient to top and radial multi-circle) applied to sections as decorative blur layers, but no systematic gradient palette or role-based gradient system is defined.
Limited animation/transition data: The extraction records CSS properties but does not fully capture transition durations, easing curves, or animation keyframes. Entrance/exit behavior is not specified.

tokens:

colors:
  primary: "#FFFFFF"
  ink: "#171717"
  body: "#4D4D4D"
  muted: "#666666"
  faint: "#8F8F8F"
  on-primary: "#222222"
  neutral-1: "#EBEBEB"
  neutral-2: "#C9C9C9"

typography:
  display-xl:
    size: 64px
    weight: 400
    line-height: 1
    letter-spacing: -3.84px
    font-family: GeistSans
  display-lg:
    size: 56px
    weight: 450
    line-height: 1
    letter-spacing: -3.36px
    font-family: GeistSans
  body-xl:
    size: 24px
    weight: 450
    line-height: 1.33
    letter-spacing: -0.96px
    font-family: GeistSans
  body-xl-tight:
    size: 24px
    weight: 450
    line-height: 1.1
    letter-spacing: -1.2px
    font-family: GeistSans
  body-lg:
    size: 16px
    weight: 450
    line-height: 1.5
    letter-spacing: -0.32px
    font-family: GeistSans
  body-lg-strong:
    size: 16px
    weight: 500
    line-height: 1.5
    letter-spacing: 0px
    font-family: GeistSans
  body-md:
    size: 14px
    weight: 400
    line-height: 1.43
    letter-spacing: 0px
    font-family: GeistSans
  body-md-strong:
    size: 14px
    weight: 500
    line-height: 1.43
    letter-spacing: 0px
    font-family: GeistSans
  label:
    size: 14px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: GeistSans
  caption:
    size: 11px
    weight: 500
    line-height: 1.82
    letter-spacing: 0.2px
    font-family: GeistSans
  code-md:
    size: 14px
    weight: 400
    line-height: 1.43
    letter-spacing: 0px
    font-family: Geist Mono
  code-sm:
    size: 12px
    weight: 400
    line-height: 1.33
    letter-spacing: 0px
    font-family: Geist Mono
  code-sm-strong:
    size: 12px
    weight: 500
    line-height: 1.67
    letter-spacing: 0px
    font-family: Geist Mono
  code-xs:
    size: 11px
    weight: 400
    line-height: 1.5
    letter-spacing: 0px
    font-family: Geist Mono

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 44px
  band: 48px

rounded:
  none: 0px
  xs: 4px
  full: 9999px

shadows:
  card:
    value: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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.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"
    level: sm
  button:
    value: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px"
    level: md
  focus-ring:
    value: "rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px"
    level: lg

borders:
  hairline: 1px

opacity:
  - 0.10
  - 0.42
  - 0.50
  - 0.60
  - 0.70
  - 0.80
  - 0.90
  - 1.0

z-index:
  base: 1
  dropdown: 10, 20, 74, 75, 76
  sticky: 100

breakpoints:
  mobile: 375px
  tablet: 768px
  desktop: 1024px
  wide: 1280px
  ultrawide: 1440px

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from vercel.app

Primary

#FFFFFF

Primary CTA, brand accent, active state

Neutral

#171717

Headings / primary text

#4D4D4D

Body copy

#666666

Captions, secondary text

#8F8F8F

Tertiary / placeholder text

#222222

Label colour on brand surfaces

#EBEBEB

Neutral

#C9C9C9

Neutral

Typography · GeistSans

body14px · 500 · 20px

h164px · 400 · 64px

h256px · 450 · 56px

body14px · 400 · 20px

label14px · 400 · 21px

body24px · 450 · 32px

body24px · 450 · 26.4px

body16px · 450 · 24px

body16px · 500 · 24px

caption11px · 500 · 20px

Typography · Geist Mono

code14px · 400 · 20px

code12px · 400 · 16px

code12px · 500 · 20px

code11px · 400 · 16.5px

Spacing

4px

8px

12px

24px

16px

40px

20px

44px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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.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

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

Components · 5

Remixes of vercel.app

Latest remixes

No public remixes yet. Be the first to make one.

Remix it