Product-first and strictly monochrome: the landing page opens straight onto a prompt composer instead of a marketing hero, with no accent colour anywhere — emphasis is an inversion to off-white, all the colour in the system lives in the published syntax-highlight tokens, and a tight near-black surface ladder plus a four-step border ladder does the work shadows would do, under Geist set in exactly two weights with tracking scaled to roughly -6% of type size.
Browse v0 in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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 shipsclass="dark"on<html>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.
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.
| 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 |
| 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 |
| 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 |
--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.
GeistSans, "GeistSans Fallback", sans-serifGeistMono, 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.