MADELEINE

Overview

MADELEINE is a premium German fashion retailer that embodies 'Refined Editorial Minimalism'—a design philosophy that prioritizes elegant restraint, sophisticated typography, and a carefully curated color palette rooted in warm neutrals and strategic accent colors. The brand serves discerning women aged 30–65 who value timeless quality, precise tailoring, and understated luxury. The UI evokes a sense of curated editorial sophistication: clean white and cream surfaces (fbfbf8, ffffff) provide breathing room, while deep charcoal text (222222) ensures legibility and authority. Accent colors—a bold magenta primary (c10054) for CTAs and a deep navy secondary (1b1f37) for structural elements—punctuate the interface with confidence without overwhelming the refined aesthetic.

The brand voice is precise, knowledgeable, and reassuring. MADELEINE speaks to customers as equals who understand quality: sentences are direct and informative, never breathless or hyperbolic. Example: 'Exklusive Kollektionen – Perfekte Passform für jede Figur – Langlebige Premium-Qualität' (Exclusive Collections – Perfect Fit for Every Figure – Durable Premium Quality). The tone balances accessibility with aspiration, acknowledging that premium fashion should be both attainable and inspiring.

Colors

The MADELEINE color system is anchored in a warm, neutral foundation that reflects the brand's focus on timeless elegance and quality craftsmanship. Primary surface colors—fbfbf8 (off-white), f0ebe5 (warm beige), and ffffff (pure white)—create a serene, editorial backdrop that allows product imagery and typography to command attention. The on-surface palette (222222 for primary text, 5a5a5a for secondary, 9ca3af for tertiary) ensures a clear hierarchy without harsh contrast; the warm undertones in surface colors prevent the interface from feeling cold or sterile.

The primary accent color, #c10054 (deep magenta), is reserved exclusively for high-intent interactions: primary CTAs ('Jetzt Shoppen'), active navigation states, and focus indicators. This color appears sparingly but decisively,

Typography

The MADELEINE typography system uses Arial as the primary typeface, a deliberate choice that conveys clarity, accessibility, and timeless professionalism—qualities central to the brand's positioning. The system defines six core levels: Display (60px, 500 weight, -0.02em tracking) for hero statements; Headline-lg (40px, 500 weight) for section titles; Headline-md (28px, 500 weight) for subsections; Title-lg (20px, 600 weight) for card headers and labels; Body-lg (18px, 400 weight, 28px line-height) for long-form content; Body-md (16px, 400 weight, 24px line-height) for standard UI text; Label-md (14px, 600 weight, 0.01em tracking) for buttons and interactive elements; and Label-sm (12px, 500 weight, 0.05em tracking) for metadata and secondary information. Weight progression (400 for body, 5

Layout

MADELEINE employs a 12-column fluid grid with a maximum container width of 1280px, ensuring content remains readable and visually balanced across all screen sizes. The spacing system uses an 8px unit base: xs (4px) for micro-interactions, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero and footer spacing. The gutter width (24px) provides consistent horizontal padding on mobile and tablet, expanding to 40px on desktop to accommodate larger viewports. White-space is treated as a design element: generous margins around product cards (md spacing), ample breathing room between navigation sections (lg spacing), and deliberate negative space in hero areas create a sense of editorial refinement. Container max-width

Elevation & Depth

Depth in MADELEINE is conveyed through subtle shadow and border treatments rather than dramatic layering, reflecting the brand's refined minimalism. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and micro-interactions, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdown panels, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and full-screen overlays. Cards use a 1px solid border in surface-variant (#e9e4df) paired with sm shadow to define edges without visual heaviness. Interactive elements (buttons, inputs) employ a 15

Shapes

MADELEINE employs 'Architectural Precision'—a shape philosophy that balances geometric clarity with subtle softness. Border-radius values are conservative and intentional: sm (0.25rem / 2px) for minimal rounding on badges and small UI elements, DEFAULT (0.5rem / 4px) for buttons and input fields, md (0.75rem / 6px) for cards and list items, lg (1rem / 8px) for modals and larger containers, and xl (1.5rem / 12px) for hero sections and full-width containers. The full radius (9999px) is reserved for pill-shaped badges and circular avatars. This restrained approach reflects the brand's editorial s

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand's signature magenta (#c10054) background with white text, 8px vertical and 24px horizontal padding, and a 4px border-radius. On hover (button-primary-hover), the background shifts to the fixed-dim variant (#a50043), creating a 200ms ease-in-out transition. Secondary buttons employ a transparent background with a 1px outline in the outline color (#808080), shifting to surface-container-high on hover with the primary color text. Both button types use label-md typography (14px, 600 weight) and a minimum height of 48px to meet accessibility touch-target guidelines.

Containers & Surfaces Cards (card) use surface-container-lowest (#ebe0db) background with a 1px border in surface

Do's and Don'ts

**Do**

• Do use the primary magenta (#c10054) exclusively for high-intent CTAs and active states—never for decorative elements or secondary information.
• Do maintain minimum 24px line-height on all body text and ensure line lengths stay between 50–75 characters on desktop for optimal readability.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness without jarring movement.
• Do use the warm neutral surface palette (fbfbf8, f0ebe5, ffffff) as the foundation; reserve accent colors for strategic emphasis.
• Do employ the 8px spacing unit consistently: use md (24px) for standard section separation and lg (40px) for major breaks to create editorial rhythm.

**Don't**

• Don't use the primary magenta (#c10054) for body text, backgrounds, or non-interactive elements—it must remain a signal for user action.
• Don't apply border-radius greater than lg (8px) to buttons or input fields; excessive rounding undermines the brand's architectural precision.
• Don't use system fonts or generic sans-serif fallbacks; Arial is the canonical typeface and must be specified explicitly to maintain brand consistency.
• Don't create custom color combinations outside the defined palette; the warm-neutral foundation and strategic accent system are core to brand recognition.
• Don't apply shadows greater than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to standard UI elements; excessive depth contradicts the refined minimalist aesthetic.