Design system Paid source15 components

Lovable-inspired Product Canvas

An unofficial, original Lovable-inspired Product Canvas system grounded in 15 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

Delivered component specimen

145

Product Canvas Buttons

HTML/CSS · JavaScript

FFrontend Forever

Design foundations

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

Style identity

Lovable-inspired Product Canvas

An approachable product surface that turns a plain-language idea into a working product and makes the next refinement or deployment step feel close.

Reference style: Warm, light-first product-building canvas with friendly typography, plain-langua

Visit website

Typography

Font families

Camera Plain Variable

Observed site-wide UI, hero, headings, and body copy

"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif

Font website

Weights: 100,400,500,600,700,900
Sizes: 14px,16px,18px,24px,48px,64px
Line height: 1.2–1.5
Tracking: normal for body; about -0.04em for large headings

Fallback: 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, monospace

Font website

Weights: 400,600
Sizes: 11px,12px,14px
Line height: 1.5–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

#1b1924

Raised content surface in dark mode

text

#030303

Primary readable text

muted

#616161

Supporting copy and metadata

border

#e6e2e6

Quiet dividers and control outlines

accent

#f06d9a

Primary action or active state

accent-secondary

#8b7cf7

Secondary signal or gradient stop

dark-canvas

#101018

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: 1200px
Section gap: 88–136px
Card padding: 24–36px
Element gap: 10–22px

Iconography

Friendly outline SVG icons

1.5–2px stroke · 16px / 20px / 24px

Pair simple outline icons with plain-language labels for preview, connectors, security, payments, and deploy; keep icon geometry calm and unobtrusive.

Radix Icons npm package

System metrics

Radius

control 8pxfield 12pxcard 20pxpill 999px

Spacing

Unit 4pxValue 4pxPage 28pxValue 28pxSection 72px

Motion

micro 160ms ease-outstandard 260ms cubic-bezier(.2,.8,.2,1)reduced Reduce decorative scale and gradient 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

#fafafa

Quiet page background

light-surface

#ffffff

Cards and form surfaces

dark-canvas

#101018

Dark page background

dark-surface

#1b1924

Dark cards and console surfaces

Guidelines

Do

Use warm neutral surfaces and friendly, plain-language labels around one idea prompt.
Give build, preview, refine, and deploy states a clear narrative order.
Use soft accents sparingly for progress, active capability, and welcoming calls to action.
Respect the cookie banner and make all dismiss/manage actions accessible when reproducing the shell.

Don't

×Do not copy the Lovable logo, customer stories, testimonials, illustrations, or page copy.
×Do not flatten the product story into an admin dashboard; keep the specimen outcome-led.
×Do not use a proprietary font file; use the documented source reference with a system fallback.
×Do not let decorative pink/purple gradients reduce text contrast or obscure state.

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

Lovable-inspired Product Canvas Interface Elements

15 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

145

Product Canvas Buttons

HTML/CSS · JavaScript

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.

v0-inspired Prompt Workshop

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

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.