QOVES

Overview

QOVES is a science-driven beauty analysis platform that embodies 'Objective Minimalism'—a design philosophy that strips away aesthetic noise to reveal data-backed insights. The brand serves individuals seeking personalized, non-surgical facial transformation guidance, combining rigorous analysis with accessible, empowering language. The visual identity evokes calm clarity: soft, muted color gradients (slate-blue to sage-green) create a serene backdrop for white-text typography and high-contrast CTAs, evoking both scientific precision and human warmth. The emotional response is one of confidence without judgment—users feel seen, understood, and guided by expertise rather than sold to. Voice: direct, evidence-based, never condescending. Example: 'Your bone structure is your foundation. Here's how to emphasize it.'

Colors

The color system prioritizes clarity and trust through a restrained, sophisticated palette. Primary (#ffffff) is the dominant interactive color—used on CTAs ('Start my plan'), input fields, and card surfaces—creating a clean, approachable interface against the brand's signature gradient backgrounds. Secondary (#9aaeb5, a muted slate-blue) serves as the supporting accent for hover states, badges, and secondary navigation, reinforcing the calm, analytical tone. Tertiary (#aec2c9, a soft sage-green) appears in accent elements and highlights, balancing the cooler secondary. The surface stack is anchored in near-white tones (surface #ffffff, surface-container-low #f2f5f5, surface-container #f2f2f2) to maintain visual lightness, while on-surface text (#233137, a deep teal-gray) ensures legibilit

Typography

The type system uses PP Neue Montreal exclusively, a geometric sans-serif that communicates precision and modernity without coldness. Display (60px, 400 weight, -0.04em letter-spacing) anchors hero sections with confident, spacious letterforms. Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) establish information hierarchy with tight negative letter-spacing (-0.02em, -0.015em respectively) to create visual density and authority. Body text (16–18px, 400 weight, 24–28px line-height) prioritizes readability over ornamentation, with generous line-height (1.5–1.75x) to reduce cognitive load when scanning analysis results. Labels (14px, 500 weight) and small labels (12px, 500 weight) use increased letter-spacing (0.01em, 0.02em) to add visual separation and emphasis on interact

Layout

The layout system uses a fluid, 12-column grid with a 1280px container max-width, scaling responsively down to 1099px (tablet) and 767px (mobile) breakpoints. The hero section spans full viewport height (100dvh) with asymmetric composition: left-aligned text (max-width 53rem) paired with right-aligned hero imagery, creating visual balance and guiding the eye toward the primary CTA. Spacing follows a semantic scale: lg (40px) separates major sections, md (24px) groups related content, and sm (12px) provides breathing room within components. The gutter (24px) is applied consistently to horizontal padding, creating a rhythm that feels both spacious and intentional. Container max-width is enforced at 1280px to prevent text lines from exceeding 75 characters, maintaining optimal readability. Wh

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base): no shadow; surfaces sit flush on the white background. Level 2 (Cards & Inputs): box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), a subtle lift that suggests interactivity without drama. Level 3 (Modals & Elevated Cards): box-shadow: 0 10px 40px rgba(154, 174, 181, 0.3), using the secondary color in the shadow to create a cohesive, branded depth. Level 4 (Hero Overlays & Modals): box-shadow: 0 38px 70px rgba(35, 49, 55, 0.3), a deeper shadow that anchors the most prominent elements. Hover states transi

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften geometric precision without sacrificing clarity. Buttons use full radius (9999px) to create pill-shaped CTAs that feel approachable and clickable, with padding 10.67px 21.33px and height 44px for comfortable touch targets. Cards and containers use lg radius (1rem / 16px) for a balanced, modern appearance that avoids sharp corners while maintaining visual structure. Input fields use DEFAULT radius (0.5rem / 8px) to suggest containment and focus. Modal overlays and elevated surfaces use xl radius (1.5rem /

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use white background (#ffffff) with dark text (#233137), full radius (9999px), and padding 10.67px 21.33px, creating a high-contrast, immediately clickable appearance. On hover (button-primary-hover), the background shifts to surface-container-high (#e8e8e8) with a subtle shadow elevation (0 4px 12px rgba(0, 0, 0, 0.08)), providing tactile feedback over 0.3s ease-in-out. Secondary buttons (button-secondary) use rgba(255, 255, 255, 0.2) background with a 1px border at rgba(255, 255, 255, 0.3), designed for use over gradient backgrounds. On hover, opacity increases to 0.3 and border to 0.5, creating a frosted-glass effect. All buttons use label-md typography (14px, 500 weight) and transition all

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary CTA color on gradient backgrounds—it creates maximum contrast and signals action.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to all text over gradient backgrounds to ensure legibility.
• Do maintain the full-radius (9999px) pill shape on all primary buttons—it's a core brand signal for interactivity.
• Do use the secondary color (#9aaeb5) for hover states and secondary navigation to create a cohesive, calm interaction model.
• Do respect the 1280px container max-width and apply consistent 24px gutters to maintain visual rhythm across breakpoints.

**Don't**

• Don't use the primary color (#ffffff) for body text on white backgrounds—it creates zero contrast. Use on-surface (#233137) instead.
• Don't apply shadows larger than lg (0 38px 70px) to regular cards—reserve deep shadows for modals and hero overlays only.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use the error color (#bb3030) for non-critical UI elements—reserve it for validation errors and destructive actions only.
• Don't reduce line-height below 1.5x on body text; the brand prioritizes readability and cognitive ease over density.