Vercel (Geist)

Vercel's brand palette, captured directly from the Geist Design System tokens published on the live vercel.com stylesheet. The brand is unambiguously dark-first and largely monochromatic — pure black canvas, pure white foreground, ten-stop neutral scales — with a small set of functional hue ramps (blue, red, amber, green) reserved for status and the documentation surface. Vercel's classical accent blue (#0070F3, ds-blue-600 in Geist) remains the de facto product link color even though the marketing site itself emphasizes the monochrome treatment.

24 swatches 15 light roles 15 dark roles vercelgeistdesign-systemdark-firstmonochromebrand

Swatches

vercel-black
#000000
Pure black — the canvas of the marketing site.
vercel-white
#FFFFFF
Pure white — the foreground of the marketing site.
dark-bg-100
#0A0A0A
ds-background-100 (hsl 0,0%,4%) — page canvas in dark mode.
dark-bg-200
#000000
ds-background-200 — deeper canvas / under-page.
dark-gray-100
#1A1A1A
ds-gray-100 — subtle surface tint.
dark-gray-200
#1F1F1F
ds-gray-200.
dark-gray-300
#292929
ds-gray-300.
dark-gray-400
#2E2E2E
ds-gray-400.
dark-gray-500
#454545
ds-gray-500 — borders.
dark-gray-600
#878787
ds-gray-600.
dark-gray-700
#8F8F8F
ds-gray-700.
dark-gray-800
#7D7D7D
ds-gray-800.
dark-gray-900
#A1A1A1
ds-gray-900 — muted text.
dark-gray-1000
#EDEDED
ds-gray-1000 — primary text in dark mode.
light-bg-100
#FFFFFF
Page canvas in light mode.
light-bg-200
#FAFAFA
Subtle layered surface.
light-gray-200
#EAEAEA
Hairline border.
light-gray-600
#666666
Secondary text.
light-gray-1000
#171717
Primary text in light mode (rgb 23,23,23 — body color on vercel.com).
vercel-blue
#0070F3
ds-blue-600 — the classic Vercel link / accent blue.
vercel-blue-bright
#52A8FF
ds-blue-900 — bright link blue used on dark surfaces.
vercel-red
#FF6166
ds-red-900 — error / destructive.
vercel-amber
#F2A60D
ds-amber-900 — warning.
vercel-green
#62C073
ds-green-900 — success.

Mode role mappings

Light mode (15 roles)

accent → vercel-blue
accent-hover → vercel-blue-bright
background → light-bg-200
border → light-gray-200
error → vercel-red
primary → vercel-black
primary-hover → light-gray-1000
success → vercel-green
surface → light-bg-100
surface-elevated → light-bg-100
text-primary → light-gray-1000
text-secondary → light-gray-600
text-tertiary → dark-gray-600
warning → vercel-amber
warning-hover → vercel-amber

Dark mode (15 roles)

accent → vercel-blue-bright
accent-hover → vercel-blue
background → dark-bg-100
border → dark-gray-500
error → vercel-red
primary → vercel-white
primary-hover → dark-gray-1000
success → vercel-green
surface → dark-gray-100
surface-elevated → dark-gray-200
text-primary → dark-gray-1000
text-secondary → dark-gray-900
text-tertiary → dark-gray-700
warning → vercel-amber
warning-hover → vercel-amber

Provenance

Source
https://vercel.com/geist/colors
License
Proprietary — All Rights Reserved
Attribution
Vercel, Inc. — palette values captured from the live Geist Design System CSS variables on vercel.com (--ds-* token family). HSL values are documented upstream; the hex values below resolve those HSL declarations. Geist Design System and the Vercel marks are property of Vercel, Inc.
Imported
2026-05-17
Notes
Resolved hex values from the Geist HSL token declarations captured in the deployed stylesheet on vercel.com. The dark scale shown here is the production dark-mode rendering; the light scale provides a sensible inversion using the Geist light-mode background ramp.