---
title: "v0 design system"
variant: extended
source: https://v0.app/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/v0-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# v0 · Design System

> A quiet canvas for building with AI

**Theme:** light · **Industry:** ai · **Source:** https://v0.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

v0 presents an AI app-building workspace through a restrained monochrome interface, centered around a prominent creation prompt. A template gallery below pairs functional browsing controls with varied, expressive project previews.

## North star

Keep the interface quiet and monochrome so the creation prompt and template previews carry the visual attention.

## Overview

The page uses a near-white canvas and a tight monochrome palette to keep attention on the prompt and the work users can create. Near-black headings and primary actions supply contrast; muted gray supports navigation, secondary labels, and compact metadata, while pale gray borders outline controls and cards without heavy framing. GeistSans gives display headings a firm, slightly condensed feel through negative tracking, while Inter handles navigation, body copy, and buttons with a practical, even rhythm. A narrow, centered creation area leads into a wider three-column template gallery, where the previews provide the strongest visual variation: dark interfaces, editorial landing pages, and photographic compositions. Generous vertical separation makes the page feel open despite its dense gallery content. Rounded pills, input surfaces, and card corners soften the otherwise crisp, utilitarian system. Keep color and decoration subordinate to readable controls and vivid template previews.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#fafafa` | `--color-canvas-white` | surface | Page canvas and the dominant background behind navigation, prompt, and template gallery. |
| Carbon Ink | `#171717` | `--color-carbon-ink` | brand | Headings, primary Sign Up action, and prominent text or icon details. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | semantic | Muted navigation labels, secondary button text, and subdued interface copy. |
| Mist Border | `#e7e7e7` | `--color-mist-border` | neutral | Light outlines around controls and subtle separators between interface surfaces. |
| Silver Edge | `#c9c9c9` | `--color-silver-edge` | neutral | Border tone measured on the prompt card; use for restrained input framing. |
| Fog Wash | `#f2f2f2` | `--color-fog-wash` | surface | Subtle navigation surface tint, not a dominant page band. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Canvas White) · `--color-surface` → `#e7e7e7` (Mist Border) · `--color-surface-2` → `#171717` (Carbon Ink) · `--color-text` → `#171717` (Carbon Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#fafafa` (Canvas White) · `--color-border` → `#e7e7e7` (Mist Border)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#fafafa` | 17.18:1 | AAA |
| `#171717` | `#e7e7e7` | 14.5:1 | AAA |
| `#666666` | `#fafafa` | 5.5:1 | AA |
| `#666666` | `#e7e7e7` | 4.64:1 | AA |
| `#666666` | `#171717` | 3.12:1 | AA-large |
| `#fafafa` | `#e7e7e7` | 1.18:1 | fail |
| `#fafafa` | `#171717` | 17.18:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | system | 500, 400, 600 | Navigation, body copy, buttons, captions, and template labels. | Inter |
| GeistSans | `--font-display` | webfont | 600, 500 | Primary and secondary display headings. | Inter |

- **Inter:** Use measured regular, medium, and semibold weights; keep tracking neutral and casing natural.
- **GeistSans:** Semibold headings use tight negative tracking; preserve sentence case rather than all caps.

### Type scale — Perfect Fifth (ratio ≈ 1.512, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1.25 | -0.04em | — | GeistSans | Centered primary creation question above the prompt. |
| h2 | 24px | 600 | 1.33 | -0.04em | — | GeistSans | Template gallery section heading. |
| body | 14px | 500 | 1 | 0 | — | Inter | Prompt labels, navigation, and template metadata. |
| caption | 13px | 400 | 1 | 0 | — | Inter | Small supporting labels and compact gallery details. |
| button | 14px | 500 | 1.43 | 0 | — | Inter | Pill actions, account controls, and prompt suggestions. |
| nav | 14px | 500 | 1.43 | 0 | — | Inter | Top navigation links and category browsing controls. |

OpenType features in use: `"zero"`, `"ss09"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 24 px.
- Section rhythm 192px · element gap 6px · card padding — · max content width 690px.

A slim top navigation spans the viewport, with the brand at left, links centered, and account actions at right. The hero is centered around a narrow prompt area, while the template gallery expands into a three-column grid within a wider page container. Strong vertical separation distinguishes creation from browsing. Headings and prompt content are center-aligned; gallery titles and cards align to the grid. Overall density is spacious above the fold, then becomes more information-rich around the template previews.

## Shape & elevation

- Radius: button `9999px` · card `8px` · nav `6px` · xs `6px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px, rgba(0, 0, 0, 0.06) 0px 16px 24px -8px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, using pale hairline borders to separate controls and cards from the canvas. Rounded card edges and the prompt outline define layers more than shadows do. Reserve subtle elevation for interactive emphasis; avoid heavy shadows or stacked decorative panels.

## Imagery

Template cards contain the page’s main visual variety: dark product interfaces, light editorial layouts, and photographic or image-led compositions. Keep previews in consistent, wide card frames with softly rounded corners; do not recolor or over-style their contents. The gallery imagery is product work, not a cue to introduce additional brand colors into the surrounding interface.

## Components

### Top navigation

Brand mark at left, centered text links, and right-aligned Log In and dark Sign Up controls.

### Creation prompt

Centered prompt area with a question heading, white rounded input surface, muted placeholder, model selector, and dark action icon.

### Prompt suggestions

Compact rounded suggestion controls with small line icons and muted labels beneath the main prompt.

### Template category filters

Small pill-like category controls sit beside the gallery heading, followed by a Browse all link.

### Template cards

Three-column gallery cards pair wide rounded previews with a title and compact creator or engagement metadata.

### Account actions

Log In uses a light surface and border; Sign Up uses a near-black fill with light text.

### Measured component styles

- **Primary button** (“Contact Form”): background #ffffff · text #666666 · border 1px solid #e7e7e7 · radius 3.35544e+07px · padding 0px 12px · 500 14px Inter
- **Secondary button** (“Sign Up”): background #171717 · text #ffffff · border 1px solid #171717 · radius 8px · padding 0px 12px · 500 14px Inter
- **Link** (“Image Generation Playground 6.7K 745”): transparent background · text #171717 · radius 0px · padding 0px · 400 14px Inter
- **Card** (“View Details”): transparent background · text #171717 · radius 8px · padding 0px · 400 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“New Chat”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the main canvas near-white and the interface monochrome.
- Use a centered, prominent creation prompt.
- Separate the hero and gallery with generous whitespace.
- Use GeistSans for display headings and Inter for interface text.
- Frame template previews consistently with rounded corners.
- Use muted gray for secondary copy and navigation.

## Don't

- Do not add bright accent colors to the surrounding UI.
- Do not crowd the creation prompt with extra panels.
- Do not use heavy shadows as a default card treatment.
- Do not make navigation or metadata compete with the main heading.
- Do not flatten the varied template artwork into one visual style.
- Do not add unmeasured spacing, sizing, or color values.

## Agent prompt

Build a new v0-style page with a quiet, near-white Canvas White (#fafafa) foundation and a restrained monochrome interface. Use Carbon Ink (#171717) for strong headings and primary actions, Soft Graphite (#666666) for secondary labels, and Mist Border (#e7e7e7) for subtle outlines; reserve Silver Edge (#c9c9c9) for prompt framing and Fog Wash (#f2f2f2) for a faint navigation tint. Set display headings in GeistSans-like semibold with tight tracking, and interface copy in Inter. Center the main task area, then transition into a wider, aligned card gallery with varied project previews. Keep the top navigation low-profile, controls rounded, borders light, and shadows nearly absent. Preserve generous whitespace and make functional hierarchy clearer than decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim top navigation, centered prompt hero, then a three-column template gallery with category controls. | AI prompt entry, suggested starting actions, template discovery, category filtering | monochrome navigation, rounded prompt surface, pill controls, three-column preview cards |

## Source CSS custom properties (selected)

```css
--geist-space: 4px;
--geist-space-2x: 8px;
--geist-space-3x: 12px;
--geist-space-4x: 16px;
--geist-space-6x: 24px;
--geist-space-8x: 32px;
--geist-space-10x: 40px;
--geist-space-16x: 64px;
--geist-space-24x: 96px;
--geist-space-32x: 128px;
--geist-space-48x: 192px;
--geist-space-64x: 256px;
--geist-space-small: 32px;
--geist-space-medium: 36px;
--geist-space-large: 40px;
--geist-space-gap: 24px;
--geist-space-gap-half: 12px;
--geist-space-gap-quarter: 8px;
--geist-gap: 24px;
--geist-gap-half: 12px;
--geist-gap-quarter: 8px;
--geist-gap-double: 40px;
--geist-gap-section: 32px;
--geist-space-negative: -4px;
--geist-space-2x-negative: -8px;
--geist-space-4x-negative: -16px;
--geist-space-8x-negative: -32px;
--geist-space-16x-negative: -64px;
--geist-space-24x-negative: -96px;
--geist-space-32x-negative: -128px;
--geist-space-48x-negative: -192px;
--geist-space-64x-negative: -256px;
--geist-space-small-negative: -32px;
--geist-space-medium-negative: -36px;
--geist-space-large-negative: -40px;
--geist-space-gap-negative: -24px;
--geist-space-gap-half-negative: -12px;
--geist-space-gap-quarter-negative: -8px;
--geist-gap-negative: -24px;
--geist-gap-half-negative: -12px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/v0-dev