Design system Paid source16 components

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.

Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.

Theme support:: Unverified
Installation:: No verified installation path listed

Original UI demo · 1.0.0

HTML / CSS / JavaScript with local sample interactions. Reference-site source is not included.

Design foundations

Inspect the kit's typography, palette, icons, spacing and motion.

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.

Reference style: Neutral light/dark builder canvas with a quiet prompt surface, compact technical

Visit website

Typography

Font families

Geist Sans

UI, display, navigation, and readable body copy

GeistSans, "GeistSans Fallback", ui-sans-serif, system-ui, sans-serif

Font website

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

Font website

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

#fafafa

Page canvas in light mode

surface

#ffffff

Raised content surface in light mode

surface-dark

#18181b

Raised content surface in dark mode

text

#18181b

Primary readable text

muted

#71717a

Supporting copy and metadata

border

#e4e4e7

Quiet dividers and control outlines

accent

#18181b

Primary action or active state

accent-secondary

#6366f1

Secondary signal or gradient stop

dark-canvas

#09090b

Page canvas in dark mode

dark-text

#fafafa

Primary 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.

Lucide npm package

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

#fafafa

Quiet page background

light-surface

#ffffff

Cards and form surfaces

dark-canvas

#09090b

Dark page background

dark-surface

#18181b

Dark 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.

Assigned collection

v0-inspired Prompt Workshop Interface Elements

16 published components in collection order

Components

Built from the same system

These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.

Open collection

201

Prompt Workshop Buttons

HTML/CSS · JavaScript

HTML/CSS · JavaScript

Frontend Forever

132

Prompt Workshop Layouts

HTML/CSS · JavaScript

Frontend Forever

More AI Kits

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.

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.