Aimé Leon Dore

Overview

Aimé Leon Dore is a New York-rooted luxury menswear brand that champions architectural minimalism and refined restraint. The design system embodies a 'Monochromatic Precision' aesthetic—a deliberate rejection of visual noise in favor of clean typography, generous whitespace, and a singular accent color (#d43f21 rust-red) that punctuates key interactions. The brand serves discerning customers who value heritage, quality, and understated sophistication; the UI evokes a sense of curated editorial calm, where every element earns its place through function and proportion.

The voice is direct, authoritative, and spare—never ornamental. Aimé Leon Dore speaks in the language of craft and archive: product names are precise ("Merino Wool Full Zip Sweater"), pricing is transparent, and navigation is intuitive without flourish. Example sentence in brand voice: "The Corduroy Trouser—a seasonal essential, cut from 100% cotton, available in three colorways."

Colors

The color palette is rooted in a high-contrast, print-inspired philosophy. **Primary (#d43f21)** is a warm rust-red reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements; it appears sparingly to maximize impact and maintain visual hierarchy. **Secondary (#181818)** is near-black, used for body text, headers, and structural elements; it provides the dominant visual weight and legibility foundation. **Tertiary (#5897fb)** is a cool blue accent used for secondary interactions, links, and status indicators—a supporting role that prevents monotony without competing with primary. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f7f7f7 → #e5e5e5 → #c4c4c4) to create subtle depth without relying on shadows

Typography

The type system prioritizes clarity and hierarchy through weight and scale rather than color variation. **Sohne** (a geometric sans-serif from Typekit) is the sole typeface family, applied across all scales from display (60px, 700 weight) down to label-sm (10px, 400 weight). Display and headline levels use negative letter-spacing (-0.04em to -0.01em) to tighten spacing and reinforce authority; body and label levels sit at 0em to 0.15em for legibility and visual breathing room. The 10px label-sm tier, used for product counts and metadata, employs 0.15em letter-spacing and uppercase transformation to create visual distinction without size increase. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) on small labels (label-sm) when layered over product imagery to ensure readability. Line-height

Layout

The layout operates on a 12-column grid with a fixed max-width of 1280px, centered on the viewport. Product grids adapt from 4 columns on desktop (1025px+) to 2 columns on tablet (768px–1024px) to 1 column on mobile (<768px), maintaining consistent gutter spacing of 24px between items. Container padding is 24px on desktop, reducing to 20px on tablet and 12px on mobile to preserve screen real estate. Section separation uses lg spacing (40px) vertically; within sections, md spacing (24px) separates subsections. The header is fixed at the top with a white background (#ffffff) and 0px border-radius, establishing a clean horizontal anchor. Product cards occupy full column width with 0px border-radius and 12px internal padding; images are full-width with no gaps. The search bar and filter contro

Elevation & Depth

Depth is conveyed through subtle shadows and surface-container layering rather than dramatic z-index stacking. **Level 1 (Base):** The page background is pure white (#ffffff) with no shadow. **Level 2 (Cards & Containers):** Product cards and input fields use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 3px with 8px blur. **Level 3 (Modals & Overlays):** Modals and dropdown panels use box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), a larger spread (32px blur) that signals maximum prominence. Hover states transition cards from Level 2 to Level 3 over 200ms, signaling interacti

Shapes

The shape philosophy is **Architectural Sharpness**—a commitment to 90-degree angles and minimal rounding that reflects the brand's precision and New York heritage. **Buttons and inputs** use 0.5rem (8px) border-radius, a subtle softening that prevents harshness without compromising geometric clarity. **Cards and containers** also use 0.5rem, maintaining visual consistency. **Badges and pills** use full (9999px) border-radius for visual distinction in secondary contexts. **Product images** have 0px border-radius (sharp corners), emphasizing the editorial, archive-like presentation. This restra

Components

Action Elements Buttons are the primary interaction mechanism and must maintain strict visual hierarchy. **button-primary** uses #d43f21 background with white text, 12px horizontal padding, 48px height, and 0.5rem border-radius; the label-md typography (14px, 600 weight) ensures legibility at all sizes. On hover, the background darkens to #c23a1c over 200ms, signaling state change without animation. **button-secondary** inverts the logic: transparent background with #181818 text and a 1px #181818 border; on hover, the background fills with #333333 (secondary-container) and text becomes #e5e5e5 (on-secondary-container), creating a toggle effect. Both button variants must never use text-decoration: underline; underlines are reserved for links within body copy.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use #d43f21 (primary) exclusively on CTAs, active states, and brand-critical moments—never on backgrounds or secondary UI.
• Do maintain 24px gutter spacing between product cards on desktop; reduce to 12px on mobile to preserve screen real estate without cramping.
• Do apply 0.5rem border-radius to buttons and inputs; use 0px on product images to preserve the editorial, archive-like aesthetic.
• Do transition all interactive states (hover, focus, active) over 200ms ease-in-out; avoid instant color changes that feel jarring.
• Do use Sohne exclusively across all typography scales; never mix typefaces, even for decorative purposes.
• Do layer small labels (label-sm) with text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) when positioned over product imagery for guaranteed readability.

**Don't**

• Don't use rounded corners (border-radius > 0) on product images; the sharp edge is essential to the editorial aesthetic.
• Don't apply color to text beyond #181818 (on-surface) and #666666 (on-surface-variant); use primary (#d43f21) only on interactive elements, never on static copy.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur values greater than 32px; the aesthetic is print-like, not cinematic.
• Don't introduce new accent colors beyond primary (#d43f21), secondary (#181818), and tertiary (#5897fb); color discipline is core to the brand.
• Don't animate buttons or cards with scale, rotation, or opacity changes; transitions should be limited to color and shadow shifts over 200ms.
• Don't use uppercase text-transform on body copy; reserve it for label-sm metadata and navigation only.