Lovable

### Overview

Lovable.dev's design system emphasizes a clean, modern, and high-tech aesthetic, reflecting its core mission of AI-powered development. The design aims for clarity and elegance, making sophisticated tools feel intuitive and accessible. A vibrant accent color provides energy, contrasting with a largely monochromatic base palette that ensures content takes center stage.

### Color System

The color palette is meticulously crafted to convey innovation and professionalism, punctuated by a striking accent to highlight key actions and information.

*   **Primary:** `#000000` (Black) - Used for strong visual elements, primary text where extra emphasis is needed.
*   **Secondary:** `#FFFFFF` (White) - Foundation for backgrounds and crucial contrasting elements.
*   **Accent:** `#AE55EF` (Vibrant Purple) - Highlights interactive elements, calls to action, and key information, bringing a distinct modern vibe.
*   **Background:** `#DAE0FF` (Light Blue/Lavender) - A soft, ethereal background color that provides a serene and inviting canvas.
*   **Surface:** `#FFFFFF` (White) - Used for cards, panels, and distinct content blocks, ensuring readability and separation.
*   **Text Primary:** `#1C1C1C` (Dark Grey) - Main body text color, offering excellent readability against light backgrounds.
*   **Text Secondary:** `#666666` (Medium Grey) - For secondary information, labels, and less prominent text, providing visual hierarchy.
*   **Palette Additions:**
    *   `#EBEBEB` (Light Grey) - Subtle borders, dividers, or background shadows.
    *   `#CAD6FF` (Soft Blue) - Lighter shades for backgrounds or subtle distinction.
    *   `#343434` (Darker Grey) - For deeper contrast than text secondary, often for icons or subtle shadows.
    *   `#D958E8` (Brighter Purple) - A slightly more intense version of the accent, for hover states or even stronger emphasis.

### Typography

The typographic system uses a single, distinctive typeface to maintain a cohesive and recognizable brand voice across all content.

*   **Font Family:** `Camera Plain Variable`
    *   **Fallback Stack:** `ui-sans-serif, system-ui, sans-serif`
*   **Heading Font Family:** `Camera Plain Variable`
*   **Body Font Family:** `Camera Plain Variable`
*   **Paragraph Font Family:** `Camera Plain Variable`

**Font Sizes:**
*   **H1:** `20px` - Used for page titles and most prominent headings.
*   **H2:** `48px` - Secondary headings, larger content sections. (Note: H1 `20px` and H2 `48px` suggests a specific hierarchy. H1 might be intended for general content titles, while H2 is for larger, display-style headings.)
*   **Body:** `20px` - Standard text size for paragraphs and general content, ensuring readability.

### Spacing & Radius

A consistent spacing scale and singular border radius contribute to the system's overall harmony and professionalism.

*   **Base Unit:** `4px`
    *   All spacing (paddings, margins, gaps) should ideally be multiples of `4px` to maintain visual rhythm.
*   **Border Radius:** `7px`
    *   Applied consistently to interactive elements, cards, and containers for a modern, approachable feel without being overly soft.

### Voice and Feel

The Lovable.dev brand communicates a message of **innovation, efficiency, and empowerment**.

*   **Voice:**
    *   **Authoritative yet Approachable:** Confident in its technological prowess but clear and simple in its communication to a broad audience.
    *   **Direct & Concise:** Gets straight to the point, valuing user time.
    *   **Inspiring & Visionary:** Evokes the excitement of building and creating.
*   **Feel:**
    *   **Modern & High-Tech:** Clean lines, sharp contrasts, and sophisticated typography.
    *   **Intuitive & Streamlined:** Designed to make complex processes feel simple.
    *   **Professional & Reliable:** Instills trust in the platform's capabilities.
    *   **Vibrant & Engaging:** The accent color and dynamic layouts prevent the design from feeling sterile.

### Implementation Notes (Tailwind Tokens)

To integrate this design system effectively with Tailwind CSS, use the following custom configuration.

```css
/* tailwind.config.js - extend section */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary:         'var(--color-primary)',         // #000000
        secondary:       'var(--color-secondary)',       // #FFFFFF
        accent:          'var(--color-accent)',          // #AE55EF
        background:      'var(--color-background)',      // #DAE0FF
        surface:         'var(--color-surface)',         // #FFFFFF
        'text-primary':  'var(--color-text-primary)',    // #1C1C1C
        'text-secondary':'var(--color-text-secondary)',  // #666666
        'gray-100':      'var(--color-gray-100)',        // #EBEBEB
        'blue-100':      'var(--color-blue-100)',        // #CAD6FF
        'gray-800':      'var(--color-gray-800)',        // #343434
        'accent-dark':   'var(--color-accent-dark)',     // #D958E8
      },
      fontFamily: {
        sans:     ['var(--font-primary)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        heading:  ['var(--font-heading)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        'h1': ['var(--font-size-h1)', { lineHeight: '1.2' }], // Assuming line-height for headings
        'h2': ['var(--font-size-h2)', { lineHeight: '1.2' }],
        'body': ['var(--font-size-body)', { lineHeight: '1.5' }], // Standard line-height for body
      },
      spacing: {
        '1': '4px',
        '2': '8px',
        '3': '12px',
        '4': '16px',
        '5': '20px',
        '6': '24px',
        '8': '32px',
        '10': '40px',
        '12': '48px',
        '16': '64px',
        '20': '80px',
      },
      borderRadius: {
        'DEFAULT': 'var(--border-radius)', // 7px
      },
    },
  },
};

/* global.css or equivalent - CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #FFFFFF;
  --color-accent: #AE55EF;
  --color-background: #DAE0FF;
  --color-surface: #FFFFFF;
  --color-text-primary: #1C1C1C;
  --color-text-secondary: #666666;
  --color-gray-100: #EBEBEB;
  --color-blue-100: #CAD6FF;
  --color-gray-800: #343434;
  --color-accent-dark: #D958E8;

  /* Typography */
  --font-primary: 'Camera Plain Variable';
  --font-heading: 'Camera Plain Variable';
  --font-size-h1: 20px;
  --font-size-h2: 48px;
  --font-size-body: 20px;

  /* Spacing & Radius */
  --spacing-base-unit: 4px; /* For reference, not directly used in Tailwind utility classes */
  --border-radius: 7px;
}

/* Font loading for Camera Plain Variable */
/* Ensure 'Camera Plain Variable' is loaded, e.g., via @font-face in global.css */
/*
@font-face {
  font-family: 'Camera Plain Variable';
  src: url('/fonts/CameraPlain-Variable.woff2') format('woff2'); 
  font-weight: 100 900; 
  font-display: swap;
}
*/
```