What do you want to create?

Ask v0 to build…
v0 Max ▾ ●
Contact Form Image Editor Mini Game Finance Calculator ↻

Start with a template

Apps and Games Landing Pages Components Dashboards Browse all ›
// generated preview
export default function Playground() {
  return <Canvas prompt="img gen" />
}

Image Gen Playground

Generate working apps from a single prompt.

// billing landing page
const Hero = () => (
  <Section tone="editorial" />
)

Contract Billing

Landing pages that ship straight to Vercel.

// dashboard shell
import { Chart } from "@/ui"
export function Panel() {}

Analytics Dashboard

Dense product surfaces with real data wiring.

app/page.tsx CopyDeploy 
// the only colour in the system lives here
import { Composer } from "@/components/composer"

export default function Page() {
  return (
    <Composer
      placeholder="Ask v0 to build..."
      model="v0-max"
      radius={12}
    />
  )
}

Prompt. Build. Publish.

Every control is monochrome — emphasis comes from inverting, never from hue.

Nav scale · 32px · 8px radius · 14/500
Sign Up Hover Disabled Log In Hover Disabled Browse all Hover
Large CTA · 48px · full pill · 16/500
Get Started Hover Disabled
Chips & tabs · 32px · full pill · 1px rgba(255,255,255,.15) — rest, hover, active
Contact Form Hover Active Disabled
Composer — default and focus (1px #2e2e2e stepping to #454545)
Ask v0 to build…
v0 Max ▾●
a dashboard with tabular data
v0 Max ▾●
Model selector 28px / 6px · icon button 28×28 / 6px
v0 Max ▾ ●

The interface has no accent colour at all — emphasis is an inversion to #ededed. Note the radius split: 8px for buttons, full pill for chips and the large CTA. Motion is uniformly 0.15s across two curves, cubic-bezier(.4,0,.2,1) and Vercel’s cubic-bezier(.31,.1,.08,.96). Focus rings were not captured; the focus state above uses the captured border step toward #454545.

Geist, two weights, tracking scaled to size

Display h3 · GeistSans · 48/56 · 600 · -2.88pxPrompt. Build.
Hero h1 · GeistSans · 32/40 · 600 · -1.28pxWhat do you want to create?
Section h2 · GeistSans · 24/32 · 600 · -0.96pxStart with a template
Card h3 · GeistSans · 20/26 · 600 · -0.4pxDeploy to Vercel
Body · GeistSans · 16/24 · 400 · normal · #a0a0a0Generate working apps from a single prompt.
UI label / nav · GeistSans · 14/20 · 500 · normalTemplates · Enterprise · Pricing
Composer input · GeistSans · 14/20 · 400 · normalAsk v0 to build…
Meta / model chip · GeistSans · 13 · 500 · #a0a0a0v0 Max
Code · GeistMono · 13/22 · 400export default Page

No accent — all colour lives in the syntax set

Text
text#ededed
muted#a0a0a0
on-light#0a0a0a
Surfaces
black#000000
canvas#0a0a0a
surface#121212
surface-2#1a1a1a
surface-3#1f1f1f
light#ededed
Borders — the four-step ladder that replaces shadows
border#1f1f1f
border-2#27272a
border-3#2e2e2e
border-4#454545
border-alphargba(255,255,255,.15)
Syntax highlighting — the only colour in the system
sh-identifier#ffffff
sh-class#00a7fd
sh-string#00e7c1
sh-keyword#ff0078
sh-jsxliterals#ffff72
sh-sign#9b9b9b
sh-comment#a19595

Borders do the work of shadows

4px
6px small control
8px button
12px composer / card
16px
35px
12px 12px 0 0
0 0 12px 12px
full pill
#000000
#0a0a0a
#121212
#1a1a1a
#1f1f1f
#1f1f1f
#27272a
#2e2e2e
#454545
rgba(255,255,255,.15)
rgba(0,0,0,.02) 0 1px 1px 0, rgba(0,0,0,.04) 0 4px 8px -4px, rgba(0,0,0,.06) 0 16px 24px -8px
rgba(0,0,0,0) 0 0 0 0 — the slot exists but is switched off on dark

Only one real shadow recipe exists; every other resolves fully transparent, so on dark the surface ladder and the four-step border ladder carry all the depth. No backdrop-filter, gradients, grain or WebGL anywhere. Motion is 0.15s on cubic-bezier(.4,0,.2,1) for colour and on cubic-bezier(.31,.1,.08,.96) for border and background.