Lovi

A soft, science-meets-beauty consumer wellness interface on a white canvas, anchored by a deep indigo display voice (ES Rebond Grotesque) and a warm near-black pill CTA. The system reads as calm, premium, and clinically friendly — generously rounded white cards (22–26px radii), diffuse low-alpha shadows, embedded phone/face-scan mockups, and a confetti of pastel accent dots used to label skin-condition categories. Brand voltage comes from the indigo headline color and the rounded-card softness rather than from saturated UI chrome.

lovi.care

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-xl 48px · 400 · 0.917

The quick brown fox jumps

display-lg 32px · 400 · 1.062

The quick brown fox jumps

display-md 28px · 400 · 1.143

The quick brown fox jumps

title-sm 18px · 400 · 1.222

The quick brown fox jumps

body-md 16px · 400 · 1.375

The quick brown fox jumps

button 16px · 500 · 1.375

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	14px
lg	16px
xl	20px
xxl	24px
xxxl	32px

Border Radius

Name	Value	Preview
xs	8px
sm	10px
md	12px
lg	16px
xl	22px
xxl	24px
xxxl	26px
jumbo	32px
pill	40px

FAQ

What colors does Lovi use?: Lovi's core palette includes #000000, #151581, #292824, #ffffff, #0000ee. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Lovi DESIGN.md.
What font does Lovi use?: Lovi's primary typeface is ES Rebond Grotesque. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Lovi design system?: A soft, science-meets-beauty consumer wellness interface on a white canvas, anchored by a deep indigo display voice (ES Rebond Grotesque) and a warm near-black pill CTA. The system reads as calm, pre…

More like this

↓ .md ↓ All files

loading…