Clova

Overview

Clova embodies 'Warm Minimalism with Typographic Drama'—a design philosophy that marries the approachable warmth of a cream-and-paper palette with bold, confident typography and strategic accent colors. The brand serves fashion-conscious users seeking clarity and personalization in wardrobe management, evoking a sense of calm discovery and daily confidence. The aesthetic draws from editorial design traditions (Georgia serif headlines, generous white space) while injecting energy through a vibrant lime accent (#d8ff43) and warm orange secondary (#ff6b35), creating visual moments that feel both sophisticated and playful.

Clova's voice is conversational yet authoritative—never breathless or overly casual, but genuinely helpful. The tone celebrates small wins ('12 new combinations from clothes you already own') and speaks to the user's real constraints (weather, schedule, mood). Example sentence in brand voice: 'Your wardrobe just got 12 new outfits—without buying a single thing.'

Colors

The color system is anchored in a warm, off-white surface palette (#f3f0e8 as primary surface, #fffef9 as bright/screen backgrounds, #e7e1d4 as container-high) that evokes natural paper and linen. This neutral foundation is deliberately warm—never cold gray—to reflect the tactile, personal nature of fashion. Primary text is a near-black ink (#171714) for maximum legibility and sophistication. Secondary accent is a warm orange (#ff6b35) used sparingly on CTAs, badges, and highlights to signal action and energy. Tertiary accent is a vibrant lime (#d8ff43) reserved for the most prominent interactive elements (feature icons, float cards, marquee backgrounds) and brand marks, creating visual pop without overwhelming. Muted text (#67655e) is used for supporting copy, metadata, and disabled state

Typography

The type system pairs Georgia serif (400 weight, -0.065em letter-spacing) for headlines and display text with Inter sans-serif for body and UI labels. This pairing creates visual hierarchy through family contrast rather than weight alone—Georgia headlines feel editorial and authoritative, while Inter body copy remains crisp and modern. Display (92px, -0.065em) is reserved for hero headlines with dramatic line-height compression (1.0) to create impact. Headline-lg (76px, -0.055em) and headline-md (44px, -0.04em) scale responsively for section titles. Body-lg (18px, 1.7 line-height) and body-md (16px, 1.5 line-height) provide generous leading for readability and breathing room. Label-md (14px, 700 weight, 0.01em tracking) and label-sm (12px, 700 weight, 0.16em tracking) are used for UI label

Layout

The layout uses a 12-column grid with a fixed container max-width of 1180px, centered with margin-inline: auto. The grid is fluid on mobile (min(calc(100% - 40px), 1180px)) to accommodate smaller screens while maintaining consistent gutter spacing. Hero section uses a 1.03fr / 0.97fr split (copy left, visual right) with 54px gap, creating asymmetry that feels intentional. Section padding is 118px vertical (40px on mobile) to establish clear rhythm and breathing room between content blocks. Gutter spacing is 24px (12px on mobile), applied consistently to card padding, button padding, and component gaps. White space is treated as a design element—never fill empty space with decoration. The marquee section breaks the grid intentionally, spanning full-width with 1px solid borders top and botto

Elevation & Depth

Depth is achieved through layering and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): flat surface at #f3f0e8 with no shadow. Level 2 (Cards & Containers): 1px solid border (rgba(23, 23, 20, 0.16)) with optional box-shadow: 0 4px 12px rgba(23, 23, 20, 0.08) on hover. Level 3 (Modals & Float Cards): 1px solid border (#171714) with box-shadow: 7px 7px 0 #171714 (hard offset shadow for playful depth) or 0 8px 0 rgba(23, 23, 20, 0.14) on button hover. The phone mockup in hero uses a compound shadow (22px 30px 0 #e7e1d4, 23px 31px 0 #171714) to create a stacked, 3D effect. All sh

Shapes

The shape philosophy is 'Architectural Softness'—combining sharp, geometric precision with rounded corners that feel approachable rather than overly playful. Buttons use border-radius: 999px (full pill shape) to signal primary action and create visual softness. Cards use 27px border-radius (a custom value, not a standard token) for a gentle, organic feel that's distinct from buttons. Inputs and chips use 18px border-radius for a balanced middle ground. Feature icons use 50% border-radius (perfect circles) to create focal points and visual rhythm. Float cards use 18px border-radius to match inp

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: #171714, color: #fffef9, border-radius: 999px, padding: 0 22px, min-height: 48px, font-size: 14px, font-weight: 700. On hover, apply transform: translateY(-2px) and box-shadow: 0 8px 0 rgba(23, 23, 20, 0.14) with transition: 200ms ease-out. Button-secondary (light variant) uses background: transparent, border: 1px solid #171714, color: #171714; on hover, background becomes #fffef9. All buttons use gap: 10px to accommodate optional icons. The nav-cta variant reduces min-height to 42px and padding-inline to 19px for compact header placement.

Containers & Surfaces Cards use background: #e7e1d4, border-radius: 27px, padding: 17px, border: 1px solid rgba(23, 23, 20, 0.16). On hover, background

Do's and Don'ts

**Do**

• Do use Georgia serif for all headlines (h1, h2, h3) with font-weight: 400 and negative letter-spacing (-0.04em to -0.065em) to create visual drama and editorial authority.
• Do apply the lime accent (#d8ff43) sparingly—only on feature icons, float cards, marquee backgrounds, and the brand mark—to maintain visual impact and prevent color fatigue.
• Do use the warm off-white surface (#f3f0e8) as the default background and layer containers with the surface-container stack (#e7e1d4, #ede9df) to create depth without relying on shadows.
• Do maintain 48px minimum height for all interactive buttons and ensure padding is symmetric (0 22px) to create visual balance and touch-friendly targets.
• Do use transition: 200ms ease-out for all hover states (transform: translateY(-2px), box-shadow changes) to create responsive, snappy feedback without feeling sluggish.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff)—always use the brand ink (#171714) and off-white (#fffef9) to maintain warmth and sophistication.
• Don't apply multiple shadows or blur effects; use the elevation system (1px border + optional 4-8px shadow) to keep the design clean and legible.
• Don't mix serif and sans-serif within a single headline or body paragraph; Georgia is for display/headlines, Inter is for body/UI—never reverse this.
• Don't use the orange secondary (#ff6b35) or lime tertiary (#d8ff43) for body text or large backgrounds; reserve them for accents, badges, and CTAs to prevent visual overwhelm.
• Don't override border-radius values on components; use the defined scale (999px for buttons, 27px for cards, 18px for inputs) to maintain visual consistency and brand recognition.