design.md

Preview

# lovable.dev Design System

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

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --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-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-0-0-0-0-88 | lab(0 0 0 / 0.88) |  |
| --color-lab-100-0-0-0-8 | lab(100 0 0 / 0.8) |  |

## Typography

| Token | Font Family | Size |
|-------|-------------|------|
| --font-size-roboto-mono-variable | Roboto Mono Variable, monospace | 1em |
| --font-size-menlo | Menlo, Monaco, Consolas, Courier New, monospace!important | 13px!important |
| --font-size-camera-plain-variable-16px-400 | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | 16px |
| --font-size-camera-plain-variable-14px-400 | Camera Plain Variable, ui-sans-serif, system-ui, sans-serif | 14px |
…

All Tokens