Vercel

Overview

Vercel's design system embodies **Minimalist Modernism**—a philosophy where technical precision and typographic clarity eliminate visual noise. The brand serves developers and enterprises building agentic infrastructure, and the interface reflects this audience's sophistication: a near-monochromatic palette (charcoal #171717 on off-white #fafafa) punctuated by two accent colors—a vibrant lime-green (#95bf47) for positive actions and a bold magenta (#de2670) for highlights and alerts. The emotional response is one of calm confidence: the UI never shouts, but every interactive element is unmistakably clickable and purposeful.

Vercel's voice is direct, technical, and unadorned. Sentences are active and outcome-focused: "Deploy instantly to 300+ edge locations" rather than "Experience seamless global deployment." The typography system uses a single sans-serif family (GeistSans) across all scales, with weight and size doing the heavy lifting—no decorative serifs, no script fonts, no visual flair beyond what serves function. The brand personality is that of a seasoned infrastructure engineer: precise, reliable, and slightly opinionated about what matters.

Colors

The color system operates on a **high-contrast, content-first principle**. Primary (#171717) is the near-black used for body text, buttons, and interactive elements—it reads as the brand's signature accent despite being dark, because it dominates interactive surfaces and CTAs. On-primary (#ffffff) ensures text legibility at 4.5:1 WCAG AA minimum. The surface stack (ranging from #fafafa at surface-bright to #d5d5d5 at surface-container-highest) provides subtle depth through grayscale gradations, never exceeding 15% lightness variation to maintain the minimalist aesthetic.

Secondary (#95bf47) is a lime-green deployed on success states, positive confirmations, and accent badges—it appears infrequently but commands attention when present. Tertiary (#de2670) is a vivid magenta reserved for ale

Typography

The type system uses a single typeface family—GeistSans—across all scales, with weight (400 regular, 500 medium) and size doing the semantic work. Display (64px, 400 weight, -0.02em tracking) anchors hero sections and major announcements; headline-lg (40px, 400 weight) frames section titles; body-md (16px, 400 weight, 24px line-height) is the default reading size for prose and descriptions. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons, form labels, and UI chrome. The line-height scale is generous (1.5x for body, 1.33x for headlines) to support readability on screens and reduce cognitive load. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (label-sm, 12px) when layered over busy backgrounds to ensure 3:1 contrast minimum. Letter-spacing is minimal (0e

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px (container-max), ensuring content remains readable on ultra-wide displays without excessive line lengths. The gutter is 24px (md spacing), applied consistently between columns and as the outer margin on desktop. On mobile (< 768px), the gutter reduces to 12px (sm spacing) and the grid collapses to 4 columns. White-space is semantic: lg spacing (40px) separates major sections (hero, features, testimonials); md spacing (24px) separates cards and subsections; sm spacing (12px) separates form fields and list items. The spacing scale is derived from an 8px unit, ensuring all values are multiples of 8 for pixel-perfect alignment. Container max-widths for nested components (e.g., modals, cards) are 960px or 800px, never

Elevation & Depth

Depth in Vercel's system is achieved through **subtle shadow layering and border definition**, not color darkening. Level 1 (Base/Surface): no shadow, 1px solid border at rgba(0, 0, 0, 0.08) for cards and containers. Level 2 (Elevated/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border remains 1px solid rgba(0, 0, 0, 0.12). Level 3 (Modal/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), border 1px solid rgba(0, 0, 0, 0.15). Shadows use only black with opacity (never colored shadows), and the blur radius increases with elevation (8px for Level 2, 24px for Level 3) to create perceived

Shapes

The shape philosophy is **Functional Sharpness**—rounded corners are applied sparingly and purposefully, never for decoration. Buttons use rounded.md (8px) to signal interactivity without softness; cards use rounded.lg (12px) to create visual breathing room; inputs use rounded.DEFAULT (6px) for a technical, compact feel. Full-width elements (dividers, full-bleed sections) use rounded.sm (4px) or no rounding (0px) to maintain architectural clarity. The rationale: sharp corners (6–12px) convey precision and technical sophistication, aligning with the developer audience. Avoid rounded.full (9999p

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses primary (#171717) background with on-primary (#ffffff) text, 40px height, 12px vertical / 24px horizontal padding, and rounded.md (8px). On hover, the background shifts to primary-container (#333333) with a 150ms ease-out transition. On active/press, background becomes primary-fixed-dim (#262626). **button-secondary** has a transparent background with a 1px solid outline-variant (#cccccc) border, primary text, and the same padding/height. On hover, the background becomes surface-container-low (#eeeeee) and the border becomes primary (#171717). **button-ghost** is transparent with primary text, no border, and 12px vertical / 16px horizontal padding; on hover, background becomes surface-container-low (

Do's and Don'ts

**Do**

• Do use primary (#171717) for all body text and interactive elements—it is the brand's signature color despite being dark.
• Do apply md spacing (24px) between major sections and sm spacing (12px) between form fields to maintain visual rhythm.
• Do use GeistSans at 400 weight for body and headlines; reserve 500 weight for labels and UI chrome only.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover states to signal elevation and interactivity.
• Do use secondary (#95bf47) for success states and tertiary (#de2670) for alerts—never swap them.
• Do maintain 1.5x line-height for body text (24px for 16px font) to ensure readability on screens.
• Do use rounded.lg (12px) for cards and rounded.md (8px) for buttons—never exceed 16px except for badges.
• Do apply 0.15s cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes (hover, focus, active).

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients beyond the secondary/tertiary accents.
• Don't apply shadows to default button states; shadows appear only on hover or focus to avoid visual clutter.
• Don't use letter-spacing wider than 0.02em; the brand aesthetic is dense and technical, not airy.
• Don't mix typefaces—GeistSans is the only font family; use weight and size to create hierarchy, never serif or script fonts.
• Don't apply rounded corners to text elements or typography; rounding is reserved for interactive and container elements.
• Don't exceed 1280px container max-width; content must remain readable and not stretch excessively on ultra-wide displays.
• Don't use color alone to convey meaning—always pair color with text, icons, or patterns for accessibility.
• Don't apply opacity below 60% to text; maintain WCAG AA contrast (4.5:1) for all body copy and interactive labels.