Lovable

---
version: alpha
name: "Lovable Light"
description: "Lovable's design system pairs a dramatic full-bleed aurora gradient hero (cycling through blue, purple, pink, and orange) with a warm off-white surface palette (#eceae4, #fcfbf8). The single typeface. Camera Plain Variable. spans all roles from 14px body to 60px display, using weight and size contrast for hierarchy. Rounded cards (12px radius) and a prominent chat-input prompt box anchor the AI-first interaction model. The overall tone is warm, approachable, and visually expressive while remaining structurally minimal."
colors:
  accent-blue: "#1f55f1"
  footer-surface: "#f7f4ed"
  surface-base: "#eceae4"
  surface-primary: "#fafafa"
  surface-warm-white: "#fcfbf8"
  foreground-primary: "#030303"
  text-muted: "#5f5f5d"
  text-secondary: "#1c1c1c"
  border-default: "#e7e7e6"
typography:
  display-xl:
    fontFamily: "Camera Plain Variable"
    fontSize: "60px"
    fontWeight: "480"
    lineHeight: "60px"
  display-l:
    fontFamily: "Camera Plain Variable"
    fontSize: "60px"
    fontWeight: "600"
    lineHeight: "66px"
    letterSpacing: "-1.5px"
  heading-1:
    fontFamily: "Camera Plain Variable"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "52.8px"
    letterSpacing: "-1.2px"
  heading-2:
    fontFamily: "Camera Plain Variable"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "39.6px"
    letterSpacing: "-0.9px"
  heading-3:
    fontFamily: "Camera Plain Variable"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "48px"
  body-large:
    fontFamily: "Camera Plain Variable"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "24.75px"
  body-default:
    fontFamily: "Camera Plain Variable"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-small:
    fontFamily: "Camera Plain Variable"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21px"
  label-medium:
    fontFamily: "Camera Plain Variable"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "24px"
  label-emphasis:
    fontFamily: "Camera Plain Variable"
    fontSize: "14px"
    fontWeight: "480"
    lineHeight: "21px"
  body-xl:
    fontFamily: "Camera Plain Variable"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "30px"
rounded:
  radius-sm: "6px"
  radius-md: "8px"
  radius-lg: "12px"
  radius-xl: "16px"
  radius-2xl: "24px"
  radius-3xl: "28px"
spacing:
  spacing-1: "2px"
  spacing-2: "4px"
  spacing-3: "6px"
  spacing-4: "8px"
  spacing-5: "10px"
  spacing-6: "12px"
  spacing-7: "16px"
  spacing-8: "20px"
  spacing-9: "24px"
  spacing-10: "32px"
  spacing-11: "40px"
  spacing-12: "48px"
  spacing-13: "56px"
  spacing-14: "80px"
  spacing-15: "144px"
  spacing-16: "160px"
---

## Overview

Lovable's design system pairs a dramatic full-bleed aurora gradient hero (cycling through blue, purple, pink, and orange) with a warm off-white surface palette (#eceae4, #fcfbf8). The single typeface. Camera Plain Variable. spans all roles from 14px body to 60px display, using weight and size contrast for hierarchy. Rounded cards (12px radius) and a prominent chat-input prompt box anchor the AI-first interaction model. The overall tone is warm, approachable, and visually expressive while remaining structurally minimal.

**Signature traits:**
- Single-family weight hierarchy: Builds hierarchy from Camera Plain Variable across 3 weights rather than multiple families.
- Soft, rounded geometry: Generous corner rounding up to 28px.
- Layered elevation: Depth comes from 5 validated shadow tokens.

## Colors

The palette uses 9 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `surface-base`: Role "background" is grounded by usage context "Primary page and component background; most-used color across all zones (623 hits). Maps to border/generic roles in ranked evidence.".
- **action-text** maps to `foreground-primary`: Role "text" is grounded by usage context "Primary text, nav links, headings, and button labels. Highest text-role score (402 hits).".
- **border-border** maps to `border-default`: Role "border" is grounded by usage context "Component borders, dividers, and hairlines across header and footer zones.".
- **content-text** maps to `text-secondary`: Role "text" is grounded by usage context "H2 headings and secondary foreground text (probe-confirmed: h2.text-foreground color).".

