lovable.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
Lovable.dev employs a "soft futurism" aesthetic that balances playful warmth with technical sophistication. The interface uses generous whitespace, organic rounded corners, and dreamy aurora gradients to democratize AI tooling—making complex development feel approachable and delightful. The design language emphasizes conversational interaction through chat-based inputs while maintaining enterprise credibility through clean typographic hierarchy and subdued color blocking.

## Design System

### 1. Core Style
- **Aesthetic**: Soft gradient maximalism meets minimalist SaaS
- **Shape Language**: Ultra-rounded corners (rounded-2xl to rounded-3.5xl), pill-shaped buttons, organic blob-like background gradients
- **Layout**: Centered single-column narratives with full-width bleed sections, asymmetric two-column feature layouts
- **Elevation**: Subtle shadow-xs for cards, heavy backdrop-blur for navigation overlays

### 2. Color Palette
- **Primary Background**: Off-white/cream (`bg-muted`) with occasional stark white cards
- **Accent Gradient**: Aurora mesh transitioning from electric blue → magenta pink → coral orange → deep red (hero background)
- **Text**: Near-black (`text-foreground`) for headings, muted gray for body copy
- **Surface**: Beige/cream (`#F5F3EE` approx) for stat cards and feature containers
- **Interactive**: Solid black for primary CTAs, blue badge accents for "New" indicators

### 3. Font Stack
- **Family**: Clean geometric sans-serif (Inter or similar system font stack)
- **Weights**: Heavy 700-800 for display headings, 400-500 for body
- **Sizing**: Large display typography (48-64px) for section headers with tight leading
- **Treatment**: Sentence case with occasional ALL CAPS for small labels

### 4. Texture
- **Gradients**: Mesh/aurora gradients with heavy blur and noise texture in hero sections
- **3D Elements**: Gradient spheres/blobs with soft shadows for visual interest
- **Glassmorphism**: Backdrop blur effects on navigation and floating elements

### 5. Motion Design
- **Micro-interactions**: Smooth transitions on accordion items, hover states with scale transforms
- **Scroll Behavior**: Sticky section headers with fade-in content
- **Interactive States**: Active accordion items highlighted with full opacity while siblings dim to 50%

## Component Guidelines

### Button
- **Primary**: Solid black background, white text, fully rounded (rounded-full), compact padding
- **Secondary**: Ghost/outline with border, transparent background
- **Tertiary**: Text-only with arrow icon, often paired with "New" badge

### Card
- **Template Cards**: White background, rounded-2xl, subtle border, thumbnail aspect ratio 16:10, hover lift effect
- **Stat Cards**: Cream/beige background (`bg-muted`), rounded-2xl, extra large typography for numbers, minimal padding
- **Cookie Consent**: Fixed bottom-right, white background, rounded-3xl, shadow-lg, compact padding

### Navigation
- **Desktop**: Horizontal flex with dropdown triggers, transparent initially with blur on scroll
- **Mobile**: Hamburger menu (implied from responsive classes)
- **Structure**: Logo left, links center-right, auth CTAs far right

### Input
- **Chat Interface**: Large rounded container (rounded-3.5xl), muted background, multi-line textarea appearance with action buttons inset
- **Placeholder**: Gray muted text indicating AI prompting capability

### Typography
- **Display**: Heavy weight, tight letter-spacing, large scale (3-4rem)
- **Body**: Comfortable line-height (1.6), muted gray color for secondary text
- **Labels**: Small caps or uppercase for navigation links, often with chevron indicators for dropdowns

## Distinctive Element Few-shot Examples

### 1. Aurora Hero with Conversational Input
**Purpose:**
Primary conversion area that immediately demonstrates the product's chat-based AI functionality while establishing emotional connection through vibrant, dreamy gradients.

**Evidence:**
- DOM: `section.relative.flex.min-h-screen.w-full.flex-col.items-center` containing `form#chat-input` with class `group flex flex-col gap-2 p-3 rounded-3.5xl bg-muted w-full`
- Visual: Full viewport gradient background (blue→pink→orange), centered headline "Build something Lovable", prominent chat input with placeholder "Ask Lovable to create a dashboard to..."

**Visual Rules:**
- Layout: Full viewport height, flex column centered, z-index layered background
- Color: Aurora mesh gradient (heavy blur, 200-300px radius) spanning full width; white/off-white input container
- Typography: 48-56px bold centered heading, 18px regular subheading below
- Spacing: Generous vertical padding (20vh+), input width max-w-3xl centered
- Radius / border / shadow: Input uses rounded-3.5xl (28px), shadow-lg, 1px subtle border; "New" badge pill-shaped with arrow icon
- Motion: Gradient subtly shifts or pulses; input has focus ring animation; send button has hover scale

