name: lovable-design
version: alpha
description: >
  Lovable's canvas is a warm paper-cream (#FCFBF8), not stark white — a friendly,
  approachable ground that softens the whole product. The UI itself is near-monochrome:
  cream surfaces, near-black (#1C1C1C) text, and an inverted near-black primary button.
  Color is held in reserve and exploded only in the brand: a gradient heart logo
  (pink → magenta → indigo → blue) backed by a full semantic + brand spectrum
  (sapphire, twilight, bubblegum, flamingo, tiger, saffron). Type is the proprietary
  "Camera Plain Variable" geometric sans, weights 400–600. Shapes are soft (8px default,
  16px containers). The signature move is **tactile, almost physical buttons** — built
  from layered inset highlights and a soft drop shadow so they read like pressable keys.
colors:
  # Brand
  primary: '#1C1C1C'          # near-black — primary buttons & headings (inverse fill)
  on-primary: '#FCFBF8'
  accent: '#1E63EF'           # accent-primary, vivid blue (225 88% 53%)
  on-accent: '#F4F9FF'
  # Surface (warm light)
  surface: '#FCFBF8'          # page canvas (bg-base)
  surface-secondary: '#F4F1EA'# cards, prompt box, stat tiles (42 38% 95%)
  surface-footer: '#F7F4ED'   # footer panel
  # Text
  on-surface: '#1C1C1C'       # primary text (fg-primary, 0 0% 11%)
  on-surface-secondary: '#5F5F5D' # muted copy (60 1% 37%)
  on-surface-tertiary: '#8C8C8A'  # subtle/placeholder (60 1% 55%)
  # Hairlines
  hairline: '#ECEAE4'         # borders & inputs (45 17% 91%), ~0.5px
  # Semantic
  success: '#15803D'          # success-primary (142 72% 29%)
  warning: '#E8590C'          # warning-primary (25 98% 44%)
  error: '#D90B0B'            # destructive-primary (0 95% 42%)
  # Brand spectrum (logo + decorative accents only)
  brand-flamingo: '#B80050'   # 335 100% 36%
  brand-bubblegum: '#B81DA6'  # 308 77% 40%
  brand-twilight: '#5733CF'   # 251 60% 51%
  brand-sapphire: '#1F66D6'   # 217 75% 49%
  brand-tiger: '#C53410'      # 14 93% 40%
  brand-saffron: '#B5530A'    # 20 94% 37%
typography:
  display:
    fontFamily: '"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif'
    fontSize: 64px            # hero "Build something Lovable"
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.5px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: 0
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 36px
    fontWeight: 600
    lineHeight: 39.6px
    letterSpacing: -0.9px
  subhead:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: 0
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px
    fontWeight: 480
    lineHeight: 21px
    letterSpacing: 0
rounded:
  sm: 6px    # links / small chips
  md: 8px    # buttons, inputs (--radius .5rem)
  lg: 16px   # cards, footer, prompt box
  full: 9999px
spacing:      # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 56px
  3xl: 80px
components:
  button-primary:                 # "Get started"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '6px 10px'
    boxShadow: '{shadows.button-inverse}'
  button-secondary:               # "Log in", "View all"
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.hairline}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    boxShadow: '{shadows.button-neutral}'
  card:
    backgroundColor: '{colors.surface-secondary}'
    rounded: '{rounded.lg}'
    borderColor: '{colors.hairline}'
    textColor: '{colors.on-surface}'
  prompt-box:                     # central "Build" chat input
    backgroundColor: '{colors.surface-secondary}'
    rounded: '{rounded.lg}'
    boxShadow: '{shadows.surface-md}'
    padding: '24px'
  footer:
    backgroundColor: '{colors.surface-footer}'
    borderColor: '{colors.hairline}'
    rounded: '{rounded.lg}'
    padding: '56px'
shadows:
  surface-md: 'inset 0 0 0 .5px #fff, 0 0 0 .5px #77777147, 0 1px 1px #0000000a, 0 3px 3px -1.5px #0000000a, 0 6px 6px -3px #0000000a'
  button-neutral: 'inset 0 1px 0 0 #fff, inset 0 0 0 .5px #00000029, 0 2px 2px -1px #0000000a, 0 4px 4px -2px #00000005'
  button-inverse: 'inset 0 1px 0 0 #ffffff3d, inset 0 0 0 .5px #000, 0 2px 2px -1px #0000001f, 0 4px 4px -2px #0000001f'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 200ms
icons:
  style: outline
  stroke: 1.75px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface-secondary}'

Lovable

lovable-design · alpha

Overview

Lovable's signature is warmth: the canvas is #FCFBF8, a paper-cream off-white rather than stark white, which immediately makes the product feel friendly and hand-made rather than clinical. The interface chrome is otherwise near-monochrome — cream surfaces, near-black #1C1C1C text, and a near-black inverted primary button — so that the only saturated color most of the time is the gradient heart logo (pink → magenta → indigo → blue). Behind that logo sits a surprisingly large color system: full semantic ramps plus a named brand spectrum (sapphire, twilight, bubblegum, flamingo, tiger, saffron), but these are reserved for accents and brand moments, not the everyday UI. Type is the proprietary Camera Plain Variable — a clean geometric sans — used at 400 for copy and 600 for big headings. The most distinctive craft detail is the button treatment: buttons are built from stacked inset highlights (a bright top edge, a darker base line) plus a soft two-layer drop shadow, so they read as physical, pressable keys rather than flat rectangles. Shapes are soft (8px controls, 16px containers), and motion is gentle (~200ms standard ease).

