Style identity
v0-inspired Prompt Workshop
A sparse prompt-first creation surface that moves from an idea to a working app, template, or published result.
Neutral light/dark builder canvas with a quiet prompt surface, compact technical themeDesign system Pro AI Kit16 components
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Desktop · 1440 × 5068
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Geist Sans
UI, display, navigation, and readable body copy
GeistSans, "GeistSans Fallback", ui-sans-serif, system-ui, sans-serif- Weights
- 400,500,600,700
- Sizes
- 12px,14px,16px,24px,32px,48px,64px,82px
- Line height
- 1.2–1.5
- Tracking
- -0.04em for display; normal for body
Fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Geist Mono
Code, token, status, and compact technical labels
GeistMono, ui-monospace, SFMono-Regular, Menlo, monospace- Weights
- 400,500,600
- Sizes
- 10px,11px,12px,14px
- Line height
- 1.45–1.7
- Tracking
- normal
Fallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
Core colors
canvas
#fafafaPage canvas in light mode
surface
#ffffffRaised content surface in light mode
surface-dark
#18181bRaised content surface in dark mode
text
#18181bPrimary readable text
muted
#71717aSupporting copy and metadata
border
#e4e4e7Quiet dividers and control outlines
accent
#18181bPrimary action or active state
accent-secondary
#6366f1Secondary signal or gradient stop
dark-canvas
#09090bPage canvas in dark mode
dark-text
#fafafaPrimary readable text in dark mode
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| display-xl | clamp(44px, 7vw, 94px) | 700 | 0.98–1.08 | -0.06em |
| display-lg | clamp(32px, 5vw, 64px) | 700 | 1.0–1.12 | -0.05em |
| heading | 24–32px | 600 | 1.2–1.35 | -0.035em |
| body | 14–16px | 400 | 1.45–1.6 | normal |
| label | 11–13px | 600 | 1.3–1.45 | 0.01em |
| technical | 10–12px | 500 | 1.45–1.7 | normal |
Spacing & shape
Layout rhythm
- Density
- airy
- Base unit
- 4px
- Max width
- 1180px
- Section gap
- 72–112px
- Card padding
- 20–28px
- Element gap
- 8–18px
Iconography
Outline SVG icons
1.5–2px stroke · 16px / 20px / 24px
Use currentColor icons for attach, add, navigation, and build states; keep one visual weight and label controls with text.
System metrics
Radius
control 8pxfield 12pxpanel 16pxpill 999px
Spacing
Unit 4pxValue 4pxPage 28pxValue 28pxSection 72px
Motion
micro 160ms ease-outstandard 220ms cubic-bezier(.2,.8,.2,1)reduced Disable non-essential motion
Elevation
panel
0 18px 50px rgba(24,24,27,.12)Prompt and template surfaces
darkPanel
0 22px 60px rgba(0,0,0,.34)Dark-mode focus surfaces
Surfaces & shape
light-canvas
#fafafaQuiet page background
light-surface
#ffffffCards and form surfaces
dark-canvas
#09090bDark page background
dark-surface
#18181bDark cards and console surfaces
Guidelines
Do
- Keep the prompt as the dominant action and use neutral surfaces with one restrained signal color.
- Use monospace only for technical metadata, not for long explanatory copy.
- Make generated, loading, and publish-ready states explicit and reversible.
- Preserve generous whitespace and let templates scan as compact cards.
Don't
- ×Do not recreate the v0 mark, template thumbnails, product copy, or proprietary assets.
- ×Do not turn the specimen into a dashboard; each element should represent one prompt-building decision.
- ×Do not hide attach, submit, or focus states behind icon-only controls.
- ×Do not use gradients as the primary canvas treatment; the reference is mostly neutral.
Imagery
Use original abstract geometry, code-like lines, gradients, and browser/runtime framing only when they clarify the workflow. Never copy reference screenshots, logos, customer imagery, template thumbnails, or proprietary illustrations.
Layout
Use a centered max-width shell, clear section rhythm, one dominant task per specimen, and a single-column fallback at 520–760px. Keep tables and runtime rows scroll-safe.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
v0-inspired Prompt Workshop Interface Elements
16 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Observable-inspired Signal Notebook
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Replit-inspired Build Canvas
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
Perplexity-inspired Research Desk
An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.