---
version: alpha
name: Lovi
description: Skincare that feels like self-care — a warm, soft-light wellness system built on a cream canvas, a coral-peach accent, deeply rounded cards, and a friendly geometric sans. Generous whitespace and pillowy radii make a clinical skin-analysis tool feel gentle and human.
colors:
  # Canvas + ink
  background: "#fdf6f0"      # warm cream canvas
  surface: "#ffffff"          # white cards on cream
  surface-soft: "#f7ede5"     # soft peach tint section
  ink: "#2b2420"              # warm near-black text
  ink-secondary: "#7a6f67"    # muted warm gray for body
  ink-tertiary: "#a89c93"     # captions, placeholders

  # Brand accent — coral / peach
  primary: "#ff6f5e"          # coral CTA
  primary-hover: "#f25949"    # darker coral on hover
  accent-soft: "#ffe3dc"      # tinted coral surface / badge bg
  accent-text: "#c4452f"      # coral text on light tint

  # Supporting wellness hues
  sage: "#8fae9b"             # soft green — "good" skin state
  amber: "#e0a35a"            # warm amber — "watch" state
  blush: "#f4c4c0"            # pale blush decorative

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Neutral scale (warm-tinted)
  warm-100: "#f3e9e1"
  warm-200: "#e8dcd2"
  warm-300: "#d9cabe"
  warm-500: "#a89c93"
  warm-700: "#7a6f67"
  warm-900: "#2b2420"

  # Lines + overlays
  border: "#ece0d6"           # hairline on cream
  ring-coral: "#ffc9bf"       # focus ring, flattened
  overlay-backdrop: "#2b2420" # modal scrim base color

typography:
  display-hero:
    fontFamily: "Poppins, -apple-system, Segoe UI, sans-serif"
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1.0px
  section-heading:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: -0.6px
  sub-heading:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.3px
  card-title:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Poppins, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
  pill-state-good:
    backgroundColor: "{colors.sage}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  pill-state-watch:
    backgroundColor: "{colors.amber}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Lovi Design System

## Overview

Lóvi is an AI skin-analysis and skincare-routine app, and its visual system has one job: make something clinical feel like self-care. The whole interface sits on a warm cream canvas (`{colors.background}`) rather than the cold white most health-tech defaults to. That single choice changes the mood — the product reads as a cozy bathroom-shelf ritual, not a dermatology dashboard. White cards (`{colors.surface}`) float on top of the cream, separated by hairline warm borders and generous air.

The accent is a confident coral-peach (`{colors.primary}`), the color of a healthy flush and of the brand's own logo. It does all the heavy lifting: every primary call-to-action, the active state, the progress indicators. Around it sit a few quiet supporting hues borrowed from wellness charting — a soft sage (`{colors.sage}`) for "good" skin states, a warm amber (`{colors.amber}`) for "watch this" states — so that data visualization stays gentle instead of alarming. Nothing here is saturated to the point of clinical.

Shape is the other signature. Radii run large and pillowy — cards at `{rounded.lg}` (24px), big surfaces at `{rounded.xl}` (32px), and every button a full pill. Combined with the warm palette, the soft corners make a face-scanning, problem-detecting tool feel safe and friendly rather than judgmental. Typography is a rounded geometric sans (Poppins as the closest Google match), set with slightly tightened tracking at display sizes and roomy line-height in body copy for easy reading.

The result is "skincare that feels like self-care" expressed in pixels: warm over cold, soft over sharp, encouraging over diagnostic.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of cold white — the defining move
- Single coral-peach accent (`{colors.primary}`) carries all CTAs and active states
- Pillowy radii everywhere — 24px cards, 32px surfaces, full-pill buttons
- Wellness state colors (sage / amber) keep data viz gentle, not clinical
- Warm-tinted neutral scale — even the grays lean peach
- Rounded geometric sans with tight display tracking, airy body line-height
- Generous whitespace and soft tinted section bands (`{colors.surface-soft}`)

## Colors

### Canvas & Ink
- **Cream Canvas** (`{colors.background}`): The warm page background — the brand's signature warmth.
- **White Surface** (`{colors.surface}`): Cards and panels floating on the cream.
- **Soft Peach** (`{colors.surface-soft}`): Tinted section bands and secondary cards.
- **Warm Ink** (`{colors.ink}`): Primary text — a warm near-black, never pure black.
- **Secondary Ink** (`{colors.ink-secondary}`): Body and supporting copy.
- **Tertiary Ink** (`{colors.ink-tertiary}`): Captions and placeholders.

### Brand Accent
- **Coral** (`{colors.primary}`): Primary CTA, active state, brand color.
- **Coral Hover** (`{colors.primary-hover}`): Darker pressed/hover coral.
- **Accent Soft** (`{colors.accent-soft}`): Tinted coral badge/highlight surfaces.
- **Accent Text** (`{colors.accent-text}`): Coral text readable on the soft tint.

### Wellness State Hues
- **Sage** (`{colors.sage}`): "Good" skin-state indicators.
- **Amber** (`{colors.amber}`): "Watch" / mild-concern indicators.
- **Blush** (`{colors.blush}`): Pale decorative blush accents.

### Neutral Scale (warm-tinted)
- **Warm 900** (`{colors.warm-900}`): Darkest text, equals ink.
- **Warm 700** (`{colors.warm-700}`): Secondary text.
- **Warm 500** (`{colors.warm-500}`): Muted/disabled.
- **Warm 300 / 200 / 100** (`{colors.warm-300}` / `{colors.warm-200}` / `{colors.warm-100}`): Borders, dividers, soft fills.

### Lines & Overlays
- **Border** (`{colors.border}`): Hairline card outlines on cream.
- **Ring Coral** (`{colors.ring-coral}`): Focus ring.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks `-apple-system, Segoe UI, sans-serif`. A rounded geometric sans — friendly, modern, legible at small sizes.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Landing hero — 52px, tight tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, lead-ins |
| `card-title` | Card and feature headings |
| `body-large` | Intros, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Nav, emphasized labels |
| `button-ui` | Buttons, primary actions |
| `caption` | Badges, metadata, states |

### Principles
- **Rounded, not sharp**: a geometric sans with soft terminals reinforces the gentle wellness tone.
- **Tighten display, relax body**: negative tracking at hero size for confidence; 1.6 line-height in body for calm readability.
- **Three weights**: 400 (read), 500 (label), 600 (headings/buttons). No heavy bold.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe at `{spacing.3xl}`–`{spacing.4xl}`.

### Grid & Container
- Max content width ~1120px, centered with generous side gutters.
- Hero: single centered column over the cream canvas.
- Features: 2–3 column card grids that collapse to a single column on mobile.

### Whitespace Philosophy
- **Soft and roomy**: cards have 24px internal padding; sections separated by big vertical space and occasional tinted bands (`{colors.surface-soft}`).
- **Warmth as ground**: the cream background does the visual work that borders do in colder systems.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Inputs, small chips |
| `md` | 16px | Inputs, inner elements |
| `lg` | 24px | Cards, panels |
| `xl` | 32px | Large feature surfaces, images |
| `pill` | 9999px | Buttons, badges, state pills |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Coral fill, white text, full pill, 14px/32px padding. The default CTA.
- **`button-secondary`** — White surface, warm hairline border, pill.

### Badges & States
- **`badge`** — Soft coral tint background with coral text.
- **`pill-state-good`** / **`pill-state-watch`** — Sage / amber state pills for skin-tracking data.

### Cards
- **`card`** — White on cream, 24px radius, hairline warm border.
- **`card-soft`** — Peach-tinted variant for secondary content.

### Inputs
- **`input`** — White, 16px radius, warm border; focus shifts border to coral.

### Navigation
- **`nav-bar`** — Sits on the cream canvas, warm ink links, coral pill CTA.

## Do's and Don'ts

### Do
- Ground everything on the warm cream canvas, not cold white
- Keep coral as the single hero accent — one strong color, used sparingly
- Use large pillowy radii on cards and full pills on buttons
- Reserve sage/amber strictly for wellness state indicators
- Keep neutrals warm-tinted so nothing feels clinical

### Don't
- Don't use pure white as the page background — it breaks the warmth
- Don't introduce cold blues or grays into chrome
- Don't sharpen the corners — softness is the identity
- Don't oversaturate the state colors into alarm-red territory
- Don't let coral compete with itself by using it for non-actions

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, full-width pill CTAs |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | >1024px | Full layout, ~1120px max width |

### Collapsing Strategy
- Hero scales 52px → ~34px, keeps tight tracking
- Feature cards 3-col → 2-col → single column
- Nav collapses to a hamburger; CTA stays a coral pill
- Section vertical spacing compresses on mobile

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lovi. Brand names and trademarks belong to their respective owners.