Lovable
Lovable sets restrained Camera Plain Variable headlines on a light bone white canvas. Indigo (#1e52f1) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 16px and 3.35544e+07px on smaller elements.
lovable.dev ↗Colors
Indigo
#1e52f1
Primary actions and links
Graphite
#1c1c1c
Secondary accent and highlights
Bone White
#fcfbf8
Page canvas
Void
#111111
Headlines and body copy
Pale Citrine
#f7f4ed
Surface or divider
Deep Bone White
#f5f4f0
Surface or divider
Ash
#616161
Supporting colour
Bone White 2
#f9f8f5
Surface or divider
Citrine
#a59781
Supporting colour
Type scale
Style reference measured from the public page at lovable.dev on 2026-10-12 for design education. Lovable and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.
# Lovable, Style Reference > Lovable sets restrained Camera Plain Variable headlines on a light bone white canvas. Indigo (#1e52f1) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 16px and 3.35544e+07px on smaller elements. **Theme:** light · **Source:** https://lovable.dev (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted. ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Indigo | `#1e52f1` | `--color-accent` | Primary actions and links | | Graphite | `#1c1c1c` | `--color-secondary` | Secondary accent and highlights | | Bone White | `#fcfbf8` | `--color-canvas` | Page canvas | | Void | `#111111` | `--color-ink` | Headlines and body copy | | Pale Citrine | `#f7f4ed` | `--color-surface-1` | Surface or divider | | Deep Bone White | `#f5f4f0` | `--color-surface-2` | Surface or divider | | Ash | `#616161` | `--color-surface-3` | Supporting colour | | Bone White 2 | `#f9f8f5` | `--color-surface-4` | Surface or divider | | Citrine | `#a59781` | `--color-surface-5` | Supporting colour | ## Typography | Role | Family | Size | Weight | Line height | Tracking | |------|--------|------|--------|-------------|----------| | Display | Camera Plain Variable | 18px | 400 | 1.56 | 0 | | Heading | Camera Plain Variable | 48px | 600 | 1.10 | -0.040em | | Subheading | Camera Plain Variable | 16px | 600 | 1.50 | 0 | | Body | Camera Plain Variable | 18px | 400 | 1.33 | 0 | | Nav | Camera Plain Variable | 15px | 400 | 1.60 | 0 | Font families on the page: Camera Plain Variable. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence. ## Shape - Corner radius, most to least used: 8px, 16px, 3.35544e+07px, 6px, 12px
