This document specifies v0's strict design system requirements for all code generation. It covers color palette restrictions, typography limits, Tailwind CSS patterns, semantic design tokens, and font configuration. These guidelines ensure visual consistency and prevent common design anti-patterns.
For file editing workflows and context gathering before design changes, see 4.1.2 and 4.1.3.
v0 enforces a strict 3-5 color limit for all generated applications. The color structure follows this mandatory hierarchy:
| Component | Count | Examples |
|---|---|---|
| Primary brand color | 1 | Blue, teal, emerald (NOT purple unless requested) |
| Neutrals | 2-3 | White, grays, off-whites, black variants |
| Accents | 1-2 | Complementary to primary |
| Total | 3-5 | NEVER exceed without explicit user permission |
Critical Rules:
Diagram: Gradient Decision Tree
Sources: v0 Prompts and Tools/Prompt.txt707-719
v0 strictly enforces a maximum of 2 font families per application:
| Purpose | Font Family | Weight Variations |
|---|---|---|
| Headings | 1 font | Multiple weights allowed |
| Body text | 1 font | Multiple weights allowed |
Implementation Requirements:
Diagram: Typography Enforcement Flow
| Property | Requirement | Tailwind Class |
|---|---|---|
| Line height (body) | 1.4-1.6 | leading-relaxed or leading-6 |
| Minimum body font size | 14px | text-sm minimum |
| Decorative fonts | Prohibited for body text | N/A |
| Important copy | Wrap with text-balance | text-balance or text-pretty |
Sources: v0 Prompts and Tools/Prompt.txt721-735 v0 Prompts and Tools/Prompt.txt760
All v0 layouts MUST be designed mobile-first, then enhanced for larger screens using responsive prefixes (md:, lg:, xl:).
Sources: v0 Prompts and Tools/Prompt.txt737-739
Diagram: Tailwind Layout Decision Hierarchy
Spacing:
✅ CORRECT: p-4, mx-2, py-6, gap-4, gap-x-2
❌ WRONG: p-[16px], mx-[8px], space-x-4
Semantic Classes:
✅ CORRECT: items-center, justify-between, text-center
❌ WRONG: Custom CSS equivalents
Responsive Design:
✅ CORRECT: md:grid-cols-2, lg:text-xl
| Anti-Pattern | Reason | Alternative |
|---|---|---|
space-* classes | Incompatible with gap | Use gap-* classes |
| Mixing margin/padding with gap | Creates spacing conflicts | Choose one approach |
| Arbitrary values | Breaks design system | Use Tailwind spacing scale |
Direct colors (text-white, bg-black) | Breaks theming | Use design tokens |
Sources: v0 Prompts and Tools/Prompt.txt743-762
Diagram: Semantic Design Token Flow
All design tokens MUST be defined in app/globals.css using the @theme inline directive:
| Requirement | Rule |
|---|---|
| Direct color usage | PROHIBITED - Never use text-white, bg-white, bg-black |
| Token application | All colors MUST use semantic tokens (bg-background, text-foreground, etc.) |
| Custom tokens | MAY be added when useful for design brief |
| Token types | All represent colors except --radius (rem size for corners) |
Sources: v0 Prompts and Tools/Prompt.txt765-774 v0 Prompts and Tools/Prompt.txt469
Diagram: Font Configuration Pipeline
Fonts MUST be imported and configured in app/layout.tsx:
Font variables MUST be configured in app/globals.css within the @theme inline block:
Note: Tailwind CSS v4 eliminates tailwind.config.js, so font configuration occurs in globals.css.
Fonts are applied using Tailwind classes: font-sans, font-mono, font-serif
Sources: v0 Prompts and Tools/Prompt.txt776-814
| Rule | Requirement |
|---|---|
| Image usage | Use to create engaging, memorable interfaces |
| Abstract shapes | PROHIBITED - No gradient circles, blurry squares, decorative blobs |
| SVG generation | PROHIBITED for complex illustrations or decorative elements |
| Emojis as icons | PROHIBITED - Never use emojis as icon replacements |
Diagram: Icon Implementation Decision Flow
For placeholder images, use the structured URL format:
/placeholder.svg?height={height}&width={width}&query={query}
Where:
height and width are pixel dimensionsquery is an optional explanation for image generationWhen users request clones or specific designs:
InspectSite task to study source website if necessarySources: v0 Prompts and Tools/Prompt.txt816-841 v0 Prompts and Tools/Prompt.txt291-298
The following files are automatically included in all Code Projects and MUST NOT be generated unless explicitly requested:
| Category | Files |
|---|---|
| Layout | app/layout.tsx |
| UI Components | components/ui/* (accordion, alert, avatar, button, card, dropdown-menu, etc.) |
| Hooks | hooks/use-mobile.tsx, hooks/use-mobile.ts, hooks/use-toast.ts |
| Utilities | lib/utils.ts (includes cn function) |
| Styles | app/globals.css (default shadcn styles with Tailwind CSS v4) |
| Configuration | next.config.mjs, package.json, tsconfig.json |
ChartTooltip should only be used when necessarybutton-group, empty, field, input-group, item, kbd, spinnershadcn_new_components for usage examplesSources: v0 Prompts and Tools/Prompt.txt276-288 v0 Prompts and Tools/Prompt.txt461-478
Before any design work, v0 MUST utilize the GenerateDesignInspiration subagent to create a detailed design brief with:
Rule: "Ship something interesting rather than boring, but never ugly."
Sources: v0 Prompts and Tools/Prompt.txt841
Diagram: Design System Implementation Checklist
| Step | Validation Point |
|---|---|
| 1. Color System | ≤ 5 colors, no prohibited gradients |
| 2. Typography | ≤ 2 font families, proper line-height |
| 3. Layout | Mobile-first, Flexbox > Grid > Absolute |
| 4. Semantic Tokens | All colors via tokens in globals.css |
| 5. Tailwind Patterns | Use spacing scale, gap classes, semantic classes |
| 6. Font Configuration | layout.tsx imports + globals.css variables |
| 7. Visual Content | Proper icons (no emojis), structured placeholders |
| 8. Contrast | Override text colors when changing backgrounds |
Refresh this wiki