Colors

Brand — the everyday "primary" is actually near-black #1C1C1C: it fills the Get started button and sets all headings. The true accent is accent #1E63EF, a vivid blue used for links/active states. Real chromatic energy lives in the brand spectrum (flamingo, bubblegum, twilight, sapphire, tiger, saffron) which composes the gradient logo and decorative flourishes — never large UI fills.

Surface — canvas surface #FCFBF8; cards, the prompt box, and stat tiles use a slightly deeper cream surface-secondary #F4F1EA; the footer panel is #F7F4ED. The warmth is intentional — there is no true white anywhere in the layout.

Text — on-surface #1C1C1C for primary, on-surface-secondary #5F5F5D for muted copy and the smaller "Watch it come to life / Refine and ship" sub-steps, on-surface-tertiary #8C8C8A for placeholders.

Hairlines — a single warm hairline #ECEAE4 at ~0.5px draws all borders, input outlines, and card edges.

Semantic — success #15803D, warning #E8590C, error #D90B0B, each with a pale tinted background variant for badges.

Typography

Family: Camera Plain Variable (Lovable's custom geometric sans), falling back to ui-sans-serif, system-ui, sans-serif. Closest open-source substitutes: Geist, Inter, or Hanken Grotesk. Weight strategy is simple — 400 for body and the oversized 20px subheads, 480 for button labels, 600 for headings. Tracking is near-zero, tightening slightly (−0.9px) on the 36px heading and more on the hero.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px	600	1.0	−1.5px	Hero "Build something Lovable"
headline-lg	48px	600	48px	0	"Discover" / "Lovable" section heads
headline-md	36px	600	39.6px	−0.9px	Sub-section heads
subhead	20px	400	30px	0	Soft secondary headings
body-lg	20px	400	25px	0	Hero subtitle / lead copy
body-md	16px	400	24px	0	Standard body / nav
label	14px	480	21px	0	Buttons, footer links

Layout

Base unit 8px; scale 4 / 8 / 16 / 24 / 32 / 56 / 80. The homepage is single-column and center-stage: a logo, a centered hero headline, and a wide rounded prompt box that is the literal product. Below, content uses a 4-up template card grid and a 3-up stat grid. Whitespace is luxurious — the hero leaves most of the viewport empty cream. The footer is a large rounded panel (16px, 56px padding) with a 5-column link layout.

Elevation & Depth

Lovable does use shadows, but softly and in layers. The shadow-surface ladder (xs→xl) stacks 4–8 very low-opacity (~4%) offsets plus an inset 0.5px white top highlight, producing a gentle floating-paper feel. Buttons get their own ladder (button-neutral / button-inverse) with inset top highlight + bottom darkening to look pressable. No harsh or high-contrast shadows; depth stays quiet and tactile.

Shapes

Three working radii: 6px (links, tiny chips), 8px (--radius, the default for buttons and inputs), and 16px (cards, prompt box, footer). The vocabulary is soft-modern — friendly but not pill-shaped. Reserve full for avatars and circular icon buttons (e.g. the round send button in the prompt box).

Components

• button-primary ("Get started") — near-black fill, cream text, 8px radius, the button-inverse shadow with inset white top edge.
• button-secondary ("Log in", "View all") — cream fill, hairline border, 8px radius, button-neutral shadow (key-cap look).
• prompt-box — the hero's centerpiece: surface-secondary fill, 16px radius, layered surface-md shadow, a + attach button (circular) at bottom-left and a round dark send button + "Build" mode dropdown at bottom-right.
• card — surface-secondary fill, 16px radius, hairline border; used for template thumbnails (image + title + muted subtitle) and stat tiles ("0M+ projects built").
• footer — large surface-footer rounded panel with the gradient heart and 5 link columns.

Motion

Standard transitions ~200ms on cubic-bezier(0.4,0,0.2,1). The personality is calm and reassuring — hovers lift buttons subtly (shadow + slight tint), the prompt box focuses softly. No bounce, no parallax, no flashy entrance animations on the marketing page; motion supports the tactile button metaphor rather than spectacle.

Iconography

Outline icons (~1.75px stroke) on a 24px grid, rendered 16/20/24px, colored on-surface-secondary. The brand exception is the heart logo, which is a filled gradient mark (pink→magenta→indigo→blue) — the single place full saturation appears.

Do's and Don'ts

• Do keep the canvas warm cream #FCFBF8 — never switch to pure white or a dark variant.
• Do make primary buttons near-black inverted keys with the inset-highlight + soft-shadow treatment.
• Do keep the working UI near-monochrome; let the gradient heart carry the color.
• Do use the brand spectrum (flamingo/twilight/sapphire/…) only for logo and small accents.
• Do use 16px radius for containers and 8px for controls.
• Don't flatten the buttons — the layered inset/shadow craft is the brand.
• Don't introduce stark white surfaces or cool grays; everything is warm.
• Don't paint large surfaces with the semantic or brand hues.

Known Gaps

• Source colors were authored in lab() / HSL custom properties; hex values above are faithful conversions and may differ by ±1–2 in the last digit. "Camera Plain Variable" is proprietary — substitute a geometric grotesk for codegen.