---
version: alpha
name: Lovable
website: "https://lovable.dev"
description: A warm, parchment-toned design system anchored on a cream canvas (#f7f4ed) and Camera Plain Variable, a humanist variable typeface that runs at weights 400, 480, and 600. The entire gray scale is derived from a single charcoal hex (#1c1c1c) modulated at opacity stops (0.03, 0.04, 0.4, 0.82, 0.83) — every tonal shade is technically the same hue, just more or less transparent. Headlines compress at display sizes with aggressive negative letter-spacing (-0.9px to -1.5px), creating editorial confidence. Buttons get a signature multi-layer inset shadow (a 0.5px white top-edge highlight over a dark ring) that reads as pressed-into-surface rather than floating. Borders (`#eceae4` passive, `rgba(28,28,28,0.4)` interactive) replace shadows as the primary containment mechanism. Full-pill radius (9999px) is reserved for action toggles and icon buttons — never rectangular CTAs.

seo:
  title: "Lovable Design System for React — Cream (#f7f4ed), Camera Plain VF"
  metaDescription: "Lovable's design system as a DESIGN.md file. Cream #f7f4ed, Camera Plain Variable, opacity-based grays. For React, Next.js, and AI tools."
  highlights:
    - "Parchment cream canvas (#f7f4ed) — deliberate warm cream, not white, not beige; the foundation of every surface"
    - "Opacity-driven grays — every tonal shade derives from #1c1c1c at 3%, 4%, 40%, 82%, or 83% transparency"
    - "Camera Plain Variable at weight 480 — a variable font lets headlines hit intermediate weights between regular and semibold"
    - "Signature inset shadow on dark buttons — a 0.5px white top-edge highlight over a 0.5px dark ring reads as pressed, not floating"
    - "Borders, not shadows, for containment — #eceae4 hairlines define cards; the system caps at one diffused focus glow"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Lovable's design system is built on warmth through restraint. The page floor is a parchment cream (#f7f4ed) — not white, not beige, a deliberate hand-selected tone that immediately separates the site from the cold-white conventions of developer tools. Text is near-black charcoal (#1c1c1c) rather than pure black. The custom Camera Plain Variable typeface carries humanist warmth: slightly rounded terminals and organic curves that contrast with the geometric sans-serifs most AI builders default to. At display sizes (48–60px), the font compresses headlines with aggressive negative letter-spacing (-0.9px to -1.5px) for editorial confidence. The depth system is intentionally shallow — borders define boundaries, not shadows.

    This page packages the full system into a single DESIGN.md file. Inside: a cream-and-charcoal palette where every gray is the same hex (#1c1c1c) at different opacity stops, a 13-step type scale running on Camera Plain Variable at three weights (400, 480, 600), a 6-tier radius scale from 4px micro to 9999px full pill, and a component inventory covering buttons, cards, inputs, navigation, AI chat input, template gallery, and stats bars. The format is the Google Labs DESIGN.md spec — machine-readable tokens alongside human prose.

    Feed the file to Claude, Cursor, GitHub Copilot, or any AI tool that reads structured design tokens. The agent will reproduce Lovable's parchment warmth (cream canvas, opacity-based grays, inset-shadowed buttons) instead of a generic shadcn theme. Reference the tokens directly to paste into Tailwind config or CSS variables. The system is worth studying for one discipline alone: deriving an entire neutral palette from a single hue at varied transparency rather than inventing arbitrary gray hexes.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://lovable.dev"
      title: "Lovable's product site"
      description: "The AI app builder whose visual system this DESIGN.md captures."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Lovable's primary brand color?"
      answer: "Lovable doesn't have a saturated accent color in the traditional sense. The brand's primary surface is a parchment cream (#f7f4ed) that acts as both page background and card surface, paired with a near-black charcoal (#1c1c1c) for text, headings, and dark CTA fills. The only chromatic moment is a Tailwind focus ring at rgba(59,130,246,0.5) for accessibility — otherwise the palette is intentionally warm-neutral with no secondary accent."
    - id: "typography"
      title: "What typography does Lovable use?"
      answer: "Lovable runs Camera Plain Variable, a custom humanist variable typeface, with ui-sans-serif and system-ui as fallbacks. Three weights are used: 400 for body, UI, links, and buttons; 480 as a special display weight enabled by the variable font's continuous weight axis; and 600 for headings and emphasis. The 13-step scale runs from 14px captions to 60px display heroes, with negative letter-spacing (-0.9px to -1.5px) compressing headlines at scale."
    - id: "opacity-grays"
      title: "Why does Lovable derive grays from opacity instead of hex values?"
      answer: "Every gray in the system is the same charcoal (#1c1c1c) rendered at varying transparency levels — 0.03, 0.04, 0.4, 0.82, 0.83. This creates a tonal coherence that's nearly impossible to achieve with arbitrary hex values, because every shade shares the exact same hue. Subtle hover backgrounds (#1c1c1c at 4%), body copy (#1c1c1c at 82%), and interactive borders (#1c1c1c at 40%) all sit on the same warm tonal axis."
    - id: "inset-shadow"
      title: "What is the signature inset shadow on Lovable buttons?"
      answer: "Dark CTA buttons carry a multi-layer inset: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset for a white top-edge highlight, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset for a dark ring, plus rgba(0,0,0,0.05) 0px 1px 2px 0px for a soft drop. The combined effect reads as pressed-into-surface rather than floating-above-surface — a tactile, almost mechanical feel that complements the warm cream foundation."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React app?"
      answer: "Yes — the file is designed to feed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Lovable's parchment warmth, opacity-based grays, and inset-shadowed buttons rather than a generic shadcn theme. You can also reference tokens directly: every hex, font weight, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. The system pairs naturally with shadcn/ui and Radix primitives, which is what Lovable itself uses."
    - id: "shape-language"
      title: "What is Lovable's shape language?"
      answer: "Six radius tiers: 4px micro for tiny interactive elements, 6px standard for buttons, inputs, and nav menu, 8px comfortable for compact cards, 12px for standard cards and image containers, 16px for large containers and footer sections, and 9999px full pill for action toggles and icon buttons. The system reserves the pill radius strictly for icon-style targets — never rectangular CTAs. Cards rely on 1px #eceae4 borders instead of shadows for containment."

colors:
  cream: "#f7f4ed"
  charcoal: "#1c1c1c"
  off-white: "#fcfbf8"
  charcoal-83: "rgba(28,28,28,0.83)"
  charcoal-82: "rgba(28,28,28,0.82)"
  muted-gray: "#5f5f5d"
  charcoal-40: "rgba(28,28,28,0.4)"
  charcoal-4: "rgba(28,28,28,0.04)"
  charcoal-3: "rgba(28,28,28,0.03)"
  light-cream: "#eceae4"
  cream-surface: "#f7f4ed"
  ring-blue: "rgba(59,130,246,0.5)"
  focus-shadow: "rgba(0,0,0,0.1)"
  button-inset-highlight: "rgba(255,255,255,0.2)"
  button-inset-ring: "rgba(0,0,0,0.2)"
  button-inset-drop: "rgba(0,0,0,0.05)"

typography:
  display-hero:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-alt:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 60px
    fontWeight: 480
    lineHeight: 1.00
    letterSpacing: normal
  section-heading:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.9px
  card-title:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: normal
  body-large:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: normal
  body:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal
  button:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal
  button-small:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal
  link:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal
    textDecoration: underline
  link-small:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal
    textDecoration: underline
  caption:
    fontFamily: "'Camera Plain Variable', ui-sans-serif, system-ui"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: normal

rounded:
  micro: 4px
  standard: 6px
  comfortable: 8px
  card: 12px
  container: 16px
  full: 9999px

spacing:
  xs: 8px
  sm: 10px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
  section-sm: 56px
  section: 80px
  section-lg: 96px
  section-xl: 128px
  section-xxl: 176px
  section-3xl: 192px
  section-4xl: 208px

components:
  button-primary-dark:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.off-white}"
    typography: "{typography.button}"
    rounded: "{rounded.standard}"
    padding: 8px 16px
    shadow: "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"
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.charcoal}"
    typography: "{typography.button}"
    rounded: "{rounded.standard}"
    padding: 8px 16px
    border: "1px solid {colors.charcoal-40}"
  button-cream-surface:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.button}"
    rounded: "{rounded.standard}"
    padding: 8px 16px
  button-pill-icon:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    rounded: "{rounded.full}"
    shadow: "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"
    opacity: "0.5"
  card:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.card-title}"
    rounded: "{rounded.card}"
    border: "1px solid {colors.light-cream}"
  card-featured:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    rounded: "{rounded.container}"
    border: "1px solid {colors.light-cream}"
  card-compact:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    rounded: "{rounded.comfortable}"
    border: "1px solid {colors.light-cream}"
  image-container:
    backgroundColor: "{colors.cream}"
    rounded: "{rounded.card}"
    border: "1px solid {colors.light-cream}"
  text-input:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.body}"
    rounded: "{rounded.standard}"
    border: "1px solid {colors.light-cream}"
    placeholderColor: "{colors.muted-gray}"
    focusRing: "{colors.ring-blue}"
  top-nav:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.button-small}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.charcoal}"
    typography: "{typography.button}"
  link:
    textColor: "{colors.charcoal}"
    typography: "{typography.link}"
    textDecoration: underline
  ai-chat-input:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    border: "1px solid {colors.light-cream}"
  suggestion-pill:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.button-small}"
    rounded: "{rounded.full}"
    border: "1px solid {colors.light-cream}"
  template-card:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.card-title}"
    rounded: "{rounded.card}"
    border: "1px solid {colors.light-cream}"
  stats-number:
    backgroundColor: transparent
    textColor: "{colors.charcoal}"
    typography: "{typography.section-heading}"
  stats-label:
    backgroundColor: transparent
    textColor: "{colors.muted-gray}"
    typography: "{typography.body}"
  footer:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.charcoal}"
    typography: "{typography.caption}"
    rounded: "{rounded.container}"
    border: "1px solid {colors.light-cream}"