### Primary Brand
- **Accent Blue** (#1f55f1): CTA accent, interactive highlights, and brand accent fills.. Role: primary.

### Text Scale
- **Foreground Primary** (#030303): Primary text, nav links, headings, and button labels. Highest text-role score (402 hits).. Role: text. {authored: rgb(3, 3, 3), space: rgb}
- **Text Muted** (#5f5f5d): Subdued labels, captions, and secondary nav items.. Role: text. {authored: rgb(95, 95, 93), space: rgb}
- **Text Secondary** (#1c1c1c): H2 headings and secondary foreground text (probe-confirmed: h2.text-foreground color).. Role: text. {authored: rgb(28, 28, 28), space: rgb}

### Interactive
- **Border Default** (#e7e7e6): Component borders, dividers, and hairlines across header and footer zones.. Role: border. {authored: rgb(231, 231, 230), space: rgb}

### Surface & Shadows
- **Footer Surface** (#f7f4ed): Footer background surface; warm cream tone.. Role: background. {authored: rgb(247, 244, 237), space: rgb}
- **Surface Base** (#eceae4): Primary page and component background; most-used color across all zones (623 hits). Maps to border/generic roles in ranked evidence.. Role: background. {authored: rgb(236, 234, 228), space: rgb}
- **Surface Primary** (#fafafa): Card and input surfaces; lighter surface layer above base.. Role: background. {authored: rgb(250, 250, 250), space: rgb}
- **Surface Warm White** (#fcfbf8): Hero section background (probe-confirmed: div.relative backgroundColor). Warm off-white tint.. Role: background. {authored: rgb(252, 251, 248), space: rgb}

## Typography

Typography uses Camera Plain Variable across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Uses Camera Plain Variable throughout for a uniform feel. Weight range spans medium, semi-bold, regular. Sizes range from 14px to 60px.

### Font Roles
- **Headline Font**: Camera Plain Variable
- **Body Font**: Camera Plain Variable

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero display headline — largest typographic expression on the page | Camera Plain Variable | 60px | 480 | 60px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Section hero headline with tight tracking for visual impact | Camera Plain Variable | 60px | 600 | 66px | -1.5px | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Primary section headings (probe-confirmed: h2.text-foreground at 48px) | Camera Plain Variable | 48px | 600 | 52.8px | -1.2px | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Sub-section headings with negative tracking | Camera Plain Variable | 36px | 600 | 39.6px | -0.9px | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Alternative heading style without tracking | Camera Plain Variable | 48px | 600 | 48px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Lead body text and hero subtitles | Camera Plain Variable | 18px | 400 | 24.75px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Primary body copy and nav items (most frequent: 392 hits) | Camera Plain Variable | 16px | 400 | 24px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Secondary labels, captions, and button text (probe-confirmed: signup-link at 14px) | Camera Plain Variable | 14px | 400 | 21px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| UI labels and compact navigation items | Camera Plain Variable | 15px | 400 | 24px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Emphasized small labels and badge text | Camera Plain Variable | 14px | 480 | 21px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |
| Large body paragraphs and feature descriptions | Camera Plain Variable | 20px | 400 | 30px | normal | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 4px base grid with scale values 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 80, 144, 160, 192.

### Responsive Strategy
- **mobile (<= 600px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-1 | 2px | 2 | Extracted spacing token |
| spacing-2 | 4px | 4 | Extracted spacing token |
| spacing-3 | 6px | 6 | Extracted spacing token |
| spacing-4 | 8px | 8 | Extracted spacing token |
| spacing-5 | 10px | 10 | Extracted spacing token |
| spacing-6 | 12px | 12 | Extracted spacing token |
| spacing-7 | 16px | 16 | Extracted spacing token |
| spacing-8 | 20px | 20 | Extracted spacing token |
| spacing-9 | 24px | 24 | Extracted spacing token |
| spacing-10 | 32px | 32 | Extracted spacing token |
| spacing-11 | 40px | 40 | Extracted spacing token |
| spacing-12 | 48px | 48 | Extracted spacing token |
| spacing-13 | 56px | 56 | Extracted spacing token |
| spacing-14 | 80px | 80 | Extracted spacing token |
| spacing-15 | 144px | 144 | Extracted spacing token |
| spacing-16 | 160px | 160 | Extracted spacing token |
| spacing-17 | 192px | 192 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| shadow-surface-sm | 2 | 0 0 0px 2px |
| shadow-surface-highlight | 4 | inset 0.01 0 0px 1px |
| shadow-border-inset | 1 | inset 0px 0px 0px 1px rgb(0, 0, 0) |
| shadow-surface-edge | 2 | inset 0 0 0px 0.5px |
| shadow-border-subtle-inset | 1 | inset 0 0 0px 0px |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(3, 3, 3) ; lab(0.903296 0 0) ; lab(98.2716 0 0) |
| Light | outline-width | 3px ; 2px |
| Light | outline-offset | 0px ; 2px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -1280, 0) ; matrix(1, 0, 0, 1, -382.627, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 6px | 6 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-lg | 12px | 12 | Control corner |
| radius-xl | 16px | 16 | Card corner |
| radius-2xl | 24px | 24 | Large surface corner |
| radius-3xl | 28px | 28 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 6px | px |
| radius-md | 8px | px |
| radius-lg | 12px | px |
| radius-xl | 16px | px |
| radius-2xl | 24px | px |
| radius-3xl | 28px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Single-family weight hierarchy, Soft, rounded geometry, Layered elevation without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 600px | (max-width: 600px) |
| Breakpoint 2 | Unknown | (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2x) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.