Lovable

# Lovable Design System (V1)

## Overview

This document outlines the core design principles and foundational elements for Lovable's AI app builder. The system emphasizes a minimalist, tech-forward aesthetic with vibrant accents, promoting a sense of innovation and efficiency.

## Color System

The color palette is designed for high contrast and modern appeal.

- **Primary**: `#1B1B1B` (Deep Charcoal - Used for backgrounds, core UI elements)
- **Secondary**: `#FFFFFF` (Pure White - Used for text, cards, contrasting elements)
- **Accent**: `#1E1E1E` (Dark Grey - Subtle variations, borders, secondary backgrounds)
- **Background**: `#FF00A2` (Vibrant Pink - Primary brand accent, calls to action, hero sections)
- **Text Primary**: `#FFFFFF` (Pure White - Default text color for dark backgrounds)

**Palette Breakdown:**
- `#1B1B1B`
- `#FF00A2`
- `#FFFFFF`

## Typography

The typography reinforces the modern and clean aesthetic, prioritizing readability and impact.

- **Headings & Body Font Family**: `Camera Plain Variable`
- **Font Stacks:**
    - `heading`: `Camera Plain Variable`, `ui-sans-serif`, `system-ui`, `sans-serif`
    - `body`: `Camera Plain Variable`, `ui-sans-serif`, `system-ui`, `sans-serif`
    - `paragraph`: `Camera Plain Variable`, `ui-sans-serif`, `system-ui`, `sans-serif`

- **Font Sizes:**
    - `h1`: `20px` (Often used for impactful, concise titles)
    - `h2`: `48px` (Prominent section headings)
    - `body`: `20px` (Generous for readability)

## Spacing & Radius

Consistent spacing and subtle rounding contribute to a professional and structured layout.

- **Base Spacing Unit**: `4px` (All spacing increments should be multiples of this unit)
- **Border Radius**: `7px`

## Voice and Feel

Lovable's brand voice is:

- **Innovative**: Reflecting the cutting-edge nature of AI app development.
- **Efficient**: Emphasizing speed and ease of use.
- **Empowering**: Enabling users to build without deep coding knowledge.
- **Modern & Direct**: Communications are clear, concise, and futuristic.

The overall feel is sophisticated, slightly edgy, and highly functional. The vibrant pink provides an energetic, memorable signature against the minimalist dark tones.

## Implementation Notes

For Tailwind CSS integration, define these variables in your `tailwind.config.js` or directly as CSS custom properties.

```css
/* In your base CSS (e.g., globals.css) */
:root {
  --color-primary: #1B1B1B;
  --color-secondary: #FFFFFF;
  --color-accent: #1E1E1E;
  --color-background: #FF00A2;
  --color-text-primary: #FFFFFF;

  --font-family-primary: "Camera Plain Variable", ui-sans-serif, system-ui, sans-serif;
  --font-family-heading: "Camera Plain Variable", ui-sans-serif, system-ui, sans-serif;

  --font-size-h1: 20px;
  --font-size-h2: 48px;
  --font-size-body: 20px;

  --spacing-unit: 4px; /* For calculating padding/margin: e.g., 2*var(--spacing-unit) */
  --border-radius-base: 7px;
}
```

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
        background: 'var(--color-background)',
        textPrimary: 'var(--color-text-primary)',
      },
      fontFamily: {
        primary: 'var(--font-family-primary)',
        heading: 'var(--font-family-heading)',
      },
      fontSize: {
        'h1': 'var(--font-size-h1)',
        'h2': 'var(--font-size-h2)',
        'body': 'var(--font-size-body)',
      },
      borderRadius: {
        'DEFAULT': 'var(--border-radius-base)',
      },
      spacing: {
        // You might define custom spacing utilities if needed, e.g.,
        // '1': 'calc(1 * var(--spacing-unit))',
        // '2': 'calc(2 * var(--spacing-unit))',
        // ...or rely on Tailwind's default numeric scale and manually apply '4px' multiples.
      }
    },
  },
  plugins: [],
};
```

**Font Loading:** Ensure `Camera Plain Variable` is properly loaded for your project, ideally as a variable font. If not available, ensure fallback fonts provide good readability.