# v0 (Vercel) — Marketing site Design Spec > Source: v0.app (live DOM, computed styles), 2026-07-19. > Coverage: signed-out home / landing (which is itself the product entry point). Signed-in workspace not captured (needs login). > Note: the page ships `class="dark"` on `` and no light variant was exposed. A third-party cookie-consent library (Fides) publishes its own `--fides-*` tokens; those are excluded as vendor chrome, not brand tokens. ## 1. Visual Theme & Atmosphere v0's landing page *is* the product: instead of a marketing hero it opens straight onto a prompt composer, with the headline as the only copy above it. Everything is built from Vercel's Geist system — GeistSans for UI, GeistMono for code — on a near-black `#0a0a0a` canvas with a very tight surface ladder (`#000` → `#0a0a0a` → `#121212` → `#1a1a1a` → `#1f1f1f`) and an equally tight border ladder (`#1f1f1f` → `#27272a` → `#2e2e2e` → `#454545`). There is no accent colour at all — the only "brand colour" in the interface is inverted `#ededed` on the primary button. Colour appears exclusively in the syntax-highlight token set, which is a published palette in its own right. Type carries the character instead: GeistSans at 600 with aggressive negative tracking, up to **-2.88px at 48px**. Feels: engineered, monochrome, product-first, precise. ## 2. Color Palette & Roles ### Text | Token | Hex | Role / usage | |---|---|---| | `text` | `#ededed` | Headlines, primary UI text (also the primary button fill) | | `muted` | `#a0a0a0` | Body copy, chip labels, placeholder — the most common text colour | | `on-light` | `#0a0a0a` | Text on the inverted white button | ### Surfaces | Token | Hex | Role / usage | |---|---|---| | `black` | `#000000` | Deepest ground | | `canvas` | `#0a0a0a` | Page background (most common surface) | | `surface` | `#121212` | Composer, chips, cards | | `surface-2` | `#1a1a1a` | Raised step | | `surface-3` | `#1f1f1f` | Highest step | | `light` | `#ededed` | Inverted button / light block | ### Borders | Token | Hex | Role / usage | |---|---|---| | `border` | `#1f1f1f` | Faintest hairline | | `border-2` | `#27272a` | Button outline (log-in) | | `border-3` | `#2e2e2e` | Composer border | | `border-4` | `#454545` | Strongest / hover border | | `border-alpha` | `rgba(255,255,255,.15)` | Chip and tab border | ### Syntax highlighting (published `--sh-*` tokens) | Token | Hex | Role | |---|---|---| | `--sh-identifier` | `#ffffff` | Identifiers | | `--sh-class` | `#00a7fd` | Class names | | `--sh-string` | `#00e7c1` | Strings | | `--sh-keyword` | `#ff0078` | Keywords | | `--sh-jsxliterals` | `#ffff72` | JSX literals | | `--sh-sign` | `#9b9b9b` | Signs / punctuation | | `--sh-comment` | `#a19595` | Comments | **Rules.** The interface has **no accent colour** — emphasis is created by inverting to `#ededed`, never by hue. All colour on the page lives in the `--sh-*` syntax set and in template thumbnails. Borders do the work that shadows would elsewhere. ## 3. Typography Rules - UI + display: `GeistSans, "GeistSans Fallback", sans-serif` - Code: `GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, monospace` | Role | Size/Line | Weight | Tracking | |---|---|---|---| | Display h3 | 48/56 | 600 | **-2.88px** | | Hero h1 | 32/40 | 600 | -1.28px | | Section h2 | 24/32 | 600 | -0.96px | | Card h3 | 20/26 | 600 | -0.4px | | Body | 16/24 | 400 | normal (`#a0a0a0`) | | UI label / nav | 14/20 | 500 | normal | | Composer input | 14/20 | 400 | normal | | Meta / model chip | 13 | 500 | normal (`#a0a0a0`) | Patterns: exactly **two weights** — 600 for every heading, 400/500 for everything else; there is no 700. Tracking scales hard and linearly with size (-2.88px at 48px, -1.28px at 32px, -0.96px at 24px, -0.4px at 20px, normal at 16px and below) — roughly -6% of the type size, which is the single most characteristic Geist trait. All sentence case; no uppercase eyebrows anywhere. ## 4. Component Stylings **Nav** — 48px, sits on the canvas with a hairline bottom border. Logo glyph, five links at 14/500, then two 32px buttons. **Buttons** — note the two radii: **8px** for nav-scale buttons and **full pill** (`1.67772e+07px`, i.e. a max-value radius) for chips and the large CTA: | Variant | Fill | Text | Border | Radius | Height | Padding | Type | |---|---|---|---|---|---|---|---| | Primary (nav) | `#ededed` | `#0a0a0a` | 1px `#ededed` | 8px | 32px | 0 12px | 14/500 | | Secondary (nav) | `#0a0a0a` | `#ededed` | 1px `#27272a` | 8px | 32px | 0 12px | 14/500 | | Ghost | transparent | `#ededed` | none | 8px | 32px | 0 8px | 14/500 | | Large CTA | `#ededed` | `#0a0a0a` | 1px `#ededed` | full pill | 48px | 0 20px | 16/500 | | Chip / tab | `#121212` | `#a0a0a0` | 1px `rgba(255,255,255,.15)` | full pill | 32px | 0 12px | 14/500 | | Model selector | transparent | `#a0a0a0` | none | 6px | 28px | 0 4px 0 6px | 13/500 | | Icon button | `#ededed` | `#0a0a0a` | 1px `#ededed` | 6px | 28×28 | — | — | **Signature prompt composer** — a 690×108 panel: `#121212` fill, **1px `#2e2e2e`** border, **12px** radius, holding a 14/20 input line (placeholder "Ask v0 to build…" in `#a0a0a0`), a 28px model-selector chip bottom-left, and a 28×28 inverted `#ededed` icon button bottom-right. Below it sits a row of full-pill suggestion chips. **Template cards** — `#121212` on the canvas, 12px radius, with split radii (`12px 12px 0 0` and `0 0 12px 12px`) used for stacked card headers and footers. ## 5. Layout Principles Centered, product-first: nav → a single 32/40 headline → the composer → suggestion chips → a template gallery with a full-pill segmented filter. Content column is roughly 690px (composer width) inside a wider gallery grid of 3 columns. Radius scale: `4 / 6 / 8 / 12 / 16 / 35px` plus split variants and the full pill. ## 6. Depth & Elevation Radius scale: `4px` / `6px` (small controls) / `8px` (buttons) / `12px` (composer, cards) / `16px` / `35px` / `12px 12px 0 0` / `0 0 12px 12px` / full pill. One real shadow recipe: - `rgba(0,0,0,.02) 0px 1px 1px 0px, rgba(0,0,0,.04) 0px 4px 8px -4px, rgba(0,0,0,.06) 0px 16px 24px -8px` Everything else resolves to a fully transparent multi-layer placeholder (`rgba(0,0,0,0) 0 0 0 0, …`) — the Geist shadow slot exists but is switched off on dark. No `backdrop-filter` anywhere. Depth is the surface ladder plus the four-step border ladder. ## 7. Motion Short and consistently eased at **0.15s**: - `color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s …, border-color 0.15s …` - `border-color 0.15s cubic-bezier(0.31, 0.1, 0.08, 0.96), background 0.15s cubic-bezier(0.31, 0.1, 0.08, 0.96)` - `opacity cubic-bezier(0.31, 0.1, 0.08, 0.96)` Two easing curves are in play: the standard material-style `(0.4, 0, 0.2, 1)` and Vercel's custom `(0.31, 0.1, 0.08, 0.96)`. ## 8. Backgrounds, Effects & WebGL Flat solid surfaces — no gradients, no `backdrop-filter`, no grain, no canvas or WebGL. The only visual richness on the page comes from the template thumbnails, which are live rendered previews of generated apps. ## 9. Do's and Don'ts ### Do - Lead with the product surface (a composer), not a marketing hero. - Use GeistSans at 600 for headings and 400/500 for everything else — only two weights. - Scale negative tracking with type size, roughly -6% (-2.88px at 48px, -1.28px at 32px, -0.4px at 20px). - Build depth from the near-black surface ladder and the four-step border ladder, not shadows. - Create emphasis by inverting to `#ededed`, never with a hue. - Use 8px radii for nav buttons and full pills for chips and the large CTA. - Keep all colour inside the `--sh-*` syntax token set. ### Don't - Don't introduce an accent colour — the interface has none. - Don't use weight 700, or uppercase eyebrows. - Don't add drop shadows on dark; the shadow slot is deliberately transparent. - Don't use backdrop blur or gradients. - Don't apply the syntax colours to UI chrome. - Don't give chips an 8px radius — chips are full pills, buttons are 8px. ## 10. Responsive Behavior Not captured — styles are Tailwind-compiled with no resolvable media-query census, and the page ships a fixed `dark` class with no light-theme variant exposed. ## 11. Agent Prompt Guide - Canvas `#0a0a0a` · Surface `#121212` · Text `#ededed` · Muted `#a0a0a0` · Border `#2e2e2e` (composer) / `#27272a` (button) · Accent: **none** - Font: GeistSans (UI), GeistMono (code) · Body: 16/24 · Radius: 8px button / 12px composer & card / full pill chip · Control height: 32px nav, 48px large CTA - Focus: not captured · Hover: border steps toward `#454545` · Transition `0.15s cubic-bezier(0.4,0,0.2,1)` and `cubic-bezier(0.31,0.1,0.08,0.96)` A product-first, strictly monochrome AI builder surface: the landing page opens straight onto a prompt composer rather than a marketing hero. Everything sits on a near-black #0a0a0a canvas over a very tight surface ladder (#000, #0a0a0a, #121212, #1a1a1a, #1f1f1f) and an equally tight four-step border ladder (#1f1f1f, #27272a, #2e2e2e, #454545) that does all the work shadows would do elsewhere — the Geist shadow slot exists but resolves fully transparent on dark, and there is no backdrop-filter, gradient or grain anywhere. There is NO accent colour: emphasis comes from inverting to #ededed, and the only colour in the system is the published syntax set (--sh-class #00a7fd, --sh-string #00e7c1, --sh-keyword #ff0078, --sh-jsxliterals #ffff72). Type is GeistSans with GeistMono for code, using exactly two weights — 600 for every heading, 400/500 for everything else, never 700 — with negative tracking scaled to roughly -6% of type size (-2.88px at 48/56, -1.28px at 32/40, -0.96px at 24/32, -0.4px at 20/26, normal at 16/24 body in #a0a0a0). Controls split by radius: 8px for 32px nav buttons (#ededed filled or #0a0a0a with a 1px #27272a border) versus full pills for 32px chips (#121212 with a 1px rgba(255,255,255,.15) border) and the 48px CTA. The signature component is the composer — a 690x108 #121212 panel at 12px radius with a 1px #2e2e2e border, a 14/20 input, a 28px model-selector chip and a 28x28 inverted icon button. Motion is uniformly 0.15s on two curves: cubic-bezier(0.4,0,0.2,1) and Vercel's cubic-bezier(0.31,0.1,0.08,0.96). Feels: engineered, monochrome, product-first, precise. Avoid: introducing any accent hue, weight 700, uppercase eyebrows, drop shadows on dark, backdrop blur or gradients, applying syntax colours to chrome, and giving chips a rectangular radius.