Skip to content
Back to extractor

Overview

Vercel's "Agentic Infrastructure" design system is a tightly controlled, grid-anchored visual language that pairs stark monochrome surfaces with precise geometric spacing. The system emphasises legibility and technical credibility through the Geist typeface family — a custom sans and mono — combined with a responsive grid system that adapts across five breakpoints. Dark and light themes are fully supported via CSS custom properties, with careful ink-on-glass surface treatments and restrained use of accent colour.

Signature traits: grid-first layout system with visible guide lines, monochrome-dominant palette with single blue accent, Geist custom typeface family (sans + mono), fluid typography using clamp(), pill-shaped interactive elements, sharp structural borders as decorative elements.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --ds-background-200 | #000000 | Page-level backgrounds | | Surface | --ds-background-100 | #0a0a0a | Card, panel, modal backgrounds | | Text Primary | --ds-gray-1000 | #ededed | Headings, primary body copy | | Text Secondary | --ds-gray-900 | #888888 | Captions, descriptions, placeholders | | Border | --ds-gray-400 | #333333 | Dividers, input outlines, guide lines | | Accent | --ds-blue-700 | #0070f3 | CTAs, toggles, focus rings, highlights | | Accent Muted | --ds-gray-alpha-400 | rgba(255,255,255,0.14) | Subtle borders, alpha overlays | | Error | --ds-red-900 | #e00 | Error states, destructive tokens | | Success | --ds-green-900 | #0a7700 | Success states, added diff lines | | Warning | --ds-amber-900 | #f5a623 | Warning states, active diff lines |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | GeistSans | 64px | 700 | 66px | -0.04em | Hero headlines | | Heading | GeistSans | 48px | 600 | 56px | clamp(-2.4px,-1px - .1vw,-.96px) | Section titles | | Sub-Heading | GeistSans | 24px | 500 | 32px | -0.96px | Card titles, impact labels | | Body | GeistSans | 1rem (16px) | 400 | 1.5 (24px) | 0em | Paragraph text | | Caption | GeistSans | 0.75rem (12px) | 400 | 1 | 0em | Labels, metadata | | Mono | Geist Mono | 0.875rem (14px) | 400 | 1.25rem | 0em | Code, data, tab labels |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.25rem (4px) | Inline icon gaps | | Spacing SM | 0.5rem (8px) | Tag padding, tight stacks | | Spacing MD | 1rem (16px) | Component internal padding | | Spacing LG | 1.5rem (24px) | Card padding (mobile), section gaps | | Spacing XL | 2rem (32px) | Section separators, page margin | | Spacing 2XL | 3rem (48px) | Cell padding (desktop grid) | | Grid Cell Padding XS | 24px | Grid cells at ≤600px | | Grid Cell Padding SM | 24px | Grid cells at 401–600px | | Grid Cell Padding MD | 40px | Grid cells at 601–960px | | Grid Cell Padding LG | 48px | Grid cells at ≥961px | | Grid Intro Padding | 135px 48px 90px | Hero/intro cells (desktop) | | Max Width | 1080px | Primary grid system max-width | | Content Container | 1248px | .container max-width | | Page Width XL | 1400px | Wider layout container | | Min Width | 368px | Grid system minimum width |

Responsive strategy: Five explicit breakpoints — xs (≤400px), sm (401–600px), smd (601–768px), md (769–960px), lg (≥961px) — mirrored in both @media queries and CSS container queries (@container). The grid system uses CSS custom properties (--grid-columns, --grid-rows, --cell-padding) that cascade through breakpoint-scoped overrides. Typography uses clamp() for fluid scaling between breakpoints.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | Border Small | var(--ds-shadow-border-small) | Cards, deployment items, code blocks | | Small | var(--ds-shadow-small) | Offset cards, inline CTAs, framework cards | | Menu | var(--ds-shadow-menu) | Navigation dropdowns, cookie banners | | Modal | var(--ds-shadow-modal) | Dialog overlays | | Tooltip | var(--ds-shadow-tooltip) | Video controls, floating elements | | Focus Ring | 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--form-focus-color) | Interactive focus states | | Book Shadow | 0 1.8px 3.6px #0000000d, 0 10.8px 21.6px #00000014, inset 0 -.9px #0000001a, inset 0 1.8px 1.8px #ffffff1a, inset 3.6px 0 3.6px #0000001a | 3D book component |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Sharp-edged structural elements, grid borders | | sm | 6px | Input fields, badges, cards, event cards, inline CTAs | | md | 12px | Navigation dropdowns, modals, comment bubbles, deployments list | | lg | 1.5rem (24px) | Large rounded containers (--radius-3xl) | | pill | 128px | Buttons, tags, toggle switches, CTA components | | full | 9999px | Avatar badges, icon circles, status dots, navigation triggers |

Components

