Eva

Overview

Eva is an award-winning Australian furniture and home goods retailer that embodies **Warm Minimalism**—a design philosophy that marries Scandinavian restraint with earthy, tactile warmth. The brand serves design-conscious Australians seeking quality, sustainability, and fast delivery. The UI evokes a sense of calm domesticity: soft, neutral palettes (warm beiges #fcfaf5, deep charcoals #242421) punctuated by a sophisticated sage-green accent (#457066) that signals trust and natural materials. The emotional response is one of quiet confidence—the interface gets out of the way, letting product imagery and clear information hierarchy dominate.

Eva's voice is conversational yet authoritative: direct, unpretentious, and grounded in Australian vernacular. The brand avoids corporate jargon; instead, it speaks like a knowledgeable friend recommending a sofa. Example: "We've designed every mattress to last—no compromise on comfort or durability." Typography relies on FFF Acid Grotesk, a geometric sans-serif that feels contemporary without being trendy, reinforcing the brand's commitment to timeless design.

Colors

Eva's color system is rooted in natural materials and Australian landscapes. **Primary (#457066)** is a muted sage-green used for CTAs, active states, and key interactive elements—it signals growth, sustainability, and the natural world without shouting. **Secondary (#ba5242)** is a warm terracotta-rust, reserved for accent highlights, sale badges, and secondary CTAs; it evokes clay, earth, and warmth. **Surface stack** progresses from the warm cream base (#fcfaf5) through increasingly neutral grays (#f2f0eb, #dcd9c9) to deep charcoal (#242421) for text and shadows. The inverse palette (#1f362f, a forest-dark green) is used sparingly for hero sections and high-contrast moments. All surfaces maintain a warm undertone (never pure gray or cool white) to reinforce the brand's tactile, natural

Typography

The type system uses FFF Acid Grotesk exclusively—a single, versatile typeface that scales from 12px labels to 60px display headlines. The geometric, open letterforms (particularly the distinctive 'a' and 'g') create visual interest while maintaining legibility at all sizes. **Display (60px, 400 weight, -0.02em tracking)** anchors hero sections and brand moments; **Headline-lg (48px)** is reserved for page titles and major section breaks; **Body-md (16px, 0.06rem tracking)** is the workhorse for product descriptions and body copy, with generous 24px line-height for readability on mobile and desktop. The 0.06rem letter-spacing (approximately 0.96px at 16px base) is baked into the body font to create a slightly airy, premium feel without sacrificing legibility. For small labels over busy pro

Layout

Eva uses a **fluid 12-column grid** with a max-width of 1280px (120rem), centered on desktop and edge-to-edge on mobile. The gutter is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 8px (xs spacing) on phones. **Section separation** uses lg spacing (40px) for major content blocks (hero, product grid, testimonials), creating breathing room without excessive whitespace. **Container max-width** is 1250px for product grids and 1200px for editorial content, allowing asymmetric layouts that feel intentional. The page rhythm favors generous whitespace: no section is tightly packed. Padding inside cards is consistently md (24px), with internal text elements using sm (12px) for breathing room. The design avoids centered layouts except for modals and hero text; left-align

Elevation & Depth

Eva's elevation system is subtle and warm, avoiding harsh shadows. **Level 1 (Base)**: No shadow; flat surfaces use only a 1px border at rgba(36, 36, 33, 0.05) for definition. **Level 2 (Cards/Containers)**: box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift. **Level 3 (Modals/Overlays)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, warm shadow that suggests depth without drama. Hover states transition shadows smoothly (200ms ease-in-out) from Level 2 to Level 3. The modal overlay uses a semi-transparent dark scrim (rgba(36, 36, 33, 0.4)) with a 4px blur, crea

Shapes

Eva employs **Soft-Technical Minimalism**: rounded corners are used strategically to soften geometric forms without sacrificing clarity. **Buttons** use full 40px border-radius (pill-shaped), creating a friendly, approachable CTA that contrasts with the sharp product photography. **Cards and containers** use 4px (sm) or 8px (DEFAULT) radius, maintaining a contemporary, grid-like feel. **Inputs** use 0px radius (sharp corners), reinforcing their functional, utilitarian role—they are tools, not decorative elements. **Badges and pills** use full 40px radius for visual distinction. The reasoning:

Components

Action Elements **Buttons** come in two primary variants: primary (sage-green background, cream text, 40px radius, 1px border) and secondary (transparent background, sage-green text, 40px radius, 1px sage-green border). Both use label-md typography (14px, 700 weight) and 48px height for touch-friendly targets. Hover states transition the background color to primary-fixed-dim (#b0d4ba) over 200ms, maintaining the border color. Active states darken further to on-primary-container (#1f362f). The "CONTINUE" button in the modal uses the primary variant with uppercase text (letter-spacing: 0.05em) for emphasis.

Containers & Surfaces **Cards** use surface-container (#f2f0eb) background with 4px radius and md padding (24px). On hover, the background transitions to surface-container-high (

Do's and Don'ts

**Do**

• Do use sage-green (#457066) for all primary CTAs and interactive states—it is the brand's signature accent and builds recognition.
• Do maintain warm undertones in all surfaces and shadows; avoid pure grays, cool whites, or black shadows—they break the natural, tactile aesthetic.
• Do apply generous whitespace (lg spacing, 40px) between major sections; Eva's minimalism is about clarity, not density.
• Do use FFF Acid Grotesk at 400 weight for body copy and 700 weight for labels only; avoid intermediate weights to maintain visual clarity.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to feel responsive without jarring.
• Do keep button border-radius at 40px (full pill shape) for CTAs; this softness signals approachability and differentiates actions from structure.

**Don't**

• Don't use the secondary color (#ba5242) for primary CTAs; reserve it for sale badges, error states, and accent highlights only.
• Don't apply shadows exceeding 8px blur-radius or use harsh, cool-toned shadows (rgba(0, 0, 0, 0.3) or higher)—they feel corporate and break the warm, natural aesthetic.
• Don't center-align product grids or body copy; use left-aligned layouts and asymmetric compositions to create visual interest and avoid monotony.
• Don't use system fonts or generic sans-serifs; FFF Acid Grotesk is non-negotiable for brand consistency and its distinctive geometric character.
• Don't add decorative elements, gradients, or textures to surfaces; Eva's strength is in restraint—let product photography and whitespace do the work.
• Don't use pure white (#ffffff) as the primary surface; use warm cream (#fcfaf5) or off-white (#f2f0eb) to maintain the natural, tactile feel.