v0 — design system & UI screens
A near-empty light-gray canvas places a centered serif-weighted "What do you want to create?" headline directly above a large rounded prompt composer with an "Ask v0 to build…" field, a "v0 Max" model dropdown, and a mic button — the signature element is this giant centered chat-to-build input that treats the whole hero as a single command box. Below the composer sit four pill-shaped suggestion chips (Contact Form, Image Editor, Mini Game, Finance Calculator) and a refresh shuffle, then a "Start with a template" gallery row with category filter pills and dark template preview cards each carrying a creator avatar plus views/likes stats. The treatment is extreme whitespace minimalism — no imagery in the hero, just type and one input — contrasting with the dense black template thumbnails lower on the page.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/v0.
Decoded design system
v0's decoded design system: background #FAFAFA, text #666666, accent #FF0000, link #FF0000, primary #FF0000; type scale h1 32px / h2 24px / body 14px; 6px spacing base; 6px base radius. The single interactive/action color is #171717 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FAFAFA |
| surface | #F1F1F1 |
| border | #E3E3E3 |
| text | #666666 |
| text_muted | #9E9E9E |
| primary | #FF0000 |
| accent | #FF0000 |
| link | #FF0000 |
| button_bg | #171717 |
| button_text | #FFFFFF |
Using these colors
- Action color
#171717— the single interactive color; only on things you click or must notice, never large fills. primary,accent,linkare all#FF0000— one role, not several (the action color).- accent
#FF0000— accent for emphasis — keep it rare on the page.
Typography
- Heading: GeistSans
- Body: GeistSans
- Mono: GeistMono
- h1: 32px
- h2: 24px
- body: 14px
Spacing
- base unit: 6px
- scale: 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px
Radii
- base: 6px
- button: 9999px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 300ms · 200ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·cubic-bezier(0, 0, 0.2, 1) - animated properties: opacity, border-color, color, background-color
Native design tokens
| Token | Value |
|---|---|
--sh-class | #00a7fd |
--sh-identifier | #fff |
--sh-sign | #9b9b9b |
--sh-string | #00e7c1 |
--sh-keyword | #ff0078 |
--sh-comment | #a19595 |
--sh-jsxliterals | #ffff72 |
--fides-overlay-primary-color | #2b2e35 |
--fides-overlay-background-color | #f7fafc |
--fides-overlay-font-color | #4a5568 |
…and 110 more measured on the page.
Button states (measured)
- primary focus: border
1px solid oklch(0.51 0 0)· backgroundoklch(0.51 0 0)
Layout (measured)
- container max-width:
690px - nav: 50px relative
- common grid: 2 columns
Motion choreography (measured)
Load order: div.flex → a.text-v0-gray-900×25 → path.text-v0-gray-1000×12 → button.group×3 → div.flex×3 → div.mx-4×36
Scroll reveal: 24 elements rest at opacity 0, translateY(4px), animate in over 0.15s cubic-bezier(0.4, 0, 0.2, 1).
Overlay recipe (measured)
palette panel: rgba(0, 0, 0, 0) · radius 0px
Responsive (measured)
- breakpoints: 600px · 640px · 768px · 960px · 1024px · 1280px
- mobile (390px): hero 16px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →