design.md

AI-ready Markdown · Human-readable · 98 tokens

Preview

# lovable.dev Design System

> Inspected by UI Archive — https://ui-archive.com/lovable.dev
> Last updated: 2026-04-28

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-violet-500 | #8d54ff | Defined in :root as --color-violet-500 |
| --color-gradient-button-neutral | linear-gradient(to bottom, transparent, #0000000a) | Defined in :root as --gradient-button-neutral |
| --color-gradient-button-semantic | linear-gradient(to bottom, transparent, #00000014) | Defined in :root as --gradient-button-semantic |
| --color-gradient-button-inverse | linear-gradient(to bottom, #0000, #000000e0) | Defined in :root as --gradient-button-inverse |
| --color-gradient-input-fill | linear-gradient(to bottom, #00000005, transparent) | Defined in :root as --gradient-input-fill |
| --color-gradient-switch-track-off | linear-gradient(to bottom, transparent, #ffffff0a) | Defined in :root as --gradient-switch-track-off |
| --color-switch-gradient-track-on | linear-gradient(to bottom, transparent, #ffffff14) | Defined in :root as --_switch-gradient-track-on |
| --color-lab-18-8087-0-10189 | lab(18.8087 -0.101894 0.363511) |  |
| --color-lab-98-2716-0-0 | lab(98.2716 0 0) |  |
| --color-oklab-0-226664-0-000 | oklab(0.226664 0.0000103414 0.00000451505 / 0.7) |  |
| --color-lab-0-903296-0-0 | lab(0.903296 0 0) |  |
| --color-lab-47-8174-0-20366 | lab(47.8174 -0.203669 0.727129 / 0.4) |  |
| --color-lab-100-0-0 | lab(100 0 0) |  |
| --color-lab-94-8354-0-34883 | lab(94.8354 -0.348836 -5.3088) |  |
| --color-lab-0-0-0-0-88 | lab(0 0 0 / 0.88) |  |
| --color-lab-100-0-0-0-8 | lab(100 0 0 / 0.8) |  |
| --color-oklab-0-987773-0-00 | oklab(0.987773 -0.0000603199 0.00420386 / 0.75) |  |
| --color-oklab-0-96808-0-0004 | oklab(0.96808 0.00046438 0.00952709 / 0.1) |  |
| --color-lab-41-4547-30-9431 | lab(41.4547 30.9431 -84.4155) |  |

## Typography

All Tokens

Colors

26

Typography

12

Spacing

32

Radius

16

Shadows

12

Checking your plan…

Also available: Tokens Studio JSON

W3C DTCG format, ready to import into Figma via the Tokens Studio plugin.

View JSON export →