# Lovable — Design System
> Build apps, websites, and digital products faster using Lovable’s no-code and AI-powered platform, no deep coding skills required.
- **Canonical:** https://uiuxskills.com/library/lovable
- **Source:** https://lovable.dev/
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:15.380Z

---

---
version: alpha
name: Lovable
description: AI-powered platform for building apps and websites through natural language interaction.
tone: >-
  Optimistic, fast-paced, and approachable. The brand positions itself as a creative partner that
  turns complex development into a simple, conversational experience.
color-scheme: light
colors:
  primary: "#2483FF"
  secondary: "#FF66F4"
  accent: "#FE7B02"
  surface: "#FFFFFF"
  surface-container: "#F4F4F5"
  on-surface: "#09090B"
  on-surface-muted: "#71717A"
  outline: "#E4E4E7"
  error: "#FF3029"
  focus-ring: "#82BCFF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.body-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#1D70DB"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.full}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#1D70DB"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-muted}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  button-accent:
    backgroundColor: "{colors.accent}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 20px 25px -5px rgba(0,0,0,0.1)
---

## Overview

Lovable is a high-energy, modern AI development platform that emphasizes speed and accessibility. Its visual identity is vibrant and tech-forward, utilizing a bold color palette to convey innovation and creative potential while maintaining an approachable, conversational interface.

## Colors

The color strategy balances a high-contrast, professional foundation with vibrant, energetic accents to signify AI-driven creativity.

*   Primary (#2483FF): The core brand blue used for primary actions and navigation highlights.
*   Secondary (#FF66F4): A vibrant accent color used for visual interest and highlights.
*   Accent (#FE7B02): A secondary accent color used for call-to-action emphasis.
*   Surface (inferred) (#FFFFFF): The primary background color for the application.
*   Surface-container (#F4F4F5): A muted background color used for cards and section separation.
*   On-surface (#09090B): The primary text color for high readability.
*   On-surface-muted (#71717A): Used for secondary descriptive text and metadata.
*   Outline (#E4E4E7): The standard border color for UI dividers and input fields.
*   Error (#FF3029): A semantic color reserved for destructive actions or validation errors.
*   Focus-ring (#82BCFF): Used to highlight interactive elements during focus states.

## Typography

The typography uses a clean, sans-serif approach to ensure maximum readability across both complex development interfaces and marketing content.

*   Display-lg (inferred): Used for hero headlines to create immediate impact.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg: Used for sub-headlines and key section headers.
*   Headline-md (inferred): Used for card titles and sub-components.
*   Body-md: The standard weight for all primary body text.
*   Body-sm: Used for secondary body text and smaller descriptive UI elements.
*   Label-sm (inferred): Used for small UI labels, buttons, and metadata.

## Layout

The layout is built on a centered container strategy with a 64px header and generous whitespace to maintain a clean, scannable rhythm. The page structure follows a consistent flow: nav, hero, features, templates, stats, and footer. The hero section is characterized by a centered headline and a prominent AI-input field. The design is mobile-first, with sections stacking vertically on smaller viewports to ensure a seamless experience.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic, relying on subtle shadows to separate interactive elements from the background.

*   elevation.sm (inferred): Subtle lift for minor UI components.
*   elevation.md (inferred): Standard shadow for dropdowns and popovers.
*   elevation.lg: Used for key interactive cards and modals to create a distinct layer of focus.

## Shapes

The design language is defined by heavy rounding, which reinforces the brand's approachable and friendly tone. By using a scale that ranges from `rounded.sm` for small details to `rounded.xl` for cards and `rounded.full` for input fields, the interface maintains a soft, modern aesthetic that avoids sharp, aggressive corners.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These are the main drivers of user action, featuring a `{colors.primary}` background and `{typography.body-md}` text. Use these for high-intent actions like "Build" or "Get Started."

### Card
These containers use `{colors.surface}` with `{rounded.xl}` and an `{colors.outline}` border. Use these to group related content or display templates.

### Input Field
These are pill-shaped components using `{rounded.full}` and `{colors.outline}`. They are the primary interface for the AI chat experience and should trigger the `{colors.focus-ring}` border on interaction.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.xl}` to all cards to maintain the soft aesthetic. | Use sharp corners on cards; always use `{rounded.xl}`. |
| Use `{colors.on-surface-muted}` for secondary descriptive text. | Mix too many font weights; stick to `{typography.body-md}`. |
| Ensure all input fields use `{rounded.full}` for a pill-shape. | Use low-contrast text colors on `{colors.surface-container}`. |
| Use `{colors.surface-container}` for background sections. | Overcrowd sections; use `{spacing.2xl}` for margins. |
| Maintain consistent `{spacing.md}` between form elements. | Use a border color other than `{colors.outline}` for dividers. |
| Apply `{elevation.lg}` to elevated cards. | Use heavy, dark shadows on flat containers. |
| Use `{typography.label-sm}` for button labels. | Use large display fonts for standard body copy. |

## Content Style

CTA labels are action-oriented, short, and direct, typically using verbs like "Build" or "Send." They should be concise to maintain the fast-paced feel of the platform.

Heading tone is benefit-focused and punchy, emphasizing the speed and ease of the AI development process. Headlines should be declarative and clearly communicate the value proposition of the section.

Copy density is kept low, using scannable, concise paragraphs and frequent bullet points to ensure the user can digest information quickly without feeling overwhelmed.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots with abstract, vibrant, pulse-like background imagery. This creates a tech-forward, energetic visual language that highlights the platform's capabilities. Icons should follow a minimal, clean aesthetic to match the sans-serif typography and rounded UI elements.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Lovable, a minimal-yet-bold AI development platform with an optimistic, fast-paced tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{spacing.lg}`, `{rounded.xl}` — never hardcode hex values, pixel sizes, or shadow strings.
2. Respect the components block exactly. Use only the defined variants (button-primary, button-secondary, button-accent, card, card-elevated, input-field, badge, badge-error, link). Do not invent new variants.
3. Follow the Shapes narrative: cards always use `{rounded.xl}`, input fields always use `{rounded.full}`, small details use `{rounded.sm}`. Never apply sharp corners to cards.
4. Consult the Do's and Don'ts table before rendering any component. If a user request conflicts with a rule (e.g., using `{colors.error}` for a non-destructive action), surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, shadow, and typography value.
- Render hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, margin, and gap values.
- Write CTAs using short, action-oriented verbs per the Content Style section (e.g., "Build", "Send", "Get Started").
- Apply `{elevation.lg}` to card-elevated; use `{elevation.sm}` and `{elevation.md}` only for minor UI and dropdowns respectively.

**Must NOT:**
- Invent colors, font sizes, radii, or shadow values absent from the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a raw value) when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing language.
- Reference any specific framework, library, or toolchain.
- Rewrite, replace, or restructure existing page copy, headings, navigation items, or routes.

## When in doubt
- If a required token is missing from the spec, ask the user before inventing a value.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface}` or `{colors.on-surface-muted}` — never a low-contrast custom value.
- For unspecified breakpoints, follow the mobile-first Layout guidance; if absent, use a single breakpoint at 768px.
- When torn between two visual options, choose the one consistent with the Do's and Don'ts table before consulting the narrative sections.