What is v0's primary brand color?

v0's marketing system has no brand voltage in the conventional sense — no held-in-reserve accent, no inline link color, no semantic-color tier rendered above the fold. The captured page renders ink black 154 times across the CSS variable tree and a single hairline gray once for the input outline; those two tones carry essentially the entire chrome. The Vercel-house palette (`#ff0080` magenta, `#f81ce5` pink, `#0070f3` blue, `#00dfd8` cyan, `#00e7c1` teal) is declared in the inherited Geist token system but rendered 0 times on the captured marketing page. The filled-ink Sign Up pill is the only conventional voltage surrogate; everywhere else, monochrome discipline carries the visual identity.

What typeface does v0 use, and what should I use as a substitute?

v0 runs GeistSans for every spoken surface — display, heading, body, button, nav, label. Display headlines sit at 32-48px in weight 600 with tight letter-spacing (-1.28px to -2.88px); body at 14-16px in weight 400 / 500; nav links at 14px in weight 500. GeistMono appears 5 times for a single 10px caption-label tier inside template cards. Both faces are open-source from Vercel, available via `geist-font` on npm. Inter at the same weights is the closest non-Vercel substitute for GeistSans but reads slightly narrower at the 48px display tier — adjust to weight 700 to compensate. JetBrains Mono or IBM Plex Mono at 10px transfer cleanly for the GeistMono label tier. The display weight of 600 and tight tracking is the typographic move to preserve.

Why is the prompt input the only thing above the fold?

v0's product IS the prompt-input — typing a description and watching working code appear is the entire workflow. The marketing surface mirrors the product surface: the same prompt field, the same placeholder text, the same model selector chip, the same microphone icon, the same suggested-prompt chips beneath. Landing on v0.app is functionally identical to opening a new v0 project. The page assumes anyone arriving already knows the value proposition and skips directly to the first turn of the conversation. This is the inverse of a SaaS marketing page that holds the product behind a Sign Up flow; v0 holds nothing behind anything, and the conversion is typing a sentence rather than clicking a CTA.

What is v0's corner-radius philosophy?

v0 runs a binary radius scale: maximum-pill plus small-step. The dominant value is the maximum representable border-radius (rendered in CSS as `33554432px`, effectively a full pill) — it appears 91 times on Sign In / Sign Up buttons, suggested-prompt chips, template-category tabs, and every other rounded-rectangle surface that needs to read as tappable. The supporting tiers are tight: 8px (23 occurrences) on template cards, 12px (19) on the prompt input and prompt-input controls, 4px (22) on small chips, 6px (10) on nav-link hover surfaces, 16px (10) on larger cards. There is no middle 20 / 24px tier. The pill-vs-tight binary mirrors the Vercel house aesthetic: tappable surfaces are pills, structural surfaces are tight.

Can I use this DESIGN.md to build my own AI-tool marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce v0's specific moves: monochrome chrome on a near-white canvas, a single oversized prompt input as the entire above-fold composition, pill CTAs at maximum rounding, GeistSans + GeistMono as the only two voices, and template thumbnails as the only chromatic moment below the fold. Token references resolve without invention. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your product is itself a prompt-driven generator is the prompt-as-hero pattern — for a SaaS with a more complex workflow it would feel reductive.

v0 Design System

v0's marketing system makes the prompt input the hero — monochrome chrome on a near-white canvas with GeistSans across every tier and a pill CTA.

About v0 DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source v0.app

AI & LLM Platforms
Developer Tools & IDEs

v0's marketing site makes one move and trusts it absolutely: the prompt input IS the hero. Above the fold sits a 48px GeistSans display headline reading "What do you want to create?" with a single oversized text-input field anchored beneath it — placeholder text "Ask v0 to build…", a model selector chip on the left (showing v0 Max), a microphone icon on the right, and a 12px corner radius on the field outline. Below the input, four suggested-prompt pills (Contact Form, Image Editor, Mini Game, Finance Calculator) sit on a row with a refresh icon. There is no headline gradient, no rotating tagline, no decorative chrome above or below the input. The entire above-fold composition is the question, the field, and the suggestions — the simplest possible expression of "type here and we'll build it."

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 3 color tokens, all structural — ink black `#000000` carrying 154 occurrences (1 as text, 153 across the declared variable tree), a single hairline gray `#e4e4e7` for the input outline and template-card borders, and a near-white canvas tone matching the captured theme-color value. Seven typography tokens running GeistSans at 13, 14, 16, 20, 24, 32, and 48px in weights 400 / 500 / 600, plus a single 10px GeistMono tier for caption labels (5 occurrences). Six corner-radius tokens including the dominant maximum-pill (91 occurrences) and the 12px input rounding. Sixteen component definitions covering the prompt input, the filled-ink CTA pill, the white Sign In pill, the suggested-prompt chip, the template-category tab, the template card, and the top-nav.

Feed this file to Claude or Cursor and it reproduces v0's specific moves: monochrome chrome rather than the Vercel-house pink-and-cyan gradient, a single oversized prompt input as the entire above-fold conversion surface, pill CTAs at maximum rounding, GeistSans + GeistMono as the only two typographic voices, and template thumbnails carrying the only chromatic moments below the fold. The one move worth borrowing is the discipline of letting the input field do the marketing work — v0 trusts that anyone landing on the page already knows what v0 is, so the page is built as the first turn of a conversation rather than as a sales pitch. For a brand selling tools to people who have never heard of them, this would feel underused.

What makes it distinct

Prompt input as herothe single 12px-rounded input field anchored under a 48px display headline is the entire above-fold composition
Monochrome chrome by disciplineink-on-near-white carries every rendered tone; Vercel's Geist palette of pink and cyan is declared but never rendered above the fold
GeistSans + GeistMono as the only two voicessans at 13-48px in weights 400 / 500 / 600 for spoken surfaces, mono at 10px for the rare label
Maximum-radius pill on every buttonSign In, Sign Up, template-category tabs, and the suggested-prompt chips all render at full pill rounding (91 occurrences)
Vercel-derived black-on-white treatmentthe filled Sign Up CTA is a pill of pure ink with white text, the only conventional voltage surrogate on the page

Live at v0.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

v0.app

Explore v0

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

v0 design system FAQ

Common questions about v0's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

v0 — official site

v0's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.