# How v0.app is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/v0.app-design)

Last updated: 2026-08-10

## Captured pages

[![Dark chat interface with AI build steps and code-generation sidebar showing credit-score app creation flow](https://pin.fontofweb.com/8061?format=jpg)](https://design.withfudge.com/share/pin-8061)

[Dark chat interface with AI build steps and code-generation sidebar showing credit-score app creation flow](https://design.withfudge.com/share/pin-8061)

[![Split-pane design system editor with light-themed component preview cards and dark color-token sidebar](https://pin.fontofweb.com/7246?format=jpg)](https://design.withfudge.com/share/pin-7246)

[Split-pane design system editor with light-themed component preview cards and dark color-token sidebar](https://design.withfudge.com/share/pin-7246)

[![Referral modal overlay with progress bar and copy-link field on dark design-systems grid background](https://pin.fontofweb.com/7245?format=jpg)](https://design.withfudge.com/share/pin-7245)

[Referral modal overlay with progress bar and copy-link field on dark design-systems grid background](https://design.withfudge.com/share/pin-7245)

[![Design Systems gallery page with horizontal theme thumbnails and empty-state panel with New Theme button](https://pin.fontofweb.com/7244?format=jpg)](https://design.withfudge.com/share/pin-7244)

[Design Systems gallery page with horizontal theme thumbnails and empty-state panel with New Theme button](https://design.withfudge.com/share/pin-7244)

## Overview

v0.app is an AI-powered interface builder that combines a conversational code-generation flow with visual design system management. The interface commits to a dark-first aesthetic with near-black canvases, subtle elevation layers, and high-contrast typography that remains legible across dense technical content. The product surfaces split into three primary zones: a persistent left sidebar for navigation and project context, a central chat or canvas area for AI interaction, and right-hand preview or property panels for visual feedback. This system prioritizes information density over whitespace, using compact spacing, small-radius corners, and fine hairline borders to separate functional regions without visual heaviness. The overall impression is of a precision tool—minimal decoration, maximum clarity, with color reserved for functional accents like build status, interactive focus, and data visualization.

## Colors

The palette is built on a neutral dark foundation with carefully stepped gray values and sparing use of functional accents. Every surface exists on a spectrum from pure black through charcoal to near-white, with no warm tints.

| token | value | use |
|---|---|---|
| canvas | #000000 | Root background, deepest layer |
| surface | #0A0A0A | Primary content areas, chat panels |
| surface-elevated | #121212 | Cards, modals, elevated containers |
| surface-highlight | #171717 | Input fields, hover states, active rows |
| border | #292929 | Primary dividers, card outlines |
| border-subtle | #1F1F1F | Inner section dividers, hairline separators |
| ink | #EDEDED | Primary text, headings, active navigation |
| ink-secondary | #A0A0A0 | Body text, descriptions, secondary labels |
| ink-muted | #737373 | Placeholder text, disabled states, timestamps |
| ink-dim | #454545 | Tertiary information, subtle icons |
| action | #FFFFFF | Primary button fills, high-emphasis interactive |
| action-inverse | #000000 | Text on action surfaces |
| destructive | #E7000B | Error states, deletion actions |
| accent-blue | #52A9FF | Progress indicators, links, focus rings |
| accent-teal | #0FA594 | Success states, positive metrics |
| warning | #FE9A00 | Caution states, pending operations |

The dark mode is not an alternative but the native environment. Light surfaces appear only in preview panes when rendering generated components for external platforms. The gradient `linear-gradient(oklch(0.281 0 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%)` provides fade masks for scrolling content boundaries. Shadows are minimal and functional—subtle `rgba(0,0,0,0.05)` offsets for elevation rather than dramatic depth.

## Typography

The type system relies entirely on Geist and Geist Mono, designed by Basement Studio with Vercel. Verify licensing for these families before production use.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Geist | 2rem | 600 | 1.25 | -0.025em | Modal headings, empty state titles |
| section-display | Geist | 1.5rem | 600 | 1.3 | -0.02em | Section headers, theme names |
| body | Geist | 1rem | 400 | 1.5 | normal | Chat messages, primary content |
| body-small | Geist | 0.875rem | 400 | 1.43 | normal | Card descriptions, form labels |
| label | Geist | 0.8125rem | 500 | 1.38 | normal | Buttons, badges, compact UI |
| caption | Geist | 0.75rem | 400 | 1.33 | normal | Timestamps, metadata, hints |
| navigation | Geist | 0.875rem | 500 | 1.43 | normal | Sidebar items, top-bar actions |
| mono-body | Geist Mono | 0.875rem | 400 | 1.5 | normal | Code snippets, file paths, data |

The hierarchy is established through weight and size rather than color variation. Semibold (600) appears only at display sizes; Medium (500) handles navigation and labels; Regular (400) carries body content. Line heights are tight to maintain density—display types sit at 1.25 while body text uses 1.5 for readability in longer chat messages. Letter spacing is slightly negative for display sizes to prevent looseness at scale, neutral elsewhere. Geist Mono serves exclusively for technical content: build logs, file references, and generated code blocks.

## Layout

The interface employs a fixed three-column architecture on desktop. The left sidebar occupies a narrow persistent strip for global navigation, project switching, and recent items. The central zone flexes to contain chat threads, canvas previews, or gallery grids. Right panels appear conditionally for properties, code output, or detailed previews.

The sidebar uses `padding: 0.5rem 0.75rem` for nav items with `0.25rem` gaps, creating a compressed but tappable vertical rhythm. Chat messages stack with `0.75rem` vertical separation and `1rem` horizontal padding, maintaining thread readability without excessive whitespace. Cards and modals use `1.5rem` internal padding, while dense data tables compress to `0.625rem` row heights.

Grid systems in the gallery views use auto-flowing responsive columns with `1rem` gaps. Theme preview cards maintain aspect ratios through contained thumbnail renders. The empty state centers vertically and horizontally within its container, using generous `3rem` section spacing to isolate the call-to-action.

Border radius creates a subtle depth hierarchy: `0.5rem` for interactive elements, `0.75rem` for contained components, `1rem` for cards and modals. Full pills appear only for tags, status badges, and the progress bar track.

## Visual language

The aesthetic is deliberately austere—what remains is functional. Decorative elements are limited to a single diamond icon in the referral modal and system icons from a geometric sans-serif set. Photography is absent; all imagery is generated UI or abstract data visualization.

Data presentation favors line charts with minimal axes, bar charts with rounded caps, and calendar grids with selected-state pills. The "Create an account" card in previews shows the system's capacity for light-themed generated components, but the chrome surrounding them stays resolutely dark.

Motion is implied rather than visible in still images: progress bars animate fill, chat messages stream in sequentially, and build steps reveal with staggered timing. The loading state shows a centered logo with instructional subtext, maintaining brand presence during waits.

Iconography uses simple strokes at `1rem` to `1.25rem` sizes, aligned to text baselines. Status indicators rely on color dots rather than complex iconography. The referral modal's progress bar uses a blue fill against dark track—one of the few saturated color moments in the interface.

## Components

### Sidebar Navigation

- **Anatomy**: Vertical stack of icon-label pairs with section headers and collapsible groups
- **Surface**: Transparent background, `ink-muted` default, `ink` on active
- **Typography**: `{typography.navigation}` at Medium weight
- **Shape**: No border-radius on container; individual items use `{rounded.md}` on hover
- **Spacing**: `0.5rem` vertical padding per item, `0.75rem` horizontal, `0.25rem` gap between items
- **Composition**: Icons left-aligned at `1rem` width, labels following with `0.5rem` gap
- **States**: Active item shows no background change—only text color shift to `ink`; hover may apply `surface-highlight` background

### Chat Message Bubble

- **Anatomy**: Rounded rectangle containing message text, optional code block, and timestamp
- **Surface**: `surface-elevated` background, `border` hairline
- **Typography**: `{typography.body-small}` for content, `{typography.caption}` for metadata
- **Shape**: `{rounded.lg}` corners, no tail or pointer
- **Spacing**: `0.75rem` vertical padding, `1rem` horizontal
- **Composition**: Full-width within thread column, stacked with `0.75rem` gap
- **Variants**: User messages may invert to `ink` background with `action-inverse` text; AI messages stay dark

### Action Button

- **Anatomy**: Text label with optional leading icon
- **Surface**: `action` background, `action-inverse` text
- **Typography**: `{typography.label}` at Medium weight
- **Shape**: `{rounded.md}` corners
- **Spacing**: `0.5rem` vertical padding, `1rem` horizontal
- **Composition**: Inline or block-level, centered text
- **Variants**: Ghost variant uses transparent background, `border` outline, `ink-secondary` text

### Card

- **Anatomy**: Container with optional header, body, and footer regions
- **Surface**: `surface` background, `border` outline
- **Typography**: `{typography.section-display}` for headers, `{typography.body-small}` for content
- **Shape**: `{rounded.xl}` corners
- **Spacing**: `1.5rem` internal padding
- **Composition**: Vertical stack with `1rem` gap between regions
- **Variants**: Preview cards may include embedded light-themed generated content; data cards use tighter `1rem` padding

### Input Field

- **Anatomy**: Single-line text with placeholder, optional icon, and focus ring
- **Surface**: `surface-highlight` background, `border` outline
- **Typography**: `{typography.body-small}` for value, `ink-dim` for placeholder
- **Shape**: `{rounded.md}` corners
- **Spacing**: `0.625rem` vertical padding, `0.875rem` horizontal
- **Composition**: Full-width within form context
- **States**: Focus adds `accent-blue` ring via box-shadow

### Progress Bar

- **Anatomy**: Track with animated fill, optional percentage label
- **Surface**: `surface-highlight` track, `accent-blue` fill
- **Shape**: `{rounded.full}` pill shape, `0.5rem` height
- **Composition**: Full-width within container, labels below or inline
- **Variants**: Referral modal shows segmented milestone markers

### Modal

- **Anatomy**: Centered overlay with close control, title, content, and action area
- **Surface**: `surface-elevated` background, `border` outline, subtle white glow shadow
- **Typography**: `{typography.hero-display}` for title, `{typography.body}` for content
- **Shape**: `{rounded.xl}` corners
- **Spacing**: `2rem` internal padding
- **Composition**: Centered viewport with `3rem` margin, backdrop remains `canvas` with no blur
- **Variants**: Referral modal includes illustration, progress bar, and copy-field; confirmation modals are text-only

### Theme Preview

- **Anatomy**: Thumbnail grid showing generated component samples, label below
- **Surface**: `surface` background, `border` outline
- **Typography**: `{typography.label}` for theme name
- **Shape**: `{rounded.lg}` corners, overflow hidden for contained renders
- **Spacing**: `0.5rem` internal gap in thumbnail grid
- **Composition**: Horizontal scroll in gallery, `1rem` gap between cards

## Responsive behavior

The three-column layout collapses on narrower viewports. The sidebar narrows to icon-only mode or hides behind a toggle. Chat threads remain full-width with maintained padding. Right panels stack below primary content or become slide-out drawers.

Preview cards in gallery views reduce from multi-column grids to single-column scrolls. Modal dialogs maintain centered positioning but expand to near-full-width with reduced `1rem` padding. Typography scales down by one step: display sizes drop from `2rem` to `1.5rem`, body stays at `1rem` minimum for readability.

Touch targets should maintain `2.75rem` minimum height even when visual padding compresses. The dense desktop spacing assumes precise pointer interaction; mobile implementations should increase button and input vertical padding by `0.25rem`.

## Practical implementation guidance

### Preserve
- The near-black canvas as the default environment; light surfaces belong only to generated previews
- The stepped neutral palette with consistent `2%`-`5%` luminance increments between surface levels
- Geist's tight line heights and negative tracking for display sizes
- Hairline borders at `1px` with `border-subtle` for separation without visual weight
- The split-pane architecture with persistent navigation and conditional right panels

### Avoid
- Warm grays or tinted neutrals that break the cool, technical tone
- Large border-radius values beyond `1rem` for any component
- Drop shadows with significant blur or offset; elevation should be nearly invisible
- Decorative imagery or illustrations beyond functional icons and data visualization
- Multiple font families outside Geist and Geist Mono

### Recommended build order
1. Establish the dark canvas and surface stack with exact neutral values
2. Implement Geist at body and label sizes with proper weight distribution
3. Build the sidebar navigation with active-state color logic
4. Create the chat thread layout with message bubble components
5. Add card and modal containers with consistent border-radius and padding
6. Implement form inputs and buttons with focus and hover states
7. Add data visualization components with accent color constraints
8. Build gallery grids and theme preview cards

### Accessibility
- Maintain `4.5:1` minimum contrast for all body text; the `ink` on `surface` pairing exceeds `7:1`
- Use `accent-blue` for focus indicators rather than browser defaults
- Ensure interactive elements have visible hover and focus states beyond color change
- Provide reduced-motion alternatives for progress bar and chat stream animations
- Label icon-only sidebar items with accessible names

## Scope note

This guide covers the dark-mode builder interface, chat flows, design system gallery, and component preview surfaces visible in the supplied captures. Light-themed generated components within preview panes are described as rendered output rather than native chrome. Mobile breakpoints, animation curves, and error-state illustrations are not included. Measurements derive from the retained exact-value set where available.

## Related design patterns

- [AI enabled](/share/designs-with-capability.ai_enabled)
- [Generative AI](/share/designs-with-capability.generative_ai)
- [Primary text color](/share/designs-with-color.role.text_primary)
- [Secondary text color](/share/designs-with-color.role.text_secondary)
- [Technology and software](/share/designs-with-industry.technology_software)
- [Software SaaS](/share/designs-with-offering.software_saas)
- [UI role](/share/designs-with-typography.role.ui)
- [Solid background](/share/designs-with-visual.background.solid)

## More website design guides

[Browse website design guides by pattern and website](/design-guides).