Lovable — Style Reference

> Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.

**Theme:** light

**Source website:** [https://lovable.dev/](https://lovable.dev/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| color 1 | `#f7f4ed` | `--color-color-1` | color 1 role extracted from the source design |

| color 2 | `#1c1c1c` | `--color-color-2` | color 2 role extracted from the source design |

| off white | `#fcfbf8` | `--color-off-white` | off white role extracted from the source design |

| charcoal 83 | `rgba(28,28,28,0.83)` | `--color-charcoal-83` | charcoal 83 role extracted from the source design |

| charcoal 82 | `rgba(28,28,28,0.82)` | `--color-charcoal-82` | charcoal 82 role extracted from the source design |

| muted gray | `#5f5f5d` | `--color-muted-gray` | muted gray role extracted from the source design |

| charcoal 40 | `rgba(28,28,28,0.4)` | `--color-charcoal-40` | charcoal 40 role extracted from the source design |

| charcoal 4 | `rgba(28,28,28,0.04)` | `--color-charcoal-4` | charcoal 4 role extracted from the source design |

| charcoal 3 | `rgba(28,28,28,0.03)` | `--color-charcoal-3` | charcoal 3 role extracted from the source design |

| light cream | `#eceae4` | `--color-light-cream` | light cream role extracted from the source design |

| ring blue | `#3b82f6` | `--color-ring-blue` | ring blue role extracted from the source design |

| color 12 | `rgba(59,130,246,0.5)` | `--color-color-12` | color 12 role extracted from the source design |

| color 13 | `#ffffff` | `--color-color-13` | color 13 role extracted from the source design |

Tokens — Typography

Inter, system-ui, sans-serif · `--font-primary`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| body | 16px | 1.5 | 0 | `--text-body` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 64 | 64px | `--spacing-64` |

| 80 | 80px | `--spacing-80` |

| 96 | 96px | `--spacing-96` |

| 128 | 128px | `--spacing-128` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 5px | `--radius-sm` |

| md | 9999px | `--radius-md` |

| lg | 6px | `--radius-lg` |

| xl | 9px | `--radius-xl` |

| pill | 8px | `--radius-pill` |

| r6 | 4px | `--radius-r6` |

| r7 | 2px | `--radius-r7` |

Layout

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

inputs forms

**Role:** inputs forms component

navigation

**Role:** navigation component

links

**Role:** links component

image treatment

**Role:** image treatment component

distinctive components

**Role:** distinctive components component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://lovable.dev/).