Vercel

Overview

Vercel's design system embodies **Minimalist Precision**—a philosophy that strips away visual noise to expose the essential mechanics of infrastructure. The brand serves developers and AI agents building autonomous systems, and the UI reflects this technical audience through geometric clarity, high-contrast monochromatic surfaces, and deliberate use of negative space. The aesthetic is deliberately austere: a near-white canvas (#fafafa) anchored by near-black text (#171717) and accented by a vibrant lime-green (#95bf47) for status and a hot pink (#de2670) for alerts. The emotional response is one of control and confidence—users feel they are operating a precision instrument, not a consumer product.

The brand voice is direct, technical, and unadorned. Sentences are short and active: "Deploy now." "Ship 26 is coming to SF." "Automated by agents." The vocabulary avoids marketing flourish—no "seamless," "powerful," or "revolutionary." Instead, the copy speaks in imperatives and facts. The tone is calm under pressure, befitting infrastructure that must be reliable. Example sentence in Vercel's voice: "Your deployment scaled from zero to 50 million requests in 14 seconds—no configuration required."

Colors

The color system is built on a **high-contrast monochromatic foundation** with surgical accent placement. Primary (#171717) is the near-black used for all interactive elements—buttons, links, and text—ensuring maximum legibility and authority. On-primary (#ffffff) provides the inverse pair for text atop dark surfaces. The surface stack ranges from #fafafa (surface, the default page background) through #e9e9e9 (surface-container, used for subtle card backgrounds) to #d4d4d4 (surface-container-highest, for elevated modals). Outline (#cccccc) is the border color for inputs and cards, creating a 1px visual boundary without visual weight.

Secondary (#95bf47), a lime-green, is reserved for success states, progress indicators, and positive affordances—it appears sparingly but unmistakably. Terti

Typography

The type system uses a single typeface family—GeistSans—across all scales, reinforcing the minimalist aesthetic. Display (64px, 400 weight, -0.02em tracking) is reserved for hero headlines like "Agentic Infrastructure," set in a light weight to convey openness and confidence. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) cascade through section titles, maintaining the same restrained weight. Body-md (16px, 400 weight, 24px line-height) is the workhorse for body copy and UI labels, set with generous line-height (1.5x) to ensure readability on screens. Label-md (14px, 500 weight) is used for button text and form labels, where the slightly heavier weight (500) provides visual emphasis without bulk. All type is left-aligned and uses negative letter-spacing (-0.01em to -0.02

Layout

The page uses a **12-column fluid grid** with a max-width of 1280px, centered on the viewport. The gutter between columns is 24px (md spacing), and the outer margins (left/right of the container) are also 24px on tablet and 40px (lg spacing) on desktop. Sections are separated by 64px (xl spacing) vertically, creating a rhythm that feels spacious without being wasteful. The hero section occupies the full viewport height on desktop, with the headline (display scale) positioned in the upper-left quadrant and a geometric accent (the black triangle) centered on the right. Below the fold, content cards and feature sections use the md spacing (24px) for internal padding and sm spacing (12px) for gaps between elements within a card. The container-max-width of 1280px ensures that on ultra-wide disp

Elevation & Depth

Depth in this system is achieved through **subtle shadow and border layering**, not through color gradation. The base layer (Level 1) is the surface (#fafafa) with no shadow. Level 2 (cards, input fields) uses a 1px solid border in outline (#cccccc) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is applied to `.card` and `.input-field` components, creating a gentle lift from the background. Level 3 (modals, dropdowns, popovers) uses a stronger shadow: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), combined with a 1px border in outline-variant (#999999). Hover states on

Shapes

The shape philosophy is **Geometric Pragmatism**—rounded corners are used sparingly and purposefully, never decoratively. Buttons use full (9999px) border-radius, creating pill-shaped affordances that are unmistakably clickable. Input fields and cards use lg (12px) or DEFAULT (6px) radius, softening the edges just enough to feel contemporary without sacrificing the technical aesthetic. The Vercel logo itself is a sharp equilateral triangle (0px radius), and this geometric motif appears throughout the UI in accent shapes and illustrations. Form elements (selects, checkboxes) use DEFAULT (6px) r

Components

Action Elements Buttons are the primary interactive primitive. The button-primary component uses a 40px height, 12px vertical padding, 24px horizontal padding, full border-radius (9999px), and label-md typography (14px, 500 weight). The background is primary (#171717), text is on-primary (#ffffff). On hover, the background transitions to primary-container (#383838) over 150ms. On active (pressed), the background becomes primary-fixed-dim (#2a2a2a). The button-secondary variant uses a transparent background with a 1px border in outline (#cccccc) and text in primary (#171717); on hover, the background becomes surface-container-high (#e0e0e0). Button-ghost is used for tertiary actions (e.g., "Skip to content") with transparent background, text in on-surface-variant (#666666), and no borde

Do's and Don'ts

**Do**

• Do use primary (#171717) for all primary CTAs and interactive text—it is the signature accent that commands attention.
• Do maintain the 24px (md) gutter between major sections and 12px (sm) between elements within a card to preserve the spacious, uncluttered aesthetic.
• Do apply full (9999px) border-radius exclusively to buttons to signal primary affordance; use 12px (lg) for cards and 6px (DEFAULT) for inputs.
• Do use secondary (#95bf47) sparingly for success states and progress; reserve tertiary (#de2670) for errors and destructive actions only.
• Do set all type in GeistSans at 400 weight for body and headlines; use 500 weight only for labels and button text to create hierarchy without visual noise.

**Don't**

• Don't use color gradients or blur effects (glassmorphism)—the aesthetic is flat, precise, and high-contrast.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12) or use multiple layered shadows; depth is achieved through borders and subtle elevation, not shadow inflation.
• Don't use rounded corners smaller than 6px or larger than 12px on cards and inputs; reserve 9999px (full) for buttons only.
• Don't mix typeface families or use weights outside the 400–700 range; GeistSans is the sole typeface, and restraint in weight variation maintains the minimalist voice.
• Don't place secondary or tertiary colors on large surfaces; they are accent colors for small, high-signal UI elements like badges and status indicators.