Brand guidelines `#0068d6`

May 18, 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
  27 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 02

## Logo

vercel.com

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 1 secondary · 1 accent · 10 neutrals · 27 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`
`#7D7D7D`
`#A8A8A8`
`#8F8F8F`
`#EBF5FF`

### Full palette

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

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

Step | Size | Sample
--- | --- | ---
`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

- `ease-in-out`
- `custom`
- `custom`
- `ease-out`

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

- Build and deploy on the AI Cloud.
- Build and deploy on the AI Cloud.
- Your product, delivered.
- Agents

### CTA verbs

- ``×6
- ``×5
- ``×4
- ``×3
- ``×2
- ``×2
- ``×2
- ``×2

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

- `#0072f5` → `` (4.44:1)
- `#0068d6` → `` (4.13:1)

Chapter 12

## Tokens

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

CSS variables variables.css

    :root {
      --color-primary: #0068d6;
      --font-display: "Geist";
      --space-base: 2px;
      --radius-md: 5px;
    }

Tailwind config tailwind.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.