Vercel

---
version: alpha
name: "Vercel — Monochrome geometric infrastructure"
description: "An independently described visual reference, based on the archived desktop screenshot."
colors:
  primary: "#000000"
  neutral: "#FAFAFA"
  surface: "#FFFFFF"
  muted: "#666666"
  accent: "#000000"
typography:
  display:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.03em
  body:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    lineHeight: 1.5
rounded:
  card: 6px
  button: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 96px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    padding: "{spacing.md}"
---
## Overview

A light, stark infrastructure reference. The captured desktop hero is a three-part composition: large left-aligned type and paired actions, a centered black triangle, and a short right-side capability list. A customer-logo strip separates the hero from a product use-case section. The visual identity comes from contrast and alignment, not a saturated brand palette.

Reference: https://vercel.com/ · archived screenshot: 2026-09-12T11:47:25.706998+00:00 · desktop viewport: 1440px.
This describes the captured reference, not an official brand specification. Palette,
fonts, dimensions and responsive suggestions below are **inferred implementation
starting points** from the screenshot, not extracted CSS or verified source tokens.
Do not treat partially loaded sections as intentional blank space.

To use: place this file in your repository and ask your coding agent to follow its
visual direction with the reference screenshot. Adapt the content to your product;
do not reuse source logos, photographs, illustrations or endorsements without rights.

## Colors

Use #FAFAFA for the main canvas, #000000 for primary text, and
#FFFFFF for secondary surfaces. Supporting text starts at #666666; verify
contrast at the actual size and background. The accent #000000 is selective,
not a default fill for all elements. These approximate rendered colors are not
claims of exact brand values.

## Typography

Start with Arial, Helvetica, sans-serif for display text and Arial, Helvetica, sans-serif for body copy.
The supplied font stacks are portable approximations; exact families and font
licensing were not verified. Use 64px desktop display text, 16px body and
14px labels as a starting scale. Preserve concise line lengths and clear hierarchy.
For narrow screens, reduce display text to roughly 36–42px and avoid overflow.

## Layout

At a 1440px viewport, use roughly 24px outer gutters and a wide, three-column hero. Keep the main heading around 64px with a tight line height and constrained measure. Allow about 180–240px of vertical room around the hero composition; these are implementation estimates, not source CSS. Follow with a single horizontal logo row and then a two-column use case, with a screenshot composition beside explanatory text. Large blank regions later in the archived capture may be unloaded content: do not reproduce them as intentional spacing.

Mobile layouts were not captured. Suggested adaptation, not an observed source
behavior: use 20–24px side gutters, stack split content below about 760px, preserve
text before related imagery, and let multi-column groups become one column. Keep
code samples scrollable and controls at least 44px high. Verify these decisions in
a real narrow viewport before shipping.

## Elevation & Depth

Use the page/surface contrast and subtle boundaries to establish hierarchy. Product
screenshots may depict deeper nested UI; avoid copying their internal depth rules
onto every marketing section. No live shadows, animations or transition values were
measured. Start with restrained elevation and test legibility in the chosen theme.

## Shapes

Use the 6px card-radius token as an estimate for small surface rounding.
Compact pill-like actions use the button radius; retain rectangular product imagery
where it is visually appropriate. Do not apply one oversized corner radius to every
container.

## Components

Use a small monochrome mark in a compact navigation row. Left-side navigation is low emphasis; account actions sit on the right. The primary hero action is near-black with white text and a pill silhouette; its secondary partner is quiet and pale. Product examples use thin neutral boundaries with very subtle separation from the page. Recreate generic geometric artwork and your own product interface, not Vercel or customer marks.

Hover, focus, loading and expanded states were not observable from this still
capture. Provide keyboard-visible focus, distinct disabled states and accessible
expanded controls as implementation requirements, not claims about the reference.
Do not rely on color alone to express state; honor reduced-motion preferences.

## Do's and Don'ts

Preserve the asymmetric left/center/right hero hierarchy, quiet navigation and high contrast. Keep prose short beside product examples. Do not introduce colored gradients, heavy card shadows or a dense tiled hero. Do not interpret unloaded lower-page areas as a design requirement.

Use the captured design as direction, not a pixel-perfect or legally licensed
clone. Prefer your own content and assets. Validate the file and compare your output
against the archived screenshot; refresh this guide externally when that reference
materially changes.