v0.app website design: fonts, colors and UI patterns

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.

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.

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
• Generative AI
• Primary text color
• Secondary text color
• Technology and software
• Software SaaS
• UI role
• Solid background

More website design guides

Browse website design guides by pattern and website.