Next.js

Next.js brand palette — black-and-white minimal, dark-first. The Next.js triangle mark is rendered as a monochrome glyph: black on white in light mode, white on black in dark mode. There is no brand-signature hue; identity is carried by the mark, the Geist typeface, and the high-contrast monochrome treatment. Supporting Geist neutral ramps + Vercel functional hues (blue/red/amber/ green) provide UI status colors for the docs site.

17 swatches 14 light roles 14 dark roles nextjsframeworkjavascriptreactvercelmonochromedark-first

Swatches

next-black
#000000
Primary brand color — the triangle mark fill in light mode and the dark-mode canvas. Pure black.
next-white
#FFFFFF
Companion brand color — the triangle mark fill in dark mode and the light-mode canvas. Pure white.
dark-bg-100
#0A0A0A
Geist dark canvas tint used by nextjs.org dark mode.
dark-gray-100
#1A1A1A
Geist dark surface tint.
dark-gray-300
#292929
Geist dark gray for borders.
dark-gray-500
#454545
Geist dark gray for hairlines.
dark-gray-900
#A1A1A1
Geist muted text on dark.
dark-gray-1000
#EDEDED
Geist primary text on dark.
light-bg-200
#FAFAFA
Geist light layered surface.
light-gray-200
#EAEAEA
Geist light hairline border.
light-gray-600
#666666
Geist secondary text on light.
light-gray-1000
#171717
Geist primary text on light.
vercel-blue
#0070F3
Functional accent — link / focus.
vercel-blue-bright
#52A8FF
Functional accent on dark surfaces.
vercel-red
#FF6166
Functional error / destructive.
vercel-amber
#F2A60D
Functional warning.
vercel-green
#62C073
Functional success.

Mode role mappings

Light mode (14 roles)

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

Dark mode (14 roles)

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

Provenance

Source
https://nextjs.org/
License
MIT
Attribution
Next.js is MIT-licensed and maintained by Vercel, Inc. The Next.js triangle mark and word mark are property of Vercel. The brand expression is the monochrome black/white pairing visible on nextjs.org; the supporting status hues are the Geist Design System functional ramps shared with the Vercel brand atom.
Imported
2026-05-18
Notes
Next.js does not publish a standalone brand-colors document; the identity is intentionally monochrome and inherits Geist Design System functional hues from the Vercel ecosystem. The hex values for functional hues mirror the canonical values used on vercel.com.