Agentic Infrastructure

The tokens, type and surfaces of vercel.com marketing: a pure-black canvas, Geist at display weight 400 with -6% tracking, white pill CTAs, and one rationed spectrum accent.

Deploy NowGet a Demo
build
agent
deploy
canvas 2d · 917 × 611 hero animation
ACMEGLOBEXINITECHUMBRELLASTARKWAYNEHOOLIMASSIVE ACMEGLOBEXINITECHUMBRELLASTARKWAYNEHOOLIMASSIVE
Why Geist marketing

Monochrome, until it matters.

Ring, not border

Cards sit on #0a0a0a with an alpha-white 1px ring plus a soft black blur, the same ring + glow as the dashboard.

ring + glow

Pill CTAs

Marketing buttons are full pills, 40px tall, white on black. The dashboard keeps 6px radii, so the pill is a marketing-only shape.

radius 9999

100 to 150ms

Color, background and border transitions run at 100 to 150ms on a standard cubic-bezier. A 40s logo carousel is the only long loop.

cubic-bezier(.4,0,.2,1)
Production · mainREADY · 312ms
a1f9c2eDeploy edge middleware for agent routingReady · 12s
7b3d001Build cache warmed, prerendering routesBuilding · 40s
e42a8f0Preview promoted from staging branchQueued
c90bb17Rollback: revert experimental ISR flagError · 3m
Controls

Every variant and state.

Deploy Now Get a Demo Log In Deploying… ● Ready Preview edge
Search projects… acme-web⏎

Primary is a white pill (#ededed on #0a0a0a text); hover dims it slightly (marketing hover fill was not captured, so this is a generic dim). Secondary is a surface pill on an alpha-white ring that brightens on hover; ghost fades from muted to full text. Disabled drops to 40% opacity. Inputs take a 1px #1f1f1f border; focus adds the shared Geist blue-700 2px ring (#0070f3).

Typography

Size carries the hierarchy.

h1 display · GeistSans · 64/64 · 400 · -3.84pxAgentic Infrastructure
h2 · GeistSans · 56 · 450 · -3.36pxShip, preview, iterate
Body · GeistSans · 16/24 · 400Frameworks, infrastructure, and AI, on one platform.
Paragraph · GeistSans · 14/21 · 400 · #edededMuted supporting copy set at fourteen over twenty-one.
Nav link · GeistSans · 16 · 400Products · Solutions · Docs
Mono · GeistMono · technical stringsa1f9c2e · 312ms · cubic-bezier(.4,0,.2,1)
Palette

Grayscale chrome, one color moment.

Text
foreground#ededed
gray-900#a1a1a1
gray-600#878787
Surfaces & borders
canvas#000000
surface#0a0a0a
hairline#1f1f1f
card ringrgba(255,255,255,.145)
Accent & spectrum gradient
blue-700#0070f3
spectrum#00ff95 · #ffd000 · #ff1744 · #9500ff · #00e5ff
secondary gradient#ffdc30 → #38a2ff
Depth & motion

Rings and scrims, never blur.

8px control
12px card
9999 pill CTA
card ring + glow
alpha-white ring
focus ring

Shadow recipe: 0 0 0 1px rgba(255,255,255,.145), 0 1px 2px rgba(0,0,0,.16), 0 0 0 1px #000. Motion: color, background and border transitions run 100 to 150ms on cubic-bezier(.4,0,.2,1); fades at 200ms; the one ambient loop is the 40s logo-carousel marquee. No scroll-jacking, no spring physics, no backdrop blur.