Lovi

# Lovi — Style Reference
> violet-tinted laboratory under soft light — precision meets pastel.

**Theme:** light

**Site:** https://lovi.care

Lovi evokes a sense of modern, approachable science through its minimalist aesthetic and a central playful violet. The design leverages soft, near-white backgrounds with subtle shadow-derived depth, creating an airy and calming user experience. Unexpectedly fluid headline letter-spacing and a mix of sharp and organic radii define its distinct contemporary feel, balancing clinical precision with user-friendly warmth.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Midnight Violet | `#151581` | `--color-midnight-violet` | Primary brand accent, used for prominent headlines, interactive text links, and key graphical elements. Its deep saturation provides a focal point against the light neutrals. |
| Lavender Haze | `#a1a1cd` | `--color-lavender-haze` | Muted violet used for secondary text links or less critical elements, adding a subtle brand touch. |
| Vivid Sky | `#5465ff` | `--color-vivid-sky` | Accent for certain text elements or graphical components, adding a bright, energetic touch. |
| Radiant Pink | `#e6aeff` | `--color-radiant-pink` | Graphical element fill, appearing in illustrations and gradients. |
| Blush Gradient | `#c6a2ff` | `--color-blush-gradient` | Illustrative gradient background, creating a soft, ethereal mood. |
| Conic Aura | `#ebbdde` | `--color-conic-aura` | Complex conic gradient used for abstract background elements, providing a multi-hued, soft glow. |
| Cloud White | `#ffffff` | `--color-cloud-white` | Dominant page background, card surfaces, and text on darker elements, creating an expansive, clean canvas. |
| Obsidian Text | `#000000` | `--color-obsidian-text` | Primary body text and headings, providing high contrast against light backgrounds. |
| Shadow Gray | `#292824` | `--color-shadow-gray` | Subtle text for secondary information and iconography, offering softer contrast than Obsidian. |
| Onyx Outline | `#a9a9a7` | `--color-onyx-outline` | Less prominent text for descriptive content and some borders, sitting in the mid-range of the neutral scale. |
| Silver Mist | `#949392` | `--color-silver-mist` | Muted text, often for descriptive copy or less emphasized details. |
| Pale Gray | `#f6f6fa` | `--color-pale-gray` | Background for certain interactive elements and sections, providing a slight visual separation from Cloud White. |
| Almond Dust | `#f6f5f4` | `--color-almond-dust` | Subtle background for specific button variants, differentiating them from other interactive elements. |
| Warm Gray | `#d6d6d6` | `--color-warm-gray` | Border colors and subtle dividers, providing minimal visual interruption. |
| Deep Rose | `#f25c75` | `--color-deep-rose` | Semantic use for alerts or specific product features, providing a warm, contrasting accent. |
| Fresh Green | `#00bb76` | `--color-fresh-green` | Semantic use for positive indicators or success states, like review ratings. |
| Mint Gradient | `#57de98` | `--color-mint-gradient` | Illustrative gradient for graphical elements, suggesting freshness and nature. |

## Tokens — Typography

### ES Rebond Grotesque
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 14px, 16px, 20px, 22px, 28px, 32px, 44px, 48px
- **Line height:** 0.91, 0.92, 1.05, 1.06, 1.09, 1.14, 1.2, 1.25
- **Letter spacing:** -0.042, -0.036, -0.031, -0.023
- **Role:** Display headlines and prominent titles. Its custom 'ss02' feature likely adds a distinct character, while its tight line heights and negative letter-spacing create a dense, impactful presence.

### ES Rebond Grotesque Medium
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 14px, 16px, 20px, 22px
- **Line height:** 1.09, 1.14, 1.2, 1.25
- **Letter spacing:** -0.045, -0.036, -0.031, -0.025
- **Role:** Subheadings and emphasized body text. Though labeled 'Medium', its 400 weight paired with distinctive line heights and letter spacing suggests a visual presence akin to a medium weight in other families.

### Inter
- **Substitute:** Inter
- **Weights:** 400, 500, 600
- **Sizes:** 12px, 14px, 16px, 18px, 24px
- **Line height:** 1.11, 1.25, 1.29, 1.33, 1.38, 1.43
- **Letter spacing:** -0.062, -0.044, -0.042, -0.04, -0.036, -0.031, -0.029, -0.028, -0.025, -0.019
- **Role:** General body text, links, and various UI elements. Its broad range of weights and granular letter-spacing control allow for fine-tuned information hierarchy.

### Inter-Medium
- **Substitute:** Inter Medium
- **Weights:** 500
- **Sizes:** 14px, 16px, 20px, 24px
- **Line height:** 1.2, 1.25, 1.29
- **Letter spacing:** -0.071, -0.05, -0.044, -0.042, -0.037, -0.031
- **Role:** Specific emphasized text blocks and UI labels, where its distinct letter-spacing provides visual differentiation from regular Inter.

### Geist
- **Substitute:** Geist
- **Weights:** 400
- **Sizes:** 16px, 18px
- **Line height:** 1.22, 1.38
- **Letter spacing:** -0.031, -0.028
- **Role:** Tertiary body text and notes. Its specific font-feature-settings ('dlig', 'ss01', 'ss02', 'ss06') hint at a distinctive stylistic flavor for nuanced body copy, giving it a more bespoke feel than a standard sans-serif.

## Tokens — Type Scale

Major Third (1.25) from 16px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 12px | 1.2 | — |
| body-sm | 14px | 1.25 | — |
| body | 16px | 1.29 | — |
| subheading | 20px | 1.2 | — |
| heading | 28px | 0.91 | -1.18px |
| heading-lg | 32px | 0.92 | -1.44px |
| display | 48px | 1.06 | -1.1px |

## Tokens — Spacing

- **Section gap:** 80px
- **Card padding:** 16px
- **Element gap:** 8px

## Tokens — Radius

- **Buttons:** 48px
- **Inputs:** 16px
- **Cards:** 24px
- **large:** 40px
- **tags:** 8px

## Tokens — Elevation

- **Review Card:** `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`
- **Other elevated containers (e.g., modals, tooltips):** `rgba(36, 36, 41, 0.07) 0px 8px 34px 0px, rgba(37, 36, 41, 0.09) 0px 1px 2px 0px`

## Layout

The site employs a max-width contained layout, with content centered on the page. The hero section uses a full-width background, but the primary headline and visual elements are contained. A prominent pattern is the alternation of content blocks: a large centered headline and subtext often leads into a section with a large image/illustration paired with text, sometimes in a 2-column arrangement. Review sections feature a grid of cards (likely 3-column on desktop). Vertical rhythm is maintained by consistent section gaps, creating definition between content blocks. Navigation is a simple top bar with a logo and an app store download button, suggesting a minimalist and direct user journey.

## Imagery

Imagery primarily consists of high-quality product photography (a person's face interacting with a mobile app) and professional portrait photography for team members. Product shots are contained within device mockups or cropped precisely, often appearing isolated against the clean background, creating a focused, almost clinical presentation. Illustrations are abstract and colorful, featuring vivid and muted pastel gradients (Blush Gradient, Mint Gradient, Conic Aura) with soft, organic shapes that act as decorative atmosphere without direct explanatory content. Icons are minimal, often line-based or small filled shapes, using brand accent colors (#151581) or vivid semantic colors (Fresh Green #00bb76, Deep Rose #f25c75). Imagery density is moderate, used to break up text-heavy sections or highlight key features without overwhelming the clean aesthetic.

## Components

### Award Badge + App Store CTA

### Testimonial Review Cards

### Feature Highlight — Skin Health Approach

### Primary Call to Action Button
*Main user action button*

Rounded pill shape with backgroundColor: #f6f5f4, text color: #151581, borderTopColor: #151581, borderRadius: 48px, padding: 32px all around. This implies a very large, soft-edged button with a clear brand accent.

### Secondary Call to Action Button
*Less prominent interactive element*

backgroundColor: #FFFFFF, text color: #151581, borderTopColor: #151581, borderRadius: 24px, padding: 32px vertical, 28px horizontal. Slightly smaller radius and padding than the primary CTA, offering visual hierarchy.

### Ghost Accent Button
*Subtle interactive element, often for supplementary actions or links*

backgroundColor: rgba(255, 255, 255, 0.2), text color: #151581, borderTopColor: #151581, borderRadius: 56px, padding: 6px vertical, 10px-12px horizontal. A highly transparent, highly rounded button used for minimal visual impedance, often for small tags or informational accents.

## Guidelines

### Do

- Use Midnight Violet (#151581) exclusively for primary interactive states and headline accents.
- Apply ES Rebond Grotesque with its specific letter-spacing for all headings to maintain the fluid, typographic tension.
- Utilize Cloud White (#ffffff) as the default background for all main page content and card surfaces.
- Maintain high contrast for body text by using Obsidian Text (#000000) or Shadow Gray (#292824) on light backgrounds.
- Implement 48px border-radius for all primary buttons, and 24px for secondary buttons or cards, ensuring consistent softness.
- Leverage the subtle shadow rgba(36, 36, 41, 0.07) 0px 8px 34px 0px for elevated cards and review containers.

### Don't

- Do not introduce new primary font families; adhere strictly to ES Rebond Grotesque, Inter, and Geist.
- Avoid using highly saturated accent colors in large blocks; reserve them for small icons, text accents, or controlled gradient uses.
- Do not deviate from the established spacing scale (multiples of 4px) to ensure consistent content density.
- Avoid hard, sharp corners; all significant UI elements should incorporate a border radius of at least 8px.
- Do not use dark backgrounds for main content sections; the system is built around a predominantly light theme.
- Do not apply shadows indiscriminately; reserve them for intentional elevation of components like cards and modals, using the defined subtle shadow style.

## Agent Prompt Guide

**Quick Color Reference:**
- Text: #000000 (Black)
- Background: #ffffff (Cloud White)
- CTA: #f6f5f4 (Almond Dust) with #151581 (Midnight Violet) text
- Border: #d6d6d6 (Warm Gray)
- Accent: #151581 (Midnight Violet)

**3-5 Example Component Prompts:**
1.  **Create a Hero Section:** Use Cloud White background. Headline (ES Rebond Grotesque, 48px, 0.91 line-height, #000000, letter-spacing -2.3px). Subtext (Inter, 18px, 1.33 line-height, Shadow Gray #292824). Centered prominent button as 'Primary Call to Action Button'.
2.  **Generate a Review Card:** White background, borderRadius 24px, apply the subtle shadow 'rgba(36, 36, 41, 0.07) 0px 8px 34px, rgba(37, 36, 41, 0.09) 0px 1px 2px'. Content inside should use Inter body text (#000000) and Fresh Green (#00bb76) for star ratings.
3.  **Design an Award Badge:** Use Almond Dust (#f6f5f4) background, borderRadius 16px. Text should be ES Rebond Grotesque Medium (16px, #151581, 1.2 line-height, letter-spacing -0.496px) with an accompanying icon.
4.  **Compose a Feature Point:** Body text (Geist, 16px, 1.22 line-height, #000000, letter-spacing -0.496px) with an inline Vivid Sky (#5465ff) text accent. Prepend with a small icon, potentially using Radiant Pink (#e6aeff) as a fill color.