designlang
Brand guidelines #0068d6

May 15, 2026

vercel.com

A reading of the visual language at https://vercel.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
C 78/100
Tokens
26 colours · 15 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 61% confidence
Material language
material-you
Imagery style
gradient-mesh
Component library
unknown
Stack
next · Tailwind
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 10 neutrals · 26 total

Primary #0068D6
RGB
0, 104, 214
HSL
211°, 100%, 42%
Secondary #52AEFF
RGB
82, 174, 255
HSL
208°, 100%, 66%
Accent #0070F3
RGB
0, 112, 243
HSL
212°, 100%, 48%

Neutrals

#171717
#EBEBEB
#4D4D4D
#FFFFFF
#666666
#000000
#A8A8A8
#7D7D7D
#8F8F8F
#EBF5FF

Full palette

#171717
#EBEBEB
#4D4D4D
#FFFFFF
#666666
#000000
#A8A8A8
#7D7D7D
#8F8F8F
#297A3A
#0068D6
#52AEFF
#0070F3
#E5484D
#45DEC5
#EBF5FF
#FFB224
#7820BC
#CCE6FF
#067A6E
#EA3E83
#FF990A
#BF89EC
#398E4A
#FFC96B
#6CDA75

WCAG 67% · 4 passing pairs · 2 failing. Full breakdown in §11.

Chapter 04

Typography

2 families · 15 sizes · 4 weights

Display
Geist
Body
Geist Mono
Weights
400, 500, 600, 700

Specimen

Build and deploy on the AI Cloud.
Build and deploy on the AI Cloud.

Scale

StepSizeSample
t00 48px Build and deploy on the AI C
t01 40px Build and deploy on the AI C
t02 32px Build and deploy on the AI C
t03 24px Build and deploy on the AI C
t04 20px Build and deploy on the AI C
t05 18px Build and deploy on the AI C
t06 16px Build and deploy on the AI C
t07 14px Build and deploy on the AI C
t08 13px Build and deploy on the AI C
t09 12px Build and deploy on the AI C
Chapter 05

Spacing

Base 2px · 13 steps captured

Rhythm

1px
24px
32px
36px
40px
44px
48px
85px
90px
96px
Chapter 06

Shape

9 radii · 6 elevation tiers

Border radii

2px
5px
8px
16px
32px
50px

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: springy · 3 durations · 6 easings

Duration scale

90ms
160ms
300ms

Easings

Chapter 09

Components

unknown · 2 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
outline, link, tertiary
Sizes
medium, md, xs

card

Slots
heading, description, media, footer
Variants
—
Sizes
—
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

67% WCAG 2.1 contrast
4 passing · 2 failing

Failing pairs

Aa 4.44:1
Foreground
#0072f5
Background
#ffffff
Rule
AA-normal
Aa 4.13:1
Foreground
#0068d6
Background
#cce6ff
Rule
AA-normal

Suggested replacements

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #0068d6;
  --font-display: "Geist";
  --space-base: 2px;
  --radius-md: 5px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0068d6' },
      fontFamily: { display: ['Geist', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '5px' },
    },
  },
};

Run npx designlang pack vercel.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.