Vercel Inspired Design System

Overview

Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white {colors.canvas-soft} (#fafafa) body background, ink-near-black {colors.ink} (#171717) text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces color at marketing scale is the multi-stop mesh gradient ({colors.gradient-develop-start} #007cf0 → {colors.gradient-preview-end} #ff0080 → {colors.gradient-ship-start} #ff4d4d → {colors.cyan} #50e3c2 / magenta / amber) that floats in atmospheric backdrops, never miniaturized to a swatch. That gradient is the entire decoration system.

Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (-2.4px at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.

Surfaces use a four-step ladder: {colors.canvas} (#ffffff pure white for cards), {colors.canvas-soft} (#fafafa 98% — the page body), {colors.canvas-soft-2} (#f5f5f5 95% occasional inset region), {colors.primary} (#171717 deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from 0px 1px 1px #00000005 + 0px 2px 2px #0000000a + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow.

Key Characteristics:

• A single black-ink primary CTA {colors.primary} (#171717) carries every conversion target, paired with white-on-white button-secondary for the secondary action. The brand uses 100 px pill shape for marketing CTAs and a tight 6 px square shape for in-app nav buttons.
• A multi-stop mesh gradient (cyan-blue-magenta-amber) is the only decorative chrome — used at hero scale and inside feature-band atmospheric backdrops. It is the brand.
• Every section eyebrow and small label uses the monospace face {typography.caption-mono} or {typography.code}; everything else is in the geometric sans.
• Subtle stacked-shadow elevation — three offsets layered with 4-12 % black opacity — never a single heavy drop-shadow.
• A complete 100–1000 gray + blue + red + amber + green + teal + purple + pink color scale exists as a system token set, but the marketing surface uses only the 100, 1000, and 700-level tones; the rest stay in the design-system tokens for in-product surfaces.
• An "Active CPU" pricing rhythm: pricing-card lays out 3-up on the pricing page with pricing-card-featured (Pro tier) polarity-flipped to {colors.primary} (#171717) against white-card siblings.

Colors

Brand & Accent

• Ink ({colors.primary} — #171717): The single primary CTA color. Black-near-pure ink that carries every Sign Up pill, every footer CTA, the dark-band polarity-flip. Used as text color throughout the page on light surfaces. (Resolved from --ds-gray-1000.)
• Cyan ({colors.cyan} — #50e3c2): A signature mint-cyan used in the brand gradient and inside Geist-system spotlight tokens. Visible inside the hero gradient stops.
• Highlight Pink ({colors.highlight-pink} — #ff0080): The brand's highlight magenta, used as the high-saturation stop in the preview-gradient pair.
• Violet ({colors.violet} — #7928ca): The deep purple used as the start of the preview-gradient and inside developer-console highlights.
• Link Blue ({colors.link} — #0070f3): The brand's primary link color and the legacy --geist-success semantic.

Surface

• Canvas ({colors.canvas} — #ffffff): The pure-white card / dialog / modal surface.
• Canvas Soft ({colors.canvas-soft} — #fafafa): The default page background — 98 % white. Almost every section sits on this tone.
• Canvas Soft 2 ({colors.canvas-soft-2} — #f5f5f5): A slightly deeper inset surface for "code editor inner background", template-card hover states, and dropdown menus.
• Hairline ({colors.hairline} — #ebebeb): 1 px dividers — table rows, card borders, input borders.
• Hairline Strong ({colors.hairline-strong} — #a1a1a1): The 500-level gray, used as the slightly-stronger divider on light bands and as the deemphasized text color.

Text

• Ink ({colors.ink} — #171717): Every heading and body paragraph on light surfaces.
• Body ({colors.body} — #4d4d4d): Secondary text — sub-headings, body captions, nav-link inactive text, footer column body.
• Mute ({colors.mute} — #888888): Lowest-priority text — placeholder text, fine print, low-key labels.
• On Primary ({colors.on-primary} — #ffffff): All text on {colors.primary} (#171717) surfaces.

Semantic

• Success / Link ({colors.success} — #0070f3): The brand's legacy success indicator doubles as the primary link color. Visible underline-on-hover for inline body links.
• Link Deep ({colors.link-deep} — #0761d1): The pressed / visited tone for inline links.
• Link Bg Soft ({colors.link-bg-soft} — #d3e5ff): Soft pastel blue fill for "what's new" pill banners and informational badges.
• Error ({colors.error} — #ee0000): Validation red for destructive actions and form errors.
• Error Soft ({colors.error-soft} — #f7d4d6): Soft pastel red for destructive-state backgrounds.
• Error Deep ({colors.error-deep} — #c50000): Pressed / deep destructive state.
• Warning ({colors.warning} — #f5a623): Caution / pending status indicator.
• Warning Soft ({colors.warning-soft} — #ffefcf) / Warning Deep ({colors.warning-deep} — #ab570a): Background + pressed variants.

Brand Gradient

The brand's signature decoration is a three-pair gradient stack:

• Develop ({colors.gradient-develop-start} #007cf0 → {colors.gradient-develop-end} #00dfd8) — the blue-to-teal pair used to mark the "deploy" / "develop" rhythm.
• Preview ({colors.gradient-preview-start} #7928ca → {colors.gradient-preview-end} #ff0080) — the violet-to-pink pair used for "preview" surfaces.
• Ship ({colors.gradient-ship-start} #ff4d4d → {colors.gradient-ship-end} #f9cb28) — the coral-to-amber pair used for "ship" surfaces.

The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single color, do not reorder the stops, and do not miniaturize. Used at hero scale only.

Typography

Font Family

Two custom faces carry the entire system:

1. A custom geometric sans (extracted as Geist) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (-2.4 px at 48 px hero, -1.28 px at 32 px section); body stays at neutral or slightly-negative tracking.
2. A custom monospaced face (extracted as Geist Mono) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.

A condensed display sans (Space Grotesk) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.

Hierarchy

Principles

• Negative tracking is part of the voice. Display sizes use aggressive -2.4 to -0.6 px tracking. Reverting to default tracking breaks the brand.
• Sentence-case headlines, period-terminated. Headlines like "Build and deploy on the AI Cloud." end with a deliberate period — that punctuation is part of the brand's voice.
• Mono for the technical layer only. Section eyebrows, code blocks, terminal mockups. Body paragraphs never set in mono.
• Weight 600 is the display ceiling. The geometric sans never appears at 700 / 800. The brand reads as a calmer system because of this.

Note on Font Substitutes

The two primary faces are proprietary (custom-cut for the brand). Open-source substitutes:

• Geometric sans — Inter (400 / 500 / 600) is the closest stylistic match; font-feature-settings: "ss01", "ss02" enables the geometric alternates. Satoshi is a passable second choice.
• Monospace — JetBrains Mono (400) at 12 – 13 px matches the technical voice. IBM Plex Mono is the second-best option.

Layout

Spacing System

• Base unit: 4 px. The brand's --geist-space token is exactly 4 px and every captured value is a multiple of 4.
• Tokens: {spacing.xxs} 4 px · {spacing.xs} 8 px · {spacing.sm} 12 px · {spacing.md} 16 px · {spacing.lg} 24 px · {spacing.xl} 32 px · {spacing.2xl} 40 px · {spacing.3xl} 48 px · {spacing.4xl} 64 px · {spacing.5xl} 96 px · {spacing.6xl} 128 px · {spacing.section} 192 px.
• Section padding: marketing bands use {spacing.4xl} to {spacing.5xl} top/bottom. Hero bands stretch to {spacing.section} to give the mesh gradient room to breathe.
• Card interior padding: marketing cards sit at {spacing.lg} to {spacing.xl}; template-grid cards stay tighter at {spacing.md} because they sit in a denser grid.
• Inline gap: button rows, nav rows, and chip rows use {spacing.sm} to {spacing.md} between siblings. The brand's --geist-gap is exactly 24 px.

Grid & Container

• Max width: ~1400 px (--ds-page-width); the legacy --geist-page-width is 1200 px and still appears on some marketing surfaces. Content centers with horizontal gutters of {spacing.lg} 24 px on desktop, {spacing.md} 16 px on mobile.
• Column patterns:
  • Three-feature row: 3-up at desktop, 1-up at mobile (rows like "Web Apps / Composable Commerce / Multi-tenant Platforms").
  • Tab pill row: 5-up centered row of tab-ghost pills.
  • Template-grid cluster: 5-up at desktop, scaling to 1-up at mobile.
  • Pricing tier grid: 3-up at desktop with the middle tier polarity-flipped.
  • Logo strip: ~5 logos wide, single row.

Whitespace Philosophy

The mesh gradient does most of the heavy decorative lifting; whitespace separates the bands. Section spacing is generous — {spacing.4xl} to {spacing.5xl} between bands lets the gradient breathe. Inside a card, the headline/paragraph stack is tight ({spacing.xs} 8 px gap), then a wider gap before the CTA cluster. The page reads as engineered — large gaps + tight interior, never the other way around.

Responsive Strategy

Breakpoints

Touch Targets

The button-primary pill renders at ~32 px tall in nav and ~48 px tall in marketing contexts. Marketing CTAs comfortably meet WCAG AAA at all breakpoints; nav buttons inflate touch area through {spacing.xs} padding on mobile to meet the 44 × 44 px floor.

Collapsing Strategy

• Nav: full link row + Ask AI / Log In / Sign Up pills at desktop. Collapses to logo + hamburger at mobile with the menu opening as a full-overlay.
• Hero: mesh gradient stays centered; headline + body stack vertically at all breakpoints (the brand doesn't use a split-hero pattern).
• Three-feature row: 3-up → 2-up → 1-up at the breakpoints above; cards keep their {rounded.md} 8 px shape across all viewports.
• Pricing card grid: 3-up at desktop, vertical stack at mobile with pricing-card-featured always sitting in the middle.
• Template grid: 5-up → 3-up → 2-up → 1-up. Each template-card keeps its 16:9 aspect on the image.

Image Behavior

• Mesh gradient: rendered as inline SVG or canvas-painted gradient; scales fluidly with the hero container; never crops, never tiles.
• Customer logos: rendered as monochrome SVGs in the logo strip; consistent 24 px height.
• Code editor mockup: dark {colors.primary} (#171717) rectangle with mono text rendered inside; treated as an image at the layout level.
• Template thumbnails: 16:9 landscape inside {rounded.md} card chrome; lazy-loaded; consistent grayscale palette in the placeholder state.

Elevation & Depth

The brand uses STACKED shadows — multiple small offsets layered to fake natural light — never a single 8-px-blur generic drop. Inset hairline rings are always added so the card edge stays crisp.

Decorative Depth

• Mesh gradient as atmospheric depth: the hero's multi-stop gradient is the brand's only "atmospheric" effect — applied as a flat 2-D backdrop rather than a 3-D illustration.
• Polarity-flipped dark band as section-depth: switching the surface from {colors.canvas-soft} (#fafafa) to {colors.primary} (#171717 the deep ink) is the brand's chief depth cue between bands.
• Inset-shadow + drop-shadow combo: the cards' combination of an inset 1 px ring and a multi-stop drop produces a "card sits on the page" effect without ever feeling material-heavy.

Shapes

Border Radius Scale

Photography Geometry

• Mesh gradient: full-bleed 2-D atmospheric backdrop, never cropped to a frame; treated as the page's wallpaper.
• Customer logos: monochrome SVG, consistent 24 px height in a flex row.
• Code editor mockup: 16:10 dark rectangle, {rounded.md} corners.
• Template thumbnails: 16:9 landscape inside {rounded.md} chrome.
• Showcase imagery: 2:1 or 16:9 inside {rounded.lg} to {rounded.xl} chrome with a stacked shadow.

Components

Buttons

button-primary — the canonical 100-px-radius black pill, marketing scale.

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), label set in {typography.button-lg}, padding 0px {spacing.sm} 12 px, shape {rounded.pill} 100 px. Renders ~48 px tall when paired with the marketing flex layout.

button-secondary — the white pill paired with the black primary inside marketing bands.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), same typography + padding as button-primary, shape {rounded.pill}.

button-primary-sm — the smaller-scale primary pill used inside nav and pricing-card CTAs.

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), label set in {typography.button-md} (14 px / 500), shape {rounded.pill}.

button-secondary-sm — the smaller-scale white pill paired with button-primary-sm.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), same typography + shape as button-primary-sm.

tab-ghost — the centered-row tab pill ("AI Apps / Web Apps / Ecommerce / Marketing / Platforms").

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), label set in {typography.body-sm}, padding 0px {spacing.md}, shape {rounded.pill-sm} 64 px.

icon-button-circular — the circular icon container (often a "?" or arrow inside).

• Background {colors.canvas} (#ffffff), dark icon, 1 px solid hairline border, shape {rounded.full}.

Nav CTAs:

nav-cta-signup — the small black "Sign Up" button in the nav row.

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), label {typography.body-sm-strong}, padding 0px {spacing.xs}, height 28 px, shape {rounded.sm} 6 px (the brand's --geist-radius).

nav-cta-login — the white "Log In" button in the nav.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), same typography / height / shape as nav-cta-signup.

nav-cta-ask-ai — the small "Ask AI" button with a faint border.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), 1 px solid {colors.hairline} (#ebebeb) border (extracted as 0px solid rgb(235, 235, 235)), same typography / height / shape.

Cards & Containers

card-marketing — the canonical marketing feature card (3-up section cards).

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), padding {spacing.lg} 24 px, shape {rounded.md} 8 px (the --geist-marketing-radius). Carries Level 3 soft-stack shadow.

card-marketing-large — the larger marketing card used for "compute model" / "AI Gateway" callouts.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), padding {spacing.xl}, shape {rounded.lg} 12 px. Carries Level 4 float-stack shadow.

card-soft — the soft-tinted card used inside cluster groups (lighter than canvas-soft).

• Background {colors.canvas-soft} (#fafafa), text {colors.ink} (#171717), padding {spacing.lg}, shape {rounded.md}.

template-card — the deploy-template card in the "Deploy your first app" grid.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), padding {spacing.md} 16 px, shape {rounded.md} 8 px. Hosts a 16:9 thumbnail at the top.

code-editor-mockup — the dark code-preview surface inside marketing bands.

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), body in {typography.code} (13 px / Geist Mono), padding {spacing.lg} 24 px, shape {rounded.md} 8 px.

pricing-card — the default pricing-tier card.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), padding {spacing.xl} 32 px, shape {rounded.lg} 12 px. Inside: tier name in {typography.display-md}, price in {typography.display-xl}, feature list in {typography.body-md} rows, CTA at the bottom.

pricing-card-featured — the polarity-flipped "Pro" tier card.

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), same shape + padding as pricing-card. CTA inverts to button-secondary-sm (white pill on black card).

Inputs & Forms

form-input — the canonical text input.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), 1 px solid {colors.hairline} (#ebebeb) border, body in {typography.body-sm} (14 px), padding 0px {spacing.sm}, height 40 px (the brand's --geist-form-height), shape {rounded.sm} 6 px.

form-input-sm — small-height variant (32 px tall) for tight forms.

• Same as form-input but height 32 px (the --geist-form-small-height).

form-input-lg — large-height variant (48 px tall) for hero CTAs.

• Same as form-input but height 48 px (the --geist-form-large-height); body in {typography.body-md} 16 px.

Navigation

nav-bar — the sticky top nav.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), height 64 px (the brand's --header-height), padding {spacing.sm} {spacing.lg}. Layout: logo left, link row center, "Ask AI / Log In / Sign Up" cluster right.

nav-link — the centered link row inside nav-bar.

• Text {colors.body} (#4d4d4d), set in {typography.body-sm}, padding {spacing.xs} {spacing.sm}, shape {rounded.full} (ghost pill — visible only on hover or active, but the radius is documented).

footer — the bottom 4-column nav.

• Background {colors.canvas} (#ffffff), text {colors.body} (#4d4d4d), padding {spacing.4xl} {spacing.lg}. Eyebrow column labels in {typography.caption-mono} (uppercase mono effect); link rows in {typography.body-sm}.

Signature Components

hero-band — the white hero with the mesh gradient backdrop.

• Background {colors.canvas} (#ffffff) (or {colors.canvas-soft} #fafafa on some surfaces), text {colors.ink} (#171717), padding {spacing.4xl} {spacing.lg}. Inside: a small mono badge above the headline, the headline in {typography.display-xl} (sentence-case, period-terminated), a body lead in {typography.body-lg}, then a CTA row with button-primary + button-secondary. The mesh gradient sits behind, scaled to occupy roughly the top half of the band.

feature-mesh-band — the secondary section that hosts a mesh-gradient atmospheric backdrop with feature copy on top.

• Background {colors.canvas} (#ffffff), text {colors.ink} (#171717), padding {spacing.5xl} {spacing.lg}. Section headline in {typography.display-lg}; supporting body in {typography.body-md}.

showcase-band-light — a soft-canvas section ("Deploy your first app in seconds").

• Background {colors.canvas-soft} (#fafafa), text {colors.ink} (#171717), padding {spacing.5xl} {spacing.lg}.

showcase-band-dark — the polarity-flipped dark band ("A compute model for all workloads").

• Background {colors.primary} (#171717), text {colors.on-primary} (#ffffff), padding {spacing.5xl} {spacing.lg}. Section headline in {typography.display-lg} (white on black). Often contains a code-editor-mockup flush with the band.

logo-strip — the customer-logo wrapping row near the top of the page.

• Background {colors.canvas} (#ffffff), text {colors.body} (#4d4d4d), padding {spacing.lg} {spacing.xl}. Logos rendered as monochrome SVGs at consistent height.

badge-secondary — the small inline metadata pill ("New", "Beta", "Live").

• Background {colors.canvas-soft} (#fafafa), text {colors.body} (#4d4d4d), body in {typography.caption}, padding 0px {spacing.xs}, shape {rounded.full}.

banner-marketing — the "Introducing X" announcement pill at the top of pages.

• Background {colors.canvas-soft} (#fafafa), text {colors.body} (#4d4d4d), body in {typography.body-sm}, padding {spacing.xs} {spacing.sm}, shape {rounded.full}.

link-inline — body-copy inline links.

• Text {colors.link} (#0070f3), body in {typography.body-md}, underlined.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

Known Gaps

• Hover-state colors: The brand uses subtle hover transitions on nav links and cards (typically a faint background fill shift toward {colors.canvas-soft-2} #f5f5f5), but precise per-component hover tokens are not captured here.
• Focus rings: Form inputs darken their border on focus, but the exact focus-ring color and width (whether {colors.link} #0070f3 or an ink-tinted ring) is not documented.
• Loading skeletons: Vercel's skeleton placeholders (used in dashboard tables and template grids) shimmer in {colors.canvas-soft-2} #f5f5f5 to {colors.hairline} #ebebeb, but the animation timing and stop tokens are not captured.
• Dashboard / in-product surfaces: This DESIGN.md covers the public marketing page. The Vercel dashboard's denser inner surfaces — deployment tables, log viewers, project sidebars — use the same {colors.primary} #171717 + Geist Mono vocabulary but with tighter spacing and additional gray-scale steps not captured here.
• Full gray scale: The 100–1000 gray scale (and the parallel blue / red / amber / green / teal / purple / pink scales) exists as a system token set, but only the marketing-surface tones (100, 1000, 700-level) are documented; the in-product step values are not.