---
title: "Lóvi design system"
variant: extended
source: https://lovi.care/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/lovi-care)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lóvi · Design System

> Calm clinical skincare with a human touch

**Theme:** light · **Industry:** beauty · **Source:** https://lovi.care/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lóvi pairs AI skincare guidance with a calm, beauty-editorial presentation. A near-white canvas, soft lavender-gray bands, and rounded product cards keep the experience light while centering real skin and app imagery.

## North star

Keep the interface quiet and spacious so real skin, useful product examples, and clear AI guidance remain the focus.

## Overview

The page builds its identity from a white canvas, black typography, and broad pale lavender-gray section bands rather than strong decorative colour. A restrained periwinkle accent marks interactive AI moments and selected links, while warm skin tones belong mainly to photography and product imagery. Large, compact display headings use ES Rebond Grotesque with close tracking; Geist and Inter handle supporting text and small labels. The composition alternates a narrow, centered narrative with full-bleed skincare imagery and clusters of floating app screens. Rounded white cards create clear, quiet groupings against the subtly tinted sections. Spacious gaps let each demonstration, testimonial, or expert portrait read distinctly, while soft shadows give selected cards separation without relying on visible borders. The overall effect is clinical but approachable: minimal interface chrome, human faces, and practical product examples.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white card faces, and faded transitions around imagery. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary headings, body copy, links, and dark device or badge details. |
| Lavender Mist | `#f6f6fa` | `--color-lavender-mist` | surface | Pale section bands behind feature demonstrations, chat content, testimonials, and FAQ. |
| Warm Pebble | `#a4a3a0` | `--color-warm-pebble` | semantic | Muted supporting text and secondary link details. |
| Deep Taupe | `#292824` | `--color-deep-taupe` | neutral | Secondary muted text where a warmer, softer alternative to black is used. |
| Quiet Stone | `#949391` | `--color-quiet-stone` | semantic | Additional low-emphasis text detected in the palette; use only for secondary copy. |
| Periwinkle Signal | `#5263ff` | `--color-periwinkle-signal` | accent | Sparse accent for AI-related links, interface details, and blue-violet interaction highlights. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6fa` (Lavender Mist) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#a4a3a0` (Warm Pebble) · `--color-text-subtle` → `#292824` (Deep Taupe) · `--color-accent` → `#5263ff` (Periwinkle Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6fa` | 19.48:1 | AAA |
| `#a4a3a0` | `#ffffff` | 2.52:1 | fail |
| `#a4a3a0` | `#f6f6fa` | 2.34:1 | fail |
| `#292824` | `#ffffff` | 14.75:1 | AAA |
| `#292824` | `#f6f6fa` | 13.69:1 | AAA |
| `#5263ff` | `#ffffff` | 4.58:1 | AA |
| `#5263ff` | `#f6f6fa` | 4.25:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 19.1989%, rgb(246, 246, 250) 21.1057%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 55%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 72%)`
- `linear-gradient(rgb(81, 99, 255) 0%, rgb(81, 99, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400 | Primary body copy and supporting interface text. | Inter |
| Inter | `--font-inter` | webfont | 400, 500, 600 | Small captions, labels, and secondary interface details. | Inter |
| Inter-Medium | `--font-inter-medium` | system | 500 | System-font medium variant for small supporting labels. | Inter |
| ES Rebond Grotesque Medium | `--font-es-rebond-grotesque-medium` | webfont | 400 | Prominent link-style statements and selected display text. | DM Sans |
| ES Rebond Grotesque Regular | `--font-display` | webfont | 400 | Main page headings from hero through section titles. | DM Sans |

- **Geist:** Regular sans-serif body; compact tracking and a clean, understated texture.
- **Inter:** Used at medium weight for compact labels; keep case natural and legibility clear.
- **Inter-Medium:** Medium weight; use sparingly for concise interface copy rather than display headlines.
- **ES Rebond Grotesque Medium:** Medium display sans with notably tight tracking and sentence case.
- **ES Rebond Grotesque Regular:** Regular weight, tightly tracked, compact line spacing, and natural sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 0.92 | -0.042em | — | ES Rebond Grotesque Regular | Hero headline introducing the science-backed AI cosmetologist. |
| h2 | 44px | 400 | 0.91 | -0.023em | — | ES Rebond Grotesque Regular | Major feature and section headlines. |
| h3 | 32px | 400 | 1.06 | -0.031em | — | ES Rebond Grotesque Regular | Subsection headings for demonstrations and editorial blocks. |
| h4 | 28px | 400 | 1.14 | -0.036em | — | ES Rebond Grotesque Regular | Smaller card and supporting section headings. |
| body | 16px | 400 | 1.38 | -0.031em | — | Geist | Explanatory copy, feature descriptions, and conversation text. |
| caption | 12px | 500 | 1.33 | -0.025em | — | Inter | Compact labels, metadata, and product or expert details. |
| link | 22px | 400 | 1.09 | -0.045em | — | ES Rebond Grotesque Medium | Prominent linked statements and larger interactive text. |

OpenType features in use: `"ss02"`, `"dlig", "ss01", "ss02", "ss06"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 120px · element gap 8px · card padding 16px · max content width 659px.

Use a narrow, centered content column within a much wider, mostly white page; measured page max width is 659px. The measured section rhythm is spacious, with a 120px section gap and compact 8px element gap. Center headlines above product or app demonstrations, then use two-column card groupings and horizontally presented testimonials where needed. Alternate white and pale lavender-gray bands to distinguish long feature sequences. Keep media prominent and allow generous empty space around major moments.

## Shape & elevation

- Radius: button `24px` · card `24px` · media `24px` · link `48px` · xs `9px` · sm `12px` · md `16px` · lg `22px` · xl `24px` · 2xl `26px` · pill `9999px`
- Shadow `lg` (card, other): `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.06) 0px 8px 12px 0px, rgba(0, 0, 0, 0.16) 0px 1px 2px 0px`
- Shadow `xl` (other): `rgba(157, 129, 129, 0.15) 0px 3.29365px 59.2857px 0px, rgba(0, 0, 0, 0.1) 0px 0.823413px 1.64683px 0px`
- Shadow `lg-2` (card): `rgba(36, 36, 41, 0.07) 0px 8.89px 34.61px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.09) 0px 0.796192px 2.0701px -0.4375px, rgba(0, 0, 0, 0.1) 0px 2.41451px 6.27772px -0.875px, rgba(0, 0, 0, 0.11) 0px 6.38265px 16.5949px -1.3125px, rgba(0, 0, 0, 0.16) 0px 20px 52px -1.`

Most surfaces feel flat, with no prominent border system. White cards stand out against pale section bands through rounded corners and subtle, diffuse shadows; reserve stronger layering for app screens and cards that need separation. Keep depth restrained so the page retains its airy, clinical calm.

## Imagery

Use close-up beauty photography with natural skin texture, alongside realistic phone mockups showing the skincare app. Product bottles and diagnostic screens appear as examples inside the interface imagery, not as a separate decorative palette. Keep portraits large, softly lit, and often centered; fade or blend media edges into white where shown. Supporting visuals are clean app captures and product cards rather than ornamental illustration.

## Components

### Centered hero

Small award callout above a tightly tracked, multi-line headline and concise supporting line; keep the surrounding white space generous.

### Phone showcase

Large app-screen device mockup paired with skincare imagery; softly blend its edges into the white canvas.

### Feature card

White card with a measured 24px radius and 16px padding; group app scans, ingredient checks, and related demonstrations.

### AI chat demonstration

Stack conversational bubbles and recommendation product cards on a pale lavender-gray section, using periwinkle sparingly for interaction emphasis.

### Testimonial cards

Present customer quotes in rounded, lightly elevated white cards with compact author and verification details.

### Expert portrait card

Use a wide, rounded white container with portrait photography and restrained professional captions.

### Compact choice buttons

Place concise response options in rounded white controls; preserve the simple black-text treatment shown in the page.

### Measured component styles

- **Primary button** (“Yes”): background #ffffff · text #0000ee · radius 24px · padding 32px 28px · 400 12px sans-serif
- **Secondary button** (“Read more about Lóvi Fit Score”): background #f6f6fa · text #0000ee · radius 16px · padding 18px 20px · 400 12px sans-serif
- **Link** (“Nadia Kapleva, MS Lóvi Medical Director,”): background #f6f5f4 · text #0000ee · radius 48px · padding 32px · 400 12px sans-serif
- **Card** (“How can I improve my evening routine?”): transparent background · text #000000 · radius 24px · padding 16px · 400 12px sans-serif · shadow rgba(36, 36, 41, 0.07) 0px 8.89px 34.61px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2p

## Do

- Use white as the dominant canvas.
- Use pale lavender-gray bands to mark feature sequences.
- Set display headlines in a closely tracked grotesque sans.
- Center the main headline and major app demonstrations.
- Give white cards rounded corners and restrained shadows.
- Use real-looking skin and app imagery as the main visual focus.

## Don't

- Do not introduce a strong multicolour brand palette.
- Do not crowd the page with dense navigation or interface chrome.
- Do not outline every card with visible borders.
- Do not use decorative gradients as a substitute for photography.
- Do not let product mockup colours redefine the page palette.
- Do not make the small supporting copy compete with the headline.

## Agent prompt

Build a new page in Lóvi’s calm AI-skincare style. Use Gallery White (#ffffff) as the main canvas and Lavender Mist (#f6f6fa) for broad, quiet feature bands. Set primary text in Soft Ink (#000000), with Warm Pebble (#a4a3a0) and Deep Taupe (#292824) reserved for secondary copy. Apply Periwinkle Signal (#5263ff) sparingly to AI-related highlights. Use a tightly tracked, regular grotesque display face for centered headlines, with clean sans-serif body text and compact captions. Compose a narrow centered narrative with generous whitespace, large realistic skincare photography, and phone-interface demonstrations. Group details in rounded white cards with soft shadows rather than borders. Keep layouts simple, human, and editorial; let app screens and natural skin imagery carry the visual interest.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Centered heading with full-bleed skincare imagery and layered app-screen product recommendations. | Show tailored skincare examples, Connect skin concerns to product suggestions | Centered section heading, Large phone mockup, Rounded recommendation cards, Soft white fade |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lovi-care