SOVA Jewels

Overview

SOVA Jewels is a contemporary luxury jewelry retailer rooted in Ukrainian craftsmanship and European design sensibility. The brand serves discerning customers seeking heirloom-quality pieces with modern aesthetics—positioned as a 'jewelry house' rather than a transactional marketplace. The design language embraces 'Warm Minimalism': a deliberate aesthetic movement that rejects cold, sterile interfaces in favor of tactile, earthy palettes (warm beiges #f5e6d8, soft pinks #f7efef, golden-browns #885e46) paired with crisp typography and generous whitespace. The visual experience evokes the feeling of entering a curated boutique—intimate, refined, unhurried. The UI communicates luxury through restraint: every element earns its place, and the absence of clutter becomes a statement of confidence.

The brand voice is sophisticated yet approachable, speaking to customers as peers rather than subjects. Tone: precise, knowledgeable, never condescending. Vocabulary favors specificity ('18k gold', 'artisan-crafted', 'limited edition') over marketing hyperbole. Example sentence in SOVA's voice: 'Each piece is handcrafted in our Kyiv atelier—we can trace every stone and every hour of work.'

Colors

SOVA's color system is built on a warm, neutral foundation anchored by deep charcoal (#030304) for text and a sophisticated warm-beige surface (#f5e6d8) that serves as the primary canvas. The primary accent color is a soft, warm cream (#eeddcc)—used exclusively on call-to-action buttons and interactive highlights. This choice avoids the jarring contrast of pure white-on-black, instead creating a tactile, almost fabric-like quality that aligns with luxury jewelry retail. Secondary colors introduce subtle sophistication: a muted sage-green (#448757) for status indicators and trust signals, and a warm golden-brown (#885e46) for tertiary accents and premium tier badges. The error state uses a bold red (#e20712) for critical alerts, providing necessary contrast without compromising the warm pal

Typography

The typography system uses Lato exclusively—a humanist sans-serif with generous letterforms and warm proportions that complement the brand's tactile aesthetic. The hierarchy spans from Display (56px, 700 weight, -0.02em tracking) for hero statements down to Label-sm (12px, 500 weight, 0.02em tracking) for metadata. Headlines (36px–28px) use 600 weight with tight negative tracking (-0.01em to 0em) to create visual density and authority, while body text (18px–16px) remains at 400 weight with 1.4–1.5 line-height for comfortable reading. The system avoids extreme weights (no 300, no 900) to maintain sophistication; instead, weight shifts (400 → 600 → 700) create contrast. On small labels over busy product imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility without re

Layout

SOVA uses a fluid 12-column grid with a fixed max-width of 1440px, centered with auto margins. Container padding scales responsively: 16px on mobile, 24px on tablet (768px+), and 32px on desktop (992px+). The page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal component padding uses sm spacing (12px). Whitespace is treated as a design material—generous margins around hero imagery and product cards create visual breathing room that reinforces the luxury positioning. The layout avoids grid-filling; instead, content often occupies 8–10 columns with intentional empty space, reflecting the 'less is more' philosophy. Hero sections span full-width with 60–80px vertical padding (using xl spacing) to creat

Elevation & Depth

Depth in SOVA is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like input fields and small cards, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating modals and hero overlays. Shadows use warm black (rgba(0, 0, 0, ...)) rather than pure black to maintain tonal harmony. Interactive elements (buttons, cards) transition between elevation levels on hover/focus: a card at rest uses sm shadow, then ele

Shapes

SOVA employs 'Architectural Softness'—a shape philosophy that balances precision with approachability. Buttons use a minimal 4px border-radius (0.25rem), creating subtle rounding that feels intentional rather than organic. Cards and containers use 8px radius (0.5rem) as the default, stepping up to 12px (0.75rem) for elevated modals and 16px (1rem) for hero sections. Input fields match buttons at 4px to create visual cohesion in form layouts. Badges and pills use full radius (9999px) for circular emphasis on status indicators. The rationale: small radii (4–8px) communicate precision and craft (

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the warm cream background (#eeddcc) with dark text (#030304), 12px vertical and 44px horizontal padding, and 48px height for touch-friendly targets. On hover, the background shifts to the light-pink container (#f7efef) with a 200ms transition. Button-secondary uses a transparent background with a 1px outline in warm gray (#cacece), maintaining visual hierarchy while offering alternative actions. Both variants use Lato 600 weight at 14px (label-md) for consistent labeling.

Containers & Surfaces Cards form the foundation of content organization. The card component uses the warm-beige surface (#f5e6d8) with 24px padding and a subtle sm-level shadow (0 1px 2px rgba(0, 0, 0, 0.06)). On hove

Do's and Don'ts

**Do**

• Do use the warm cream primary (#eeddcc) sparingly—reserve it for CTAs, focus states, and key interactive moments to maintain visual hierarchy and prevent accent fatigue.
• Do maintain generous whitespace around hero imagery and product cards; the absence of clutter communicates luxury and gives the eye room to appreciate the jewelry.
• Do apply consistent 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to reinforce the brand's deliberate, unhurried character.
• Do use the Lato 600 weight for all headlines and labels; this weight carries the brand's sophistication without appearing heavy or aggressive.
• Do layer shadows subtly: use sm shadows for minor elements and reserve md/lg shadows for modals and elevated surfaces; avoid stacking multiple shadows on a single element.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) anywhere in the interface; always reference the defined color tokens (#030304 for text, #fdfbf7 for bright surfaces) to maintain tonal warmth.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the visual system and undermine the architectural precision.
• Don't use the primary accent (#eeddcc) for body text, backgrounds, or non-interactive elements; it must remain reserved for CTAs and focus states to preserve its signaling power.
• Don't animate transitions faster than 150ms or slower than 300ms; the brand's character lives in the 150–200ms range, where interactions feel responsive but deliberate.
• Don't mix font families; Lato is the exclusive typeface. Avoid serif fonts, system fonts, or secondary typefaces, even for special occasions or marketing campaigns.