What is Lovable's primary brand color?

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.

What typography does Lovable use?

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.

Why does Lovable derive grays from opacity instead of hex values?

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.

What is the signature inset shadow on Lovable buttons?

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.

Can I use this DESIGN.md to build a React app?

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.

What is Lovable's shape language?

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.

Lovable Design System

Lovable's design system as a DESIGN.md file.

About Lovable DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source lovable.dev

AI & LLM Platforms
Developer Tools & IDEs

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.

What makes it distinct

Parchment cream canvas (#f7f4ed)deliberate warm cream, not white, not beige; the foundation of every surface
Opacity-driven graysevery tonal shade derives from #1c1c1c at 3%, 4%, 40%, 82%, or 83% transparency
Camera Plain Variable at weight 480a variable font lets headlines hit intermediate weights between regular and semibold
Signature inset shadow on dark buttonsa 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

Live at lovable.dev

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

lovable.dev

Explore Lovable

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Lovable design system FAQ

Common questions about Lovable's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Lovable's product site

The AI app builder whose visual system this DESIGN.md captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Lovable in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→