DESIGN.md@.agents/tools/design/library/brands/lovable git:20260404.2e83279A

Immutable. This exact content is served forever at /api/v1/blob/6c38d901613f11b4.

<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Lovable

Lovable — warm humanist developer tool: parchment cream canvas, Camera Plain Variable typeface, opacity-driven gray scale, inset-shadow dark buttons, border-only card containment.

## Chapters

| File | Contents |
|------|----------|
| [01-visual-theme.md](01-visual-theme.md) | Visual identity, atmosphere, key characteristics |
| [02-color-palette.md](02-color-palette.md) | Primary, neutral scale, surface/border, interactive, inset shadow colors |
| [03-typography.md](03-typography.md) | Font family, type scale table, typographic principles |
| [04-components.md](04-components.md) | Buttons, cards, inputs, navigation, links, image treatment, distinctive components |
| [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels table, shadow philosophy, decorative depth |
| [07-dos-donts.md](07-dos-donts.md) | Do/Don't rules for Lovable brand compliance |
| [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

- **Primary CTA**: Charcoal (`#1c1c1c`) with inset shadow
- **Background**: Warm Cream (`#f7f4ed`) — never pure white
- **Headings**: Charcoal (`#1c1c1c`), weight 600, negative letter-spacing
- **Body**: Muted Gray (`#5f5f5d`)
- **Button text on dark**: Off-White (`#fcfbf8`)
- **Font**: `Camera Plain Variable` — weight 400 (body/UI), 600 (headings), 480 (special display)
- **Shadow**: Inset multi-layer on dark buttons; `rgba(0,0,0,0.1) 0px 4px 12px` for focus
- **Border-radius**: 6px (buttons/inputs), 12px (cards), 9999px (pills only)
- **Borders**: `#eceae4` passive, `rgba(28,28,28,0.4)` interactive — no drop-shadows on cards