← Gallery

extracted · 27 artefacts

vercel.com

Live extraction of https://vercel.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 27 files
17colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 27 artefacts for vercel.com and renders 12+ sections below.

See full comparison ↗
5,138 charsbrand book ↗
---
site: "Vercel: Build and deploy the best web experiences with the AI Cloud"
url: "https://vercel.com"
generated_at: "2026-05-14T22:16:23.740Z"
generator: "designlang@12.11.0"
intent: landing
material: material-you
tokens:
  colors:
    primary: "#0068d6"
    secondary: "#52aeff"
    accent: "#0070f3"
    background: "#fafafa"
    foreground: "#171717"
  typography:
    sans: Geist
    mono: Geist Mono
    base: 16
  spacing:
    base: 2
    scale: "[1, 24, 32, 36, 40, 44, 48, 85, 90, 96]"
  radii:
    xs: 2
    sm: 5
    md: 8
    lg: 16
    full: 50
  shadows:
    sm: "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px"
---

# Overview

A **landing** page (heuristic confidence 0.61), dressed in **material-you** material (0.45).

> "Build and deploy on the AI Cloud."

The author writes in a **neutral** voice; headings tend to be **Title Case** case and **tight**.

Reading order detected on the source: `feature-grid → hero → sidebar → nav → feature-grid → hero → feature-grid → feature-grid → nav → nav → nav → nav → nav → feature-grid → feature-grid → feature-grid → cta → feature-grid → feature-grid → feature-grid → footer → nav`.

Source: <https://vercel.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#0068d6` | 4 |
| secondary | `#52aeff` | 4 |
| accent | `#0070f3` | 3 |
| background | `#fafafa` | — |
| foreground | `#171717` | — |

**Neutrals:** `#171717` · `#ebebeb` · `#4d4d4d` · `#ffffff` · `#666666`

**Total unique colors detected:** 27.

# Typography

**Families**
- `Geist` · 2731 uses
- `Geist Mono` · 312 uses

**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `48px` | `600` | `48px` |
| h2 | `40px` | `600` | `48px` |
| h3 | `32px` | `400` | `48px` |
| h4 | `24px` | `600` | `32px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `24px` · `32px` · `36px` · `40px` · `44px` · `48px` · `85px` · `90px` · `96px`

**Layout primitives:** 56 grid containers · 498 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px`
- `sm` — `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`
- `sm` — `rgb(235, 235, 235) 0px 0px 0px 1px`
- `sm` — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- `sm` — `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`
- `sm` — `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, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px`

**Z-index layers:** 14 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `sm` — `5px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `32px`
- `full` — `50px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `dropdowns` · `badges` · `tabs` · `tooltips` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | outline, link, tertiary | medium, md, xs | 64 |
| card | — | — | 6 |

# Do's and Don'ts

**Do's**
- Use `get`, `sign`, `learn` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 2 contrast pair(s) fail WCAG AA on the source itself.
- Don't 2 wcag contrast failures.
- Don't 1193 !important rules — prefer specificity over overrides.
- Don't 11518 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://vercel.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

Geist
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · neutral · you-only

top CTA verbs

get×6sign×5learn×4start×3log×2ai×2deploy×2enterprise×2

Motion

Durations and easing curves captured from real CSS transitions.

durations

xs90ms
sm160ms
md300ms

easings

  • ease-in-outease
  • custom-900cubic-bezier(0.4, 0, 0.2, 1)
  • custom-320cubic-bezier(0.39, 0.18, 0.17, 0.99)
  • ease-out-254cubic-bezier(0.14, 0.55, 0.3, 0.92)
  • spring-292cubic-bezier(0.31, 0.05, 0.43, 1.02)
  • custom-147cubic-bezier(0.33, 0.12, 0.15, 1)

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

793 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'outline' | 'link' | 'tertiary';
  size?: 'medium' | 'md' | 'xs';
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'outline', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface CardProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Card({ variant = 'default', size = 'md', ...rest }: CardProps) {
  return React.createElement('div', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

108
total icons
0
stroke-only
92
fill-only
2.05
avg stroke
—
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://vercel.com
{
  "colors": {
    "all": [
      {
        "hex": "#171717",
        "rgb": {
          "r": 23,
          "g": 23,
          "b": 23,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 9
        },
        "count": 2954,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#ebebeb",
        "rgb": {
          "r": 235,
          "g": 235,
          "b": 235,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 92
        },
        "count": 2342,
        "contexts": [
          "border",
          "background"
        ]
      },
      {
        "hex": "#4d4d4d",
        "rgb": {
          "r": 77,
          "g": 77,
          "b": 77,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 30
        },
        "count": 567,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 123,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#666666",
        "rgb": {
          "r": 102,
          "g": 102,
          "b": 102,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 40
        },
        "count": 67,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 0.08
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 49,
        "contexts": [
          "border"
        ]
      },
      {
        "hex": "#7d7d7d",
        "rgb": {
          "r": 125,
          "g": 125,
          "b": 125,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 49
        },
        "count": 20,
        "contexts": [
          "text"
        ]
      },
      {
        "hex": "#a8a8a8",
        "rgb": {
          "r": 168,
          "g": 168,
          "b": 168,
          "a": 1
        },

Prompt pack

Paste-ready prompts pre-loaded with the vercel.com system, for v0, Lovable, Cursor and Claude Artifacts.

v01,636 chars
Build a landing page with this exact visual language.
COLORS:
  #171717
  #ebebeb
  #4d4d4d
  #ffffff
  #666666
  #000000
  #7d7d7d
  #a8a8a8
  #8f8f8f
  #0068d6
  #52aeff
  #0070f3
  #e5484d
  #45dec5
FONTS: [object Object], [object Object]
SPACING: 1, 24, 32, 36, 40, 44, 48, 85
RADIUS: 2, 5, 8, 16, 32, 50
SHADOWS: 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(255, 255, 255) 0px 0px 0px 2px, rgb(0, 114, 245) 0px 0px 0px 4px | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0,…
Lovable1,472 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: material-you. Tone: neutral · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #171717, #ebebeb, #4d4d4d, #ffffff, #666666.
Typography: [object Object], [object Object].
Corner radius vocabulary: 2, 5, 8, 16, 32, 50.
Shadow vocabulary: 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(255, 255, 255) 0px 0px 0px 2px,…
Cursor1,597 chars
# Design brief
Page type: **landing**.
Material language: **material-you**.
Voice: Tone: neutral · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#171717', '#ebebeb', '#4d4d4d', '#ffffff', '#666666', '#000000', '#7d7d7d', '#a8a8a8', '#8f8f8f', '#0068d6', '#52aeff', '#0070f3', '#e5484d', '#45dec5'],
  fonts: ['[object Object]', '[object Object]'],
  radii: ['2', '5', '8', '16', '32', '50'],
  shadows: ['rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0p…
Claude Artifacts1,294 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: material-you.
Voice: Tone: neutral · Headings: Title Case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #171717, #ebebeb, #4d4d4d, #ffffff, #666666, #000000, #7d7d7d, #a8a8a8, #8f8f8f, #0068d6, #52aeff, #0070f3, #e5484d, #45dec5.
Fonts: [object Object], [object Object].
Radius vocabulary: 2, 5, 8, 16, 32, 50.
Sections:
- feature-grid
- feature-grid — heading: "Build and deploy on the AI Cloud."
- hero …

All artefacts

Every file designlang produced for vercel.com — 27 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack5 files

Run designlang on your own URL.

Same 27-artefact depth as the vercel.com extraction above. No signup, no API key.

npx designlang yoursite.comTry it live