Lovable Design System

Overview

Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background ({colors.cream} — #f7f4ed) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text ({colors.charcoal} — #1c1c1c) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.

The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses ui-sans-serif, system-ui as fallbacks, acknowledging that the custom typeface carries the brand personality.

What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates {colors.charcoal} at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: 1px solid {colors.light-cream} (#eceae4) for light divisions and 1px solid {colors.charcoal-40} for stronger interactive boundaries.

Key Characteristics:

• Warm parchment background ({colors.cream} — #f7f4ed) — not white, not beige, a deliberate cream that feels hand-selected
• Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
• Opacity-driven color system: all grays derived from {colors.charcoal} at varying transparency levels
• Inset shadow technique on buttons: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset
• Warm neutral border palette: {colors.light-cream} for subtle, {colors.charcoal-40} for interactive elements
• Full-pill radius ({rounded.full} — 9999px) used extensively for action buttons and icon containers
• Focus state uses rgba(0,0,0,0.1) 0px 4px 12px shadow for soft, warm emphasis
• shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling

Colors

Primary

• Cream ({colors.cream} — #f7f4ed): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
• Charcoal ({colors.charcoal} — #1c1c1c): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
• Off-White ({colors.off-white} — #fcfbf8): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.

Neutral Scale (Opacity-Based)

• Charcoal 100% ({colors.charcoal} — #1c1c1c): Primary text, headings, dark surfaces.
• Charcoal 83% ({colors.charcoal-83}): Strong secondary text.
• Charcoal 82% ({colors.charcoal-82}): Body copy.
• Muted Gray ({colors.muted-gray} — #5f5f5d): Secondary text, descriptions, captions.
• Charcoal 40% ({colors.charcoal-40}): Interactive borders, button outlines.
• Charcoal 4% ({colors.charcoal-4}): Subtle hover backgrounds, micro-tints.
• Charcoal 3% ({colors.charcoal-3}): Barely-visible overlays, background depth.

Surface & Border

• Light Cream ({colors.light-cream} — #eceae4): Card borders, dividers, image outlines. The warm divider line.
• Cream Surface ({colors.cream-surface} — #f7f4ed): Card backgrounds, section fills — same as page background for seamless integration.

Interactive

• Ring Blue ({colors.ring-blue} — rgba(59,130,246,0.5)): --tw-ring-color, Tailwind focus ring.
• Focus Shadow (rgba(0,0,0,0.1) 0px 4px 12px): Focus and active state shadow — soft, warm, diffused.

Inset Shadows

• Button Inset (rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px): The signature multi-layer inset shadow on dark buttons.

Typography

Font Family

• Primary: Camera Plain Variable, with fallbacks: ui-sans-serif, system-ui
• Weight range: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
• Feature: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.

Hierarchy

Principles

• Warm humanist voice: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
• Variable weight as design tool: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
• Compression at scale: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
• Two weights, clear roles: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.

Layout

Spacing System

• Base unit: 8px
• Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
• The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room.

Grid & Container

• Max content width: approximately 1200px (centered)
• Hero: centered single-column with massive vertical padding (96px+)
• Feature sections: 2–3 column grids
• Full-width footer with multi-column link layout
• Showcase sections with centered card grids

Whitespace Philosophy

• Editorial generosity: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.
• Content-driven rhythm: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
• Section separation: Footer uses 1px solid {colors.light-cream} border and 16px radius container. Sections defined by generous spacing rather than border lines.

Border Radius Scale

• Micro ({rounded.micro} — 4px): Small buttons, interactive elements
• Standard ({rounded.standard} — 6px): Buttons, inputs, navigation menu
• Comfortable ({rounded.comfortable} — 8px): Compact cards, divs
• Card ({rounded.card} — 12px): Standard cards, image containers, templates
• Container ({rounded.container} — 16px): Large containers, footer sections
• Full Pill ({rounded.full} — 9999px): Action pills, icon buttons, toggles

Elevation

Shadow Philosophy: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders ({colors.light-cream}) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (rgba(0,0,0,0.1) 0px 4px 12px) is deliberately diffused and large, creating a soft glow rather than a sharp outline.

Decorative Depth

• Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible.
• Footer: gradient background with warm tones transitioning to the bottom.
• No harsh section dividers — spacing and background warmth handle transitions.

Components

Buttons

button-primary-dark — Charcoal fill, off-white text, 6px radius, 8×16px padding. Carries the signature multi-layer inset shadow: a 0.5px white top-edge highlight, a 0.5px dark ring, and a soft 1px drop. Active state drops opacity to 0.8; focus adds rgba(0,0,0,0.1) 0px 4px 12px. Used for primary CTAs ("Start Building", "Get Started").

button-ghost — Transparent fill, charcoal text, 1px solid {colors.charcoal-40} border, 6px radius. Used for secondary actions ("Log In", "Documentation").

button-cream-surface — Cream fill, charcoal text, no border, 6px radius. Used for tertiary actions and toolbar buttons.

button-pill-icon — Cream fill, charcoal icon, 9999px radius, same inset shadow as primary dark. Default opacity 0.5, active 0.8. Used for additional actions (plan mode toggle, voice recording).

Cards & Containers

• Background: {colors.cream} (matches page)
• Border: 1px solid {colors.light-cream}
• Radius: 12px (standard), 16px (featured), 8px (compact)
• No box-shadow by default — borders define boundaries
• Image cards: 1px solid {colors.light-cream} with 12px radius

Inputs & Forms

text-input — Cream background, charcoal text, 1px solid {colors.light-cream} border, 6px radius. Placeholder in muted gray ({colors.muted-gray}). On focus, a ring blue outline ({colors.ring-blue}) appears for accessibility.

Navigation

• Clean horizontal nav on cream background, fixed
• Logo/wordmark left-aligned (128.75 × 22px)
• Links: Camera Plain 14–16px weight 400, charcoal text
• CTA: dark button with inset shadow, 6px radius
• Mobile: hamburger menu with 6px radius button
• Subtle border or no border on scroll

Links

• Color: {colors.charcoal}
• Decoration: underline (default)
• Hover: primary accent (via CSS variable hsl(var(--primary)))
• No color change on hover — decoration carries the interactive signal

Image Treatment

• Showcase/portfolio images with 1px solid {colors.light-cream} border
• Consistent 12px border radius on all image containers
• Soft gradient backgrounds behind hero content (warm multi-color wash)
• Gallery-style presentation for template/project showcases

Distinctive Components

ai-chat-input — Large prompt input area with cream background, soft {colors.light-cream} borders, and 12px radius. Suggestion pills sit beneath, each with the same border tone. Voice recording and plan-mode toggle buttons render as pill shapes ({rounded.full}). The input area reads as warm and inviting rather than clinical.

template-card — Card grid showing project templates. Each card holds an image plus title, with 1px solid {colors.light-cream} border and 12px radius. Hover state: subtle shadow or border darkening. Category labels render as text links.

stats-number / stats-label — Large metrics in 48px+ weight 600 charcoal ("0M+" pattern), descriptive text below in muted gray. Horizontal layout with generous spacing.

Responsive Behavior

Touch Targets

• Buttons: 8×16px padding (comfortable touch)
• Navigation: adequate spacing between items
• Pill buttons: 9999px radius creates large tap-friendly targets
• Menu toggle: 6px radius button with adequate sizing

Collapsing Strategy

• Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing
• Navigation: horizontal links → hamburger menu at 768px
• Feature cards: 3-column → 2-column → single column stacked
• Template gallery: grid → stacked vertical cards
• Stats bar: horizontal → stacked vertical
• Footer: multi-column → stacked single column
• Section spacing: 128px+ → 64px on mobile

Image Behavior

• Template screenshots maintain 1px solid {colors.light-cream} border at all sizes
• 12px border radius preserved across breakpoints
• Gallery images responsive with consistent aspect ratios
• Hero gradient softens/simplifies on mobile

Known Gaps

• Hover state colors: hover specifics are described in qualitative terms (subtle shadow or border darkening) but exact transition tokens were not extracted.
• Loading states / skeleton screens: not visible on the extracted surfaces.
• Dark mode: the system as captured is light-only; no dark variant tokens are documented.
• Form input error states: focus-ring tokens are documented, but error outline + helper-text combinations on validation failure were not visible in the captured surfaces.
• Decorative gradients: the hero and footer gradients are described qualitatively (pinks, oranges, blues / warm transitioning tones) but no exact stop colors are captured.