Developer Tools

vercel.com

Visit

vercel.com ↗

The autonomous stack for every app and agent.

20 colors14 componentsGeistSansMulti-page · 12 screens

vercel.com — Agentic Infrastructure - Vercel

1 / 12 — Agentic Infrastructure - Vercel

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

Extracted from vercel.com

Primary

#0000

#FFF0

#7928CA

#BD5200

#0070F3

#EB367F

#50E3C2

#008D7D

Neutral

#171717

#EBEBEB

#000000

#FFFFFF

#4D4D4D

#FAFAFA

#EDEDED

#8F8F8F

Semantic

#FF9900

#F59E0B

#F5A623

#EE0000

Typography · GeistSans

h314px · 500

h514px · 400

link16px · 400

h256px · 450

h164px · 450

h164px · 400

Spacing

8px

16px

4px

12px

24px

32px

40px

20px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, rgb(250, 250, 250) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 0px 0px 1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px

Components · 14