---

## 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

| Role | Token | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| Display Hero | `{typography.display-hero}` | 60px | 600 | 1.00–1.10 | -1.5px |
| Display Alt | `{typography.display-alt}` | 60px | 480 | 1.00 | normal |
| Section Heading | `{typography.section-heading}` | 48px | 600 | 1.00 | -1.2px |
| Sub-heading | `{typography.sub-heading}` | 36px | 600 | 1.10 | -0.9px |
| Card Title | `{typography.card-title}` | 20px | 400 | 1.25 | normal |
| Body Large | `{typography.body-large}` | 18px | 400 | 1.38 | normal |
| Body | `{typography.body}` | 16px | 400 | 1.50 | normal |
| Button | `{typography.button}` | 16px | 400 | 1.50 | normal |
| Button Small | `{typography.button-small}` | 14px | 400 | 1.50 | normal |
| Link | `{typography.link}` | 16px | 400 | 1.50 | normal |
| Link Small | `{typography.link-small}` | 14px | 400 | 1.50 | normal |
| Caption | `{typography.caption}` | 14px | 400 | 1.50 | normal |

### 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

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, cream background | Page surface, most content |
| Bordered (Level 1) | `1px solid {colors.light-cream}` | Cards, images, dividers |
| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |
| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active/focus states |
| Ring (Accessibility) | `{colors.ring-blue}` 2px ring | Keyboard focus on inputs |

**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

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Tight single column, reduced padding |
| Mobile | 600–640px | Standard mobile layout |
| Tablet Small | 640–700px | 2-column grids begin |
| Tablet | 700–768px | Card grids expand |
| Desktop Small | 768–1024px | Multi-column layouts |
| Desktop | 1024–1280px | Full feature layout |
| Large Desktop | 1280–1536px | Maximum content width, generous margins |

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