Buttons: Three primary variants — primary (dark fill), secondary (bordered), custom (CSS variable driven). Standard height 32px (sm), 40px (md), 48px (lg, default CTA). Border-radius 128px (pill) is the standard. Morphing width animation on CTAs via transition: width var(--width-duration). Focus states use double-ring: 2px background gap + 4px accent ring.

Navigation: Sticky header with --header-zindex CSS variable. Desktop nav uses Radix Navigation Menu with 3D perspective dropdown (rotateX keyframe animations). Mobile nav is a full-screen overlay toggled by a 32px circular hamburger button that animates bars to X. Header can "grow" on scroll via canGrow modifier expanding from 64px to 100px.

Grid System: Proprietary gridSystem component with guide lines, cross markers, and dashed border variants. Supports debug overlay mode. All grid cells use CSS custom properties for row/column placement, allowing single markup to serve all breakpoints.

Code Blocks: Full Shiki/Prism token styling via CSS custom properties (--shiki-token-*). Line numbers, highlighted lines (blue), added lines (green), removed lines (red), active lines (amber). Monospaced, 20px line height, 13px font size for line numbers.

Tabbed Code Block: Vertical tab strip on desktop (active tab has 2px left accent bar), horizontal scrolling tabs on mobile. Active tab creates 1px overlap to hide border seam.

Forms: 48px input height (desktop), 40px (mobile). Box-shadow border approach (no actual borders). Focus state uses var(--ds-focus-border). Phone input with country selector uses compound shadow layering for left divider.

Animations: Extensive keyframe library — slide-in, fade-in, flip-front/back, logo-carousel, marquee, thinking-loader, sandbox-left/right, cmdkFadeIn/ScaleIn, accordion-down/up. Motion respects prefers-reduced-motion. Enter animations use --tw-enter-* custom properties.

Toggle/Switch: 40px wide × 26px tall. Blue fill (var(--ds-blue-700)) when checked, light gray when unchecked. Circular thumb transitions with translate + CSS custom property for diameter.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use GeistSans for all UI text and Geist Mono for all code/data display | Mix in system fonts or web-safe fallbacks as primary faces | | Apply clamp() fluid values for typography that scales across the full breakpoint range | Use fixed px font sizes for display/heading text without fluid fallbacks | | Use the grid cell padding scale (24/40/48px) for all container inner spacing | Use arbitrary padding values outside the defined cell padding breakpoint cascade | | Render interactive borders via box-shadow to allow border-radius without clipping | Use CSS border for focus rings or compound border states | | Apply 9999px border-radius for pill buttons, tags, and badge elements | Use 50% for non-square pill shapes or inconsistently round buttons | | Use var(--ds-gray-alpha-400) for subtle borders that work in both themes | Hard-code rgba() alpha values for border/overlay colours | | Scope theme changes via .dark-theme / .light-theme class on a parent element | Use @media (prefers-color-scheme) as the sole theming mechanism | | Use text-wrap: balance for headings and text-wrap: pretty for body paragraphs | Let long headings break awkwardly without wrap hinting | | Keep z-index values on the defined scale (--header-zindex, 10, 20, 50, 100, 1000, 5000, 99999) | Introduce arbitrary z-index values outside the documented scale | | Use contain: layout` on lazy-loaded content wrappers to prevent layout shift | Render deferred content without layout containment |

Agent Prompt Guide

You are working within the Agentic Infrastructure design system. Key constraints:

  • —Colors: background var(--ds-background-200)/#000, surface var(--ds-background-100)/#0a0a0a, text-primary var(--ds-gray-1000)/#ededed, text-secondary var(--ds-gray-900)/#888, border var(--ds-gray-400)/#333, accent var(--ds-blue-700)/#0070f3
  • —Typography: GeistSans for all UI text (display 64px/700, heading 48px/600, body 16px/400); Geist Mono for all code/data (14px/400). Use clamp() for fluid display and heading sizes.
  • —Spacing: use the token scale only — xs 4px, sm 8px, md 16px, lg 24px, xl 32px, 2xl 48px. Grid cell padding follows breakpoint cascade: 24px (≤600px), 40px (601–960px), 48px (≥961px).
  • —Radius: 6px for inputs/cards, 12px for modals/dropdowns, 128px/9999px for pills and avatars. Never use arbitrary radius values.
  • —Borders: always via box-shadow (0 0 0 1px ...) for interactive elements; use var(--ds-gray-alpha-400) for subtle borders.
  • —Elevation: use var(--ds-shadow-border-small) for cards, var(--ds-shadow-small) for raised elements, var(--ds-shadow-menu) for dropdowns, var(--ds-shadow-modal) for overlays.
  • —Theming: scope dark/light via .dark-theme / .light-theme parent classes and CSS custom properties. Never hardcode color hex values in components.
  • —Animation: prefer the defined keyframe library (fade-in, slide-in, flip-front/back). Always respect prefers-reduced-motion by pausing or disabling animations.
  • —Never use colors, fonts, spacing, or radius values outside this design system.