GOLDNER

Overview

GOLDNER is a premium women's fashion brand specializing in elegant, timeless designs for discerning women aged 50+. The brand embodies 'Refined Minimalism'—a design philosophy that prioritizes sophisticated simplicity, impeccable tailoring, and understated luxury over trend-chasing. The visual identity conveys quiet confidence through a warm, neutral palette anchored by rich gold-brown accents (#986e00), paired with clean typography and generous white space. The UI evokes a sense of curated elegance: every interaction feels intentional, every surface breathes, and every detail whispers rather than shouts. The emotional response is one of calm assurance—a woman visiting GOLDNER knows she will find pieces that honor her maturity and refined taste.

The brand voice is warm, knowledgeable, and respectful. GOLDNER speaks to its customer as a trusted advisor, not a salesperson. Vocabulary emphasizes quality, fit, and timelessness: 'exquisite tailoring,' 'premium fabrics,' 'perfect proportions,' 'enduring elegance.' Tone is conversational yet authoritative—sentences are clear and direct, never breathless or hyperbolic. Example: 'Our extended sizes ensure every woman finds her perfect fit—because style has no size limit.'

Colors

The color system is rooted in warm, earthy tones that communicate sophistication and accessibility. Primary (#986e00) is a rich, muted gold-brown used exclusively for interactive elements—CTAs, links, focus states, and brand accents. It appears sparingly but decisively, drawing the eye to moments of action without overwhelming the interface. Secondary (#666666) provides a neutral anchor for supporting UI elements, badges, and secondary text. Tertiary (#d1c092) is a lighter, warmer sand tone used for container backgrounds and highlights, creating visual rhythm and depth. The surface stack is predominantly white (#ffffff) with carefully calibrated grays (#f4f4f4, #e5e5e5, #d1d5db) for subtle layering. Error states use a deep red (#c41e3a) for discount badges and alerts, ensuring immediate re

Typography

The type system uses AvenirLT as the primary typeface, a geometric sans-serif that balances modernity with timeless appeal. Display (60px, 700 weight) is reserved for hero statements and major page titles, set with -0.04em letter-spacing to create visual tightness and authority. Headline-lg (40px, 600 weight) anchors section headers and product category titles. Headline-md (28px, 500 weight) is the workhorse for subsections and card titles, maintaining readability while preserving hierarchy. Body-md (16px, 400 weight) is the default for product descriptions and body copy, set at 24px line-height for comfortable reading on screens and print. Label-md (14px, 600 weight) is used for buttons, form labels, and UI chrome—its weight ensures legibility at small sizes. All headlines use -0.01em to

Layout

The page layout uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. White space is treated as a design element, not wasted real estate—product cards are surrounded by breathing room, section headers are preceded by lg spacing, and the footer is separated by xl spacing. Hero sections use full-width imagery with a 40px padding buffer on desktop, creating a frame effect. Product grids use a

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on hover states and small interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. Cards use md elevation by default, transitioning to lg on hover (250ms ease). Buttons have no shadow at rest, gaining a subtle md shadow on hover to indicate interactivity. Modals and overlays use lg elevation with a semi-transparent

Shapes

The shape philosophy is 'Architectural Softness'—clean lines with minimal rounding that feels contemporary without sacrificing warmth. Buttons use 0.5rem (8px) border-radius, creating a subtle rounded corner that feels refined rather than playful. Cards and containers use 0.5rem for consistency with buttons, maintaining visual coherence. Input fields use 0.5rem to match the button language. Modals and larger surfaces use 1rem (16px) for slightly more breathing room. Badges and small UI elements use 0.25rem (4px) for a more geometric feel. The full radius (9999px) is reserved for circular eleme

Components

Action Elements Buttons are the primary interaction mechanism and must feel intentional and responsive. Primary buttons use {colors.primary} (#986e00) background with white text, 12px horizontal padding, 48px height, and 0.5rem border-radius. On hover, the background transitions to #6b5200 (a darker shade of primary) over 250ms. On active/pressed state, apply a 3px inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create tactile feedback. Secondary buttons are transparent with a 1px solid primary border, white background on hover, and the same 250ms transition. Tertiary buttons use {colors.primary-container} (#d1c092) background with on-primary-container text, useful for less prominent actions. All buttons use {typography.label-md} (14px, 600 weight) and must include a focus ring (o

Do's and Don'ts

**Do**

• Do use primary (#986e00) exclusively for interactive elements—CTAs, links, focus states—never for backgrounds or body text.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile; white space is a design feature, not wasted real estate.
• Do apply 250ms ease transitions to all interactive state changes (hover, focus, active) to reinforce the brand's deliberate, unhurried pace.
• Do use AvenirLT with -0.01em to -0.04em letter-spacing on headlines to create visual tightness and authority.
• Do apply text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) to small labels (12px) over busy product imagery to ensure contrast.
• Do use the elevation system (sm/md/lg shadows) to create subtle depth; avoid flat design or dramatic drop shadows.
• Do ensure all interactive elements have a visible focus ring (outline: 2px solid primary, outline-offset: 2px) for keyboard accessibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use #191919 for dark text and #ffffff for backgrounds to maintain warmth.
• Don't apply primary color to non-interactive elements like badges, backgrounds, or decorative elements; reserve it for CTAs and focus states.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); consistency is essential to the refined aesthetic.
• Don't apply shadows with blur > 24px or spread > 8px; keep shadows subtle and naturalistic (0 3px 8px or 0 8px 24px maximum).
• Don't use more than 2 font weights in a single section; stick to 400 (regular) and 600 (semibold) for clarity.
• Don't animate transitions faster than 200ms or slower than 500ms; the brand rhythm is deliberate but responsive.
• Don't use discount badges (#c41e3a) on any element other than sale indicators; the red is reserved for urgency and must not be diluted.