An unofficial, original Lovable-inspired Product Canvas system grounded in 16 retained, evidence-backed interface patterns.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An approachable product surface that turns a plain-language idea into a working product and makes the next refinement or deployment step feel close.
Warm, light-first product-building canvas with friendly typography, plain-langua themeTypography
Camera Plain Variable
Observed site-wide UI, hero, headings, and body copy
"Camera Plain Variable", ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
System mono fallback
Optional technical status and code snippets only
ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
canvas
#fafafaPage canvas in light mode
surface
#ffffffRaised content surface in light mode
surface-dark
#1b1924Raised content surface in dark mode
text
#030303Primary readable text
muted
#616161Supporting copy and metadata
border
#e6e2e6Quiet dividers and control outlines
accent
#f06d9aPrimary action or active state
accent-secondary
#8b7cf7Secondary signal or gradient stop
dark-canvas
#101018Page canvas in dark mode
dark-text
#fafafaPrimary readable text in dark mode
Type scale
| 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
Iconography
Pair simple outline icons with plain-language labels for preview, connectors, security, payments, and deploy; keep icon geometry calm and unobtrusive.
System metrics
Radius
Spacing
Motion
Elevation
card
0 16px 44px rgba(38,23,42,.1)Prompt and proof cards
darkCard
0 22px 58px rgba(0,0,0,.28)Dark-mode content surfaces
Surfaces & shape
light-canvas
#fafafaQuiet page background
light-surface
#ffffffCards and form surfaces
dark-canvas
#101018Dark page background
dark-surface
#1b1924Dark cards and console surfaces
Guidelines
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
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
15 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
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.
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.
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.