designlang
Brand guidelines #141414

June 25, 2026

v0.dev

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

Page intent
landing
System grade
A 90/100
Tokens
9 colours · 9 sizes
Generated
designlang
Chapter 00

Essence

v0.dev is an Explorer brand — modern, kinetic, adventurous and independent — anchored on GeistSans, springy motion.

Explorer archetype · 91% fit · vs Magician

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
gradient-mesh
Component library
shadcn/ui
Stack
next · Tailwind
Voice tone
neutral
Chapter 03

Colour

9 neutrals · 9 total

Neutrals

#D2D2D2
#020202
#222222
#FFFFFF
#F4F4F4
#343434
#646464
#E2E2E2
#959595

Full palette

#D2D2D2
#020202
#222222
#FFFFFF
#F4F4F4
#343434
#646464
#E2E2E2
#959595

WCAG 100% · 63 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 9 sizes · 3 weights

Display
GeistSans
Body
GeistMono
Weights
400, 500, 600

Specimen

What do you want to create?
Start with a template

Scale

StepSizeSample
t00 48px What do you want to create?
t01 32px What do you want to create?
t02 24px What do you want to create?
t03 20px What do you want to create?
t04 18px What do you want to create?
t05 16px What do you want to create?
t06 14px What do you want to create?
t07 13px What do you want to create?
t08 10px What do you want to create?
Chapter 05

Spacing

Base 4px · 7 steps captured

Rhythm

1px
64px
96px
108px
128px
192px
208px
Chapter 06

Shape

5 radii · 5 elevation tiers

Border radii

4px
8px
12px
16px
35px

Elevation

xs
sm
md
lg
xl
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 · 5 durations · 5 easings

Duration scale

100ms
200ms
300ms
500ms
1000ms

Easings

Chapter 09

Components

shadcn/ui · 1 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
Sizes
medium
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
63 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

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

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

Run npx designlang pack v0.dev 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.