Color Palette
Brand Gradient
Brand Gradient
Pink → Blue → Sky
Warm Gradient
Orange → Pink
Typography
Primary Font · Camera Plain Variable
Camera Plain
Build apps and websites with AI, fast. Ship ideas at the speed of thought.
Regular · 400
Medium · 480
Semibold · 600
System Fallback · Inter
Inter
Vibe code — describe your app idea, Lovable builds it for you in seconds.
Regular · 400
Semibold · 600
Vibe code.
Display Hero · 60px · Semibold · line-height: 66px · letter-spacing: −1.5px
Build apps with AI
Heading XL · 48px · Semibold · line-height: 52.8px · letter-spacing: −1.2px
Ship ideas instantly
Heading Large · 36px · Semibold · line-height: 39.6px · letter-spacing: −0.9px
Describe your app idea in plain English and watch Lovable build it for you.
Body Large · 20px · w480 · line-height: 30px
From idea to production in minutes. No boilerplate, no configuration, just your vision made real.
Body Default · 18px · Regular · line-height: 24.75px
Edit in real-time, deploy with one click. Your full-stack app is ready to share.
Body Small · 16px · Regular · line-height: 24px
AI BUILDER · REACT · TYPESCRIPT · DEPLOY
Caption / Label · 14px · w480 · uppercase · line-height: 21px
Letter Spacing
Lovable
Tight
−1.5px · hero, display
Build faster
Normal
−1.2px · headings
Vibe code
Wide
−0.9px · subheadings
Spacing
Spacing Scale
25 tokens — 1px → 363px
Shadow / Elevation
Shadow Tokens
3 tokens
Button
×3
Multi-layer inset + outer shadow for interactive button surfaces
Elevated
×2
rgba(0,0,0,.08) ring + rgba(0,0,0,.1) 20px · panels, popovers
Subtle
×1
rgba(0,0,0,.05) 1px · lightweight card separation
Z-Index
| Layer | Value | Usage |
|---|
| z-1 (Navigation) | 10 | Sticky headers, top navigation bars |
| z-2 (Dropdown) | 50 | Dropdowns, tooltips, floating menus |
| z-3 (Modal) | 9500 | Modal dialogs, command palette overlay |
| z-4 (Toast) | 9999 | Toast notifications, critical alerts |
Breakpoints
7 breakpoints — from 600px (mobile XS) through 1536px (wide screen). Granular responsive control across all viewport sizes.
Opacity
Opacity Scale
1 token — 0.50 (50%)
Lovable defines a single extracted opacity token (--opacity-50: 0.5). Additional opacity values are expressed inline through rgba color tokens.
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray 2 (#5F5F5D) | Dark Gray (#1C1C1C) | 2.66:1 | Fail |
| Dark Gray 2 (#5F5F5D) | Black (#000000) | 3.28:1 | AA Large |
| Dark Gray 2 (#5F5F5D) | White (#FCFBF8) | 6.18:1 | AA |
| Dark Gray 2 (#5F5F5D) | White 2 (#FFFFFF) | 6.4:1 | AA |
| Dark Gray 2 (#5F5F5D) | Light Gray 2 (#F7F4ED) | 5.83:1 | AA |
| White 3 (#FAFAFA) | Dark Gray (#1C1C1C) | 16.33:1 | AAA |
| White 3 (#FAFAFA) | Black (#000000) | 20.12:1 | AAA |
| White 3 (#FAFAFA) | White (#FCFBF8) | 1.01:1 | Fail |
| Dark Gray 3 (#2E2E2D) | White (#FCFBF8) | 13.14:1 | AAA |
| Dark Gray 3 (#2E2E2D) | White 2 (#FFFFFF) | 13.59:1 | AAA |
| Dark Gray 3 (#2E2E2D) | Light Gray 2 (#F7F4ED) | 12.38:1 | AAA |
| Dark Gray 3 (#2E2E2D) | Dark Gray (#1C1C1C) | 1.25:1 | Fail |
| Black 2 (#030303) | White (#FCFBF8) | 19.93:1 | AAA |
| Black 2 (#030303) | White 2 (#FFFFFF) | 20.62:1 | AAA |
| Black 2 (#030303) | Light Gray 2 (#F7F4ED) | 18.78:1 | AAA |
| Black 2 (#030303) | Dark Gray (#1C1C1C) | 1.21:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Dark Gray--color-dark-gray#1C1C1C
White (Warm)--color-white#FCFBF8
White Pure--color-white-2#FFFFFF
Light Gray 2--color-light-gray-2#F7F4ED
Black 2 (Headings)--color-black-2#030303
Dark Gray 3 (Body)--color-dark-gray-3#2E2E2D
Dark Gray 2 (Muted)--color-dark-gray-2#5F5F5D
White 3 (On Dark)--color-white-3#FAFAFA
Light Gray (Border)--color-light-gray#ECEAE4
Mid Gray (Border)--color-mid-gray#707070
Orange--color-orange#FE7B02
Light Blue--color-light-blue#82BCFF
Blue 2--color-blue-2#4B73FF
Red 2--color-red-2#FF0105
Camera Plain Variable--font-family-baseCamera Plain Var
Regular--font-weight-regular400
Medium--font-weight-w480480
Semibold--font-weight-semibold600
2xs--font-size-2xs14px
xs--font-size-xs15px
sm--font-size-sm16px
base--font-size-base18px
lg--font-size-lg20px
xl--font-size-xl36px
2xl--font-size-2xl48px
3xl--font-size-3xl60px
Tight--letter-spacing-tight−1.5px
Normal--letter-spacing-normal−1.2px
Wide--letter-spacing-wide−0.9px
Space 12 (MD)--space-1216px
Space 20 (LG)--space-2024px
Space 32 (XL)--space-3240px
Space 40 (2XL)--space-4048px
Space 128--space-128128px
Space 160--space-160144px
Space 26 (Max)--space-26363px
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Pill / Full--radius-r89999px
Instant--duration-instant0.1s
Fast--duration-fast0.15s · ×424
Normal--duration-normal0.2s
Slow--duration-slow0.3s
Slower--duration-slower0.35s
Linear--easing-linearlinear
Navigation--z-110
Dropdown--z-250
Modal--z-39500
Toast--z-49999
XS--breakpoint-xs600px
MD--breakpoint-md700px
XL--breakpoint-xl1024px
3XL--breakpoint-3xl1536px
Lovable Design System · Generated 15/04/2026 · 18 color tokens · 25 type tokens · 25 spacing steps · 8 border radii · 2 border widths · 3 shadows · 5 durations · 1 easing · 4 z-index layers · 7 breakpoints · 1 opacity token