**Recreation Prompt:**
Create a hero section with a full-viewport aurora gradient background transitioning from electric blue through magenta to coral. Center a large bold heading "Build something Lovable" with a muted subheading beneath. Below, place a prominent chat input form with ultra-rounded corners (rounded-3xl), muted cream background, containing a textarea placeholder "Ask Lovable to create a dashboard to..." with inset action buttons (attachment, voice, send) aligned to the bottom right. Add a small "New" pill badge with arrow above the headline linking to the mobile app. Use heavy backdrop blur on the gradient layers.

**Structure Sketch:**
```html
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-b from-blue-400 via-pink-500 to-orange-500 blur-3xl opacity-80"></div>
  
  <div class="relative z-10 flex flex-col items-center gap-6 max-w-4xl mx-auto px-6">
    <a href="#" class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border text-sm">
      <span class="px-2 py-0.5 rounded-full bg-blue-600 text-white text-xs font-bold">New</span>
      Try the Lovable mobile app →
    </a>
    
    <h1 class="text-5xl md:text-6xl font-bold text-center">Build something Lovable</h1>
    <p class="text-xl text-gray-600 text-center">Create apps and websites by chatting with AI</p>
    
    <form class="w-full max-w-2xl bg-muted rounded-3xl p-4 shadow-lg border">
      <textarea placeholder="Ask Lovable to create a dashboard to..." class="w-full bg-transparent resize-none h-24"></textarea>
      <div class="flex justify-between items-center mt-2">
        <button type="button" class="p-2 rounded-full hover:bg-gray-200">+</button>
        <div class="flex gap-2">
          <button type="button" class="px-3 py-1.5 rounded-lg text-sm text-gray-600">Build ⌄</button>
          <button type="button" class="p-2 rounded-full text-gray-600">🎤</button>
          <button type="submit" class="p-2 rounded-full bg-gray-800 text-white">↑</button>
        </div>
      </div>
    </form>
  </div>
</section>
```

### 2. Interactive Feature Accordion with 3D Visual
**Purpose:**
Product education section that breaks down the workflow into three digestible steps while using a mesmerizing 3D gradient sphere to maintain visual interest and convey "magic/AI" quality.

**Evidence:**
- DOM: `section` containing heading "Meet Lovable" with three `button` elements containing "Start with an idea", "Watch it come to life", "Refine and ship"
- Visual: Left side contains large cream-colored container with floating gradient sphere (pink→purple); right side has accordion-style list where active item is black text, inactive items are gray/muted

**Visual Rules:**
- Layout: Two-column grid (60/40 split), left column sticky or fixed visual container, right column scrollable content
- Color: Cream/beige container background (`bg-muted`), gradient sphere with pink-coral-purple mesh, text transitions from gray-400 to black on active
- Typography: 32-40px bold headings for each step, 16-18px regular description text
- Spacing: Large gap between accordion items (40-60px), generous padding in visual container
- Radius / border / shadow: Left container rounded-2xl, sphere has soft drop-shadow
- Motion: Sphere subtly rotates or floats; accordion items fade opacity on hover/inactive; smooth height transitions

**Recreation Prompt:**
Create a two-column section with a large rounded-2xl cream/beige container on the left occupying 60% width, containing a floating 3D gradient sphere (pink to purple to coral) with soft shadow. On the right, stack three accordion items vertically with large bold headings. The active item should be fully black opaque text with visible description; inactive items should be 40% opacity gray. Each item has a heading (e.g., "Start with an idea") and supporting description text. On hover or scroll-trigger, the sphere subtly changes gradient angle or rotates. Use smooth transitions between active states.

**Structure Sketch:**
```html
<section class="max-w-7xl mx-auto px-6 py-24">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
    <div class="bg-muted rounded-2xl aspect-square flex items-center justify-center relative overflow-hidden">
      <div class="w-64 h-64 rounded-full bg-gradient-to-br from-pink-400 via-purple-400 to-orange-400 blur-sm shadow-2xl"></div>
    </div>
    
    <div class="flex flex-col gap-12">
      <h2 class="text-4xl font-bold mb-8">Meet Lovable</h2>
      
      <button class="text-left group transition-opacity duration-300">
        <h3 class="text-3xl font-bold text-black mb-3">Start with an idea</h3>
        <p class="text-lg text-gray-600">Describe the app or website you want to create or drop in screenshots and docs</p>
      </button>
      
      <button class="text-left opacity-40 hover:opacity-100 transition-opacity duration-300">
        <h3 class="text-3xl font-bold mb-3">Watch it come to life</h3>
        <p class="text-lg">See your vision transform into a working prototype in real-time as AI builds it for you</p>
      </button>
      
      <button class="text-left opacity-40 hover:opacity-100 transition-opacity duration-300">
        <h3 class="text-3xl font-bold mb-3">Refine and ship</h3>
        <p class="text-lg">Iterate on your creation with simple feedback and deploy it to the world with one click</p>
      </button>
    </div>
  </div>
</section>
```

### 3. Template Gallery Grid
**Purpose:**
Social proof and discovery mechanism showcasing the variety of outputs possible with the platform, using visual previews to inspire users.

**Evidence:**
- DOM: `section` with heading "Discover templates" containing `div.grid.w-full.grid-cols-1.gap-6.md:grid-cols-3.lg:grid-cols-4` with 8 article children
- Visual: Grid of cards with website screenshots, rounded corners, title and subtitle below each thumbnail, "View all" link top-right

**Visual Rules:**
- Layout: Responsive grid (1 col mobile, 3 col tablet, 4 col desktop), gap-6 (24px)
- Color: White card backgrounds, subtle border-gray-200, text dark gray/black
- Typography: 18px semibold titles, 14px regular muted subtitles
- Spacing: Consistent 16-24px padding inside cards, 8px gap between image and text
- Radius / border / shadow: rounded-2xl for cards, overflow-hidden on image containers, subtle shadow-xs or border
- Motion: Hover scale transform (1.02) on cards, image zoom within container

**Recreation Prompt:**
Create a template gallery section with a header row containing left-aligned "Discover templates" heading and "View all" link on the right. Below, implement a responsive grid: 1 column mobile, 3 columns tablet, 4 columns desktop with 24px gaps. Each card has rounded-2xl white background with subtle border, containing a 16:10 aspect ratio thumbnail image (website screenshot), followed by 16px padding containing a semibold title (e.g., "Personal portfolio") and smaller muted subtitle (e.g., "Personal work showcase"). Add hover effects: slight Y-axis lift and shadow increase. Images should have object-cover and subtle rounded tops.

**Structure Sketch:**
```html
<section class="max-w-7xl mx-auto px-6 py-20">
  <div class="flex justify-between items-baseline mb-12">
    <h2 class="text-4xl font-bold">Discover templates</h2>
    <a href="#" class="text-sm font-medium hover:underline">View all →</a>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <article class="group cursor-pointer">
      <div class="rounded-2xl border overflow-hidden mb-4 aspect-[16/10]">
        <img src="template-preview.jpg" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>
      <h3 class="font-semibold text-lg mb-1">Personal portfolio</h3>
      <p class="text-gray-600 text-sm">Personal work showcase</p>
    </article>
    <!-- Repeat for 7 more templates -->
  </div>
</section>
```

### 4. Large Stats Cards
**Purpose:**
Credibility signaling through massive social proof numbers, presented in a clean, scannable format that emphasizes scale without overwhelming the viewer.

**Evidence:**
- DOM: `section` heading "Lovable in numbers" with `div.grid.grid-cols-1.gap-2.lg:grid-cols-3` containing "36M+", "200K+", "300M"
- Visual: Three large cream/beige rounded cards spanning full width, each containing giant typography number and small label beneath

**Visual Rules:**
- Layout: 3-column grid on desktop, stacked on mobile, gap-4 (16px)
- Color: Cream/beige background (`bg-muted`), black text for numbers, dark gray for labels
- Typography: 64-80px bold sans-serif for numbers, 16px regular for descriptions
- Spacing: Large internal padding (40-60px), generous whitespace around numbers
- Radius / border / shadow: rounded-2xl, no border or very subtle, shadow-xs optional
- Motion: Count-up animation on scroll into view, subtle hover lift

**Recreation Prompt:**
Create a stats section with a left-aligned header "Lovable in numbers" and subheading "Millions of builders are already turning ideas into reality". Below, three equal-width cards in a row with cream/beige background (`#F5F3EE` or similar), rounded-2xl corners, and large internal padding (48px). Each card displays a massive statistic (e.g., "36M+", "200K+", "300M") in 72px bold black font, with a smaller description label beneath (e.g., "projects built on Lovable") in 16px regular weight. On mobile, stack vertically with full width. Add subtle entrance animation where numbers count up when scrolled into viewport.

**Structure Sketch:**
```html
<section class="max-w-7xl mx-auto px-6 py-24">
  <div class="mb-16">
    <h2 class="text-4xl font-bold mb-4">Lovable in numbers</h2>
    <p class="text-xl text-gray-600">Millions of builders are already turning ideas into reality</p>
  </div>
  
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="bg-muted rounded-2xl p-10 md:p-12">
      <div class="text-6xl md:text-7xl font-bold mb-4">36M+</div>
      <p class="text-gray-700 text-lg">projects built on Lovable</p>
    </div>
    
    <div class="bg-muted rounded-2xl p-10 md:p-12">
      <div class="text-6xl md:text-7xl font-bold mb-4">200K+</div>
      <p class="text-gray-700 text-lg">projects built per day on Lovable</p>
    </div>
    
    <div class="bg-muted rounded-2xl p-10 md:p-12">
      <div class="text-6xl md:text-7xl font-bold mb-4">300M</div>
      <p class="text-gray-700 text-lg">visits per day to Lovable-built applications</p>
    </div>
  </div>
</section>
```

### 5. Mega Footer Grid
**Purpose:**
Comprehensive navigation and SEO optimization while maintaining the clean, organized aesthetic of the brand through structured column layouts.

**Evidence:**
- DOM: `footer` with `nav.grid.grid-cols-2.gap-x-8.gap-y-12.sm:grid-cols-3.lg:grid-cols-6` containing category headings: "Company", "Product", "Resources", "Legal", "Community"
- Visual: Multi-column footer with category headers (h3) and link lists, contained within rounded-2xl border box with muted background

**Visual Rules:**
- Layout: CSS Grid with 2 cols mobile, 3 cols tablet, 6 cols desktop; contained within rounded container
- Color: Muted/cream background (`border-muted-border bg-muted`), dark text links, headers slightly bolder
- Typography: 14-16px semibold headers, 14px regular links with hover states
- Spacing: Large gap-x (32px) and gap-y (48px), generous padding (24px) inside footer container
- Radius / border / shadow: rounded-2xl border, subtle shadow
- Motion: Link hover opacity or underline transition

**Recreation Prompt:**
Create a footer contained within a rounded-2xl border box with muted cream background. Inside, use a 6-column grid on desktop (collapsing to 3 on tablet, 2 on mobile) with 32px horizontal and 48px vertical gaps. Each column has an h3 header (e.g., "Company", "Product", "Resources") in semibold 14-16px, followed by a vertical stack of links in 14px regular weight. Categories include Company, Product, Resources, Legal, Community. Links should have hover opacity change. Add internal padding of 24px around the entire footer container.

**Structure Sketch:**
```html
<footer class="border border-gray-200 bg-muted rounded-2xl p-6 mx-6 mb-6">
  <nav class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-x-8 gap-y-12">
    <div>
      <h3 class="font-semibold mb-4">Company</h3>
      <ul class="space-y-3 text-sm">
        <li><a href="#" class="hover:opacity-70">Careers</a></li>
        <li><a href="#" class="hover:opacity-70">Press & media</a></li>
        <li><a href="#" class="hover:opacity-70">Enterprise</a></li>
      </ul>
    </div>
    
    <div>
      <h3 class="font-semibold mb-4">Product</h3>
      <ul class="space-y-3 text-sm">
        <li><a href="#" class="hover:opacity-70">Pricing</a></li>
        <li><a href="#" class="hover:opacity-70">Security</a></li>
        <li><a href="#" class="hover:opacity-70">Templates</a></li>
      </ul>
    </div>
    
    <!-- Repeat for Resources, Legal, Community columns -->
  </nav>
</footer>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** mixed

#### Color Roles
- **color.text.primary:** #1c1c1c (176)
- **color.text.secondary:** #1c1c1c (68)
- **color.surface.base:** #f7f4ed (9)
- **color.accent:** #eceae4 (93)
- **color.border.default:** #eceae4 (196)
- **color.focus.ring:** #1c1c1c (176)

#### Typography Roles
- **font.family.primary:** Camera Plain Variable (198)
- **font.size.display:** 60px (9)
- **font.size.body:** 16px (63)
- **font.size.label:** 15px (6)
- **ratio:** display is 3.75x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 12px (92)
- **space.2:** 6px (37)
- **space.3:** 10px (27)
- **space.4:** 4px (24)
- **space.5:** 8px (24)

#### Radius Roles
- **radius.medium:** 7px (9)
- **radius.pill:** 32px (1)

#### Shadow Intent
- **level:** rare accent
- **usage:** 4
- **note:** 4 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** moderate
- **range:** 150-300ms
- **common durations:** 150ms (71), 200ms (6), 300ms (2)
- **easing style:** cubic-bezier(0.4, 0, 0.2, 1) (59), ease, ease, ease, ease (13), cubic-bezier(0, 0, 0.2, 1) (6)

### Distinctive Implementation Signals

- Frequent pill radius (32px) creates a soft/capsule interaction language.
- Motion is moderate, centered around 150-300ms.
- Type hierarchy is ratio-driven: display is 3.75x body.

### Extraction Diagnostics

- Sampled 198 visible elements from 956 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.