Design System
coherentDesign Method
Gallery

Vercel

vercel.com ↗

Monochrome, engineering-grade aesthetic built on near-black and off-white tones, paired with terse, agent-centric copy.

Agentic Infrastructure

What Coherent builds from this

generated · not Vercel's site

An original page Coherent generated from Vercel's tokens — its palette, type, and shape applied to fresh content. This is the output, not a screenshot of Vercel.

generated-with-coherent · vercel
A landing page generated by Coherent from Vercel's design tokens

Build on these tokens

Download the file and seed any AI tool — or install it into a real Next.js project so every generated page shares this palette, type, and shape.

Download vercel.mdthen, in your project:
$ npm i -g @getcoherent/cli
$ coherent import design vercel.md

Colour

#171717
brand · body text
#fafafa
background · body background
#ffffff
text · a text
#4d4d4d
neutral · h3 text

Typography

Families: GeistSans · GeistSans Fallback · Geist Mono · ui-monospace

display64pxw400/64px
h156pxw450/56px
h224pxw450/32px
h316pxw400/24px
body14pxw400/20px
small12pxw400/16px

Spacing

4px6px8px12px24px40px

Radius

0px
6px
8px

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, 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, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px

Gradients

linearlinear-gradient(to top in oklab, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 100%)
radialradial-gradient(circle at 0% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%)
radialradial-gradient(circle at 100% 0%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%)
radialradial-gradient(circle at 100% 100%, rgb(250, 250, 250) 0%, rgba(0, 0, 0, 0) 30%)
linearlinear-gradient(rgb(0, 255, 149) 0%, rgb(255, 208, 0) 25%, rgb(255, 23, 68) 50%, rgb(149, 0, 255) 75%, rgb(0, 229, 255) 100%)
linearlinear-gradient(90deg, rgb(255, 220, 48) 0%, rgb(56, 162, 255) 100%)
linearlinear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, lab(100 0 0) 100%)

Motion

150mscubic-bezier(0.4, 0, 0.2, 1)color
150mscubic-bezier(0.4, 0, 0.2, 1)all
300mscubic-bezier(0.4, 0, 0.2, 1)opacity
200mscubic-bezier(0, 0, 0.2, 1)height
500mscubic-bezier(0, 0, 0.2, 1)color
300mscubic-bezier(0, 0, 0.2, 1)transform
100mscubic-bezier(0.4, 0, 0.2, 1)color

Surfaces

#fafafa
page

Layout

Breakpoints
sm · 370pxmd · 500pxlg · 769pxxl · 1036px
Container widths
1440px673.343px401px100%1448px
z-index ladder
0121075100000999999999
Extracted from live CSS by Coherent (light mode). Numeric fields reflect the site at capture time; roles and the summary are inferred. Tokens and prose only — a description, not a copy.
Save vercel.md to your device

Open it on your desktop to run the CLI.