Lóvi

Overview

Lóvi is a science-backed AI cosmetology platform that transforms personal skincare through intelligent face scanning and real-time beauty analysis. The design language embraces "Precision Minimalism"—a philosophy that combines austere, high-contrast typography with subtle gradient accents and purposeful whitespace to convey trustworthiness and technical sophistication. The interface prioritizes clarity over decoration, using a predominantly neutral palette (off-white #fefefe, charcoal #292824) punctuated by a vivid electric blue (#0000ee) that signals actionable moments and brand confidence. Users experience the UI as both approachable and authoritative: the generous 48px headline set in ES Rebond Grotesque Regular feels human and conversational, while the deep blue CTA buttons and precise 24px border-radius on cards communicate scientific rigor.

The brand voice is direct, evidence-driven, and empowering without being prescriptive. Lóvi speaks in declarative statements grounded in dermatological fact: "Science-backed AI Cosmetologist you can trust." The tone avoids hyperbole, marketing clichés, and false intimacy. Instead, it uses concrete language ("Face scan in progress," "24/7 Cosmetologist in your pocket") and celebrates both beginners and enthusiasts equally. Example sentence in brand voice: "Your skin's unique profile has been analyzed across 47 parameters—here's what your barrier needs today."

Colors

The color system operates on a principle of "high-contrast accessibility with accent restraint." The surface stack anchors the interface in near-white tones—#fefefe (surface), #f6f5f4 (surface-dim), #f6f6fa (surface-container-lowest)—creating a luminous, clinical backdrop that evokes laboratory precision. Text defaults to #292824 (on-surface), a warm charcoal that softens pure black (#000000) for reduced eye strain during extended skincare consultations. The secondary text color, #7c7979 (on-surface-variant), is reserved for metadata, timestamps, and supporting copy at 14px or smaller.

Primary accent is #0000ee (electric blue), deployed exclusively on CTAs, focus states, and interactive affordances. This vivid hue appears in button backgrounds (48px height, 12px 28px padding, border-radiu

Typography

The type system is built on a three-tier hierarchy: ES Rebond Grotesque (display/headline layer) for brand-distinctive voice, Geist (body/label layer) for functional clarity, and Inter (supplementary) for technical metadata. Display (60px, 400 weight, -0.02em tracking) and Headline-lg (48px, 400 weight) use ES Rebond Grotesque Regular to establish personality—the font's geometric, slightly condensed letterforms convey modernity without sacrificing warmth. Headline-md (32px, 500 weight) steps down to ES Rebond Grotesque Medium for section breaks and card titles. Body copy (16–18px, 400 weight, 24–28px line-height) is set in Geist, a humanist sans-serif with generous spacing (0.005–0.01em tracking) that ensures legibility at small sizes and on mobile. Labels and UI microcopy (12–14px, 500–60

Layout

The layout system uses a 12-column grid with a 1200px max-width container, centered with 24px gutters on desktop and 16px on tablet. Vertical rhythm is governed by the 8px unit: sections are separated by 40px (lg spacing), subsections by 24px (md spacing), and inline elements by 12px (sm spacing). The hero section occupies full viewport height with centered text alignment, using 60px display type for the main headline and 18px body-lg for supporting copy. Cards and content blocks use 24px internal padding with 1px borders in outline-variant (#ccc8c4). The container-max-width of 1200px ensures that even on ultra-wide displays, line lengths remain under 75 characters for body text, supporting cognitive load reduction. Whitespace is treated as a design material: the 40px lg spacing between ma

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered effects. Level 1 (base surface) has no shadow; Level 2 (cards, modals) uses box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1), a soft spread shadow that suggests gentle elevation. Level 3 (floating actions, tooltips) applies box-shadow: 0 8px 34px rgba(36, 36, 41, 0.06), a larger blur radius (34px) that creates perceived distance without visual heaviness. Focus states add a 3px inset ring: box-shadow: 0 0 0 3px rgba(0, 0, 238, 0.08), a semi-transparent blue halo that signals interactivity. H

Shapes

The shape language follows "Geometric Softness"—a philosophy that balances precision with approachability through carefully calibrated border-radius values. Buttons use border-radius: 9999px (full), creating pill-shaped affordances that feel modern and clickable without appearing frivolous. Cards and containers use 16px (lg), a moderate radius that softens corners while maintaining a structured, professional appearance. Input fields and smaller interactive elements use 8px (md), a subtle curve that suggests interactivity without distraction. Modals and floating panels use 24px (xl), a generous

Components

Action Elements Buttons are the primary interaction primitive. The button-primary component uses background-color: {colors.primary} (#0000ee), color: {colors.on-primary} (#ffffff), border-radius: 9999px, padding: 12px 28px, and height: 48px. The label-md typography (14px, 500 weight, 0.02em tracking) ensures text is scannable and accessible. On hover, the background transitions to #0000d4 (a 10% darker blue) over 200ms (transition: background-color 200ms ease-out), providing clear feedback without animation jank. The button-secondary variant uses background-color: {colors.on-surface} (#292824), a dark charcoal that creates high contrast on light backgrounds, with the same padding and height. The button-ghost variant is a transparent pill (background: rgba(255, 255, 255, 0.2), border: 1

Do's and Don'ts

**Do**

• Do use the electric blue (#0000ee) primary exclusively on CTAs, focus rings, and high-priority interactive elements—never on decorative or passive UI.
• Do maintain 24px gutters and 40px section spacing to preserve the minimalist, breathing aesthetic; whitespace is a design material, not wasted space.
• Do apply ES Rebond Grotesque Regular for headlines (display, headline-lg) to establish brand voice; reserve Geist for body and functional copy.
• Do use the full 40+ token color stack (surface-container-lowest through surface-container-highest) to create subtle visual hierarchy without relying on shadows alone.
• Do test all interactive elements at 44px minimum height on mobile and ensure 7:1+ contrast ratios for WCAG AAA compliance, especially on accent colors.
• Do animate state transitions (hover, focus, active) over 150–200ms using ease-out timing to feel responsive without appearing laggy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; instead, use the surface and on-surface tokens (#292824 on #fefefe) for warmth and reduced eye strain.
• Don't apply border-radius values smaller than 8px (md) to interactive elements; the geometric softness principle requires at least a subtle curve to signal affordance.
• Don't mix typefaces within a single headline or body paragraph; ES Rebond Grotesque and Geist are paired at the component level, not mixed mid-sentence.
• Don't use the secondary (#00b67a) or tertiary (#00afd6) accent colors on CTAs; reserve them for success states, data insights, and supporting UI only.
• Don't apply box-shadows larger than 0 8px 34px rgba(36, 36, 41, 0.06) or use multiple stacked shadows; the system relies on subtle, single-layer elevation.
• Don't reduce padding or height on buttons below 12px horizontal or 48px vertical on desktop; the spacious proportions reinforce the premium, trustworthy brand perception.