---
version: alpha
name: "Aimé Leon Dore"
description: "Photography-first New York streetwear brand — Financier Display serif headlines on an off-black canvas, Sohne grotesk for navigation chrome, and a monochrome restraint that trusts campaign imagery to carry all emotion"

colors:
  # Surface / canvas
  background: "#ffffff"       # clean page white — the camera-ready surface
  surface: "#f5f5f5"          # light secondary panels, filter drawers
  surface-dark: "#181818"     # footer, inverted hero overlays, nav on dark

  # Ink / text
  ink: "#181818"              # near-black — primary headlines and body
  ink-secondary: "#c4c4c4"    # was rgba(196,196,196,0.7) — Google format requires hex; muted captions, disabled labels
  ink-muted: "#a8a8a8"        # placeholder text, secondary metadata
  on-dark: "#ffffff"          # text on dark surfaces, inverted nav

  # No chromatic brand accent — ALD primary is high-contrast black
  primary: "#181818"          # black primary CTA, button fill
  on-primary: "#ffffff"       # white text on black buttons

  # Borders
  border: "#e5e5e5"           # subtle 1px rule between sections, product cards
  border-strong: "#181818"    # bottom hairline on nav, search underline, input edges

  # Focus & interaction
  focus-ring: "#181818"       # black outline on interactive elements

  # Shadow tint
  shadow-soft: "#d9d9d9"      # elevation shadow tint — opaque approximation

typography:
  display-hero:
    fontFamily: "Financier Display, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "Financier Display, Georgia, 'Times New Roman', serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Sohne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0.6px
  heading-sub:
    fontFamily: "DIN W01 Regular, 'Arial Narrow', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 1.6px
  body:
    fontFamily: "Sohne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0.6px
  nav-link:
    fontFamily: "DIN W01 Regular, 'Arial Narrow', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 1.1px
  button-ui:
    fontFamily: "Sohne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0.6px
  caption:
    fontFamily: "Sohne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0.6px
  label-upper:
    fontFamily: "DIN W01 Regular, 'Arial Narrow', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 1.1px
  micro:
    fontFamily: "Sohne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.41
    letterSpacing: 0.5px

spacing:
  xs: 5px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 50px
  4xl: 80px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 0px
  button-ghost-hover:
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.none}"
    padding: 5px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 15px 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 15px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 60px 0px 0px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 15px 15px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px
  nav-item-hover:
    textColor: "{colors.ink-secondary}"
    padding: 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Aimé Leon Dore Design System

## Overview

Aimé Leon Dore's digital presence is a stripped frame for photography. The page opens on white (`{colors.background}`) — not cream, not warm off-white — and almost immediately recedes: the navigation is small, uppercase, tracked wide, set in DIN (`{typography.nav-link}`), running horizontally in a single quiet bar. Beneath it, the campaign images expand edge-to-edge. A bathroom scene. A concrete stoop. Figures dressed in restrained sportswear, rendered with a film photographer's eye for natural light and unglamorous detail. The design's first principle is that the image is the brand and the interface should not compete with it.

The typographic system works through deliberate opposition. Financier Display Medium (`{typography.display-hero}`) handles the few moments where an editorial headline is actually needed — it is a slightly condensed transitional serif with a magazine-editorial quality, arriving at 24px with zero tracking and a tight line-height of 1.0. It reads as a caption for a fashion editorial rather than a digital CTA. The remainder of the text vocabulary belongs to Sohne (`{typography.body}`, `{typography.button-ui}`), a contemporary grotesk with gentle optical corrections that reads comfortably at 17px body and 12px button size. DIN W01 Regular (`{typography.nav-link}`, `{typography.heading-sub}`) steps in for all all-caps metadata — navigation items, filter labels, product categories — at 11px with 1.1–1.6px letter-spacing, the traditional labeling register of a fashion product catalog. The three-family system creates an exact hierarchy: serif for editorial authority, grotesk for readability, geometric sans for tagging and classification.

Color is essentially absent. The palette is `{colors.background}` white, `{colors.ink}` near-black (`#181818`), and `{colors.ink-secondary}` muted silver-grey — the exact register of a printed lookbook or a luxury retail tag. There is no brand accent, no chromatic hover, no colored CTA. The purchase button is black text on white or white text on black. This chromatic austerity is a form of confidence: ALD does not need a signature color because the photography already signals the brand completely.

**Key Characteristics:**
- Photography-first layout — hero images span the full viewport width at every breakpoint, with type positioned as caption rather than hero
- Three-family typographic system: Financier Display (`{typography.display-hero}`) for editorial heads, Sohne (`{typography.body}`) for reading text, DIN W01 Regular (`{typography.nav-link}`) for all-caps classification labels
- Zero border-radius on all product, navigation, and interactive elements — square corners mirror the crisp edges of a printed lookbook
- `{colors.ink}` near-black (#181818) rather than pure black — a warmer, slightly lifted dark that reads as printed ink rather than screen black
- Uppercase DIN labels at 11px / 1.1px spacing for every metadata moment — category tags, navigation items, filter labels, size selectors
- Sohne at weight 400 throughout — no bold in the brand UI; authority is expressed through hierarchy and white space, never font weight
- 0.4s ease transition on all interactive elements, 0.5s on hero background changes — a deliberate pace that feels considered rather than snappy
- Flat elevation philosophy — no box-shadows on product cards or content tiles; depth is suggested through spacing and the photographic composition itself
- Bottom-only border treatment: `1px solid {colors.border-strong}` as the primary structural divider on nav, search inputs, form fields, and list items
- Micro-spaced grid: 15px base unit, with 5px and 10px sub-units for tight product label and pricing layouts

## Colors

### Canvas
- **Page White** (`{colors.background}`): The primary surface — pure digital white, the frame around the photography. Never warm, never tinted.
- **Light Panel** (`{colors.surface}`): Subtle secondary background for filter drawers, side panels, and secondary card contexts. A barely-perceptible step above white.
- **Dark Canvas** (`{colors.surface-dark}`): Footer ground, inverted navigation overlays, and dark-mode hero blocks. `#181818` rather than `#000000` — the same near-black as the ink, making dark surfaces feel continuous with the text.

### Ink
- **Near-Black** (`{colors.ink}`): The primary text and structural color. Everything from navigation labels to product titles and body copy. `#181818` — printed-ink quality.
- **Muted Silver** (`{colors.ink-secondary}`): Secondary captions, disabled states, placeholder text, and muted link labels. Approximated from `rgba(196, 196, 196, 0.7)` — the full-opacity equivalent is `{colors.ink-secondary}`.
- **On Dark** (`{colors.on-dark}`): White text for all inverted contexts — dark nav overlays, footer, and dark hero sections.

### Interactive
- **Primary / CTA** (`{colors.primary}`): The purchase button, primary interactive fills. ALD's "accent" is simply black — there is no chromatic brand color.
- **On Primary** (`{colors.on-primary}`): White label on the black button.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline, matching the button color for strict contrast.

### Borders
- **Hairline Rule** (`{colors.border}`): The standard light border for product card separators, section dividers, and input outlines in their default state. `#e5e5e5` — nearly invisible, structural.
- **Ink Rule** (`{colors.border-strong}`): Bottom-border hairlines on navigation, search inputs, and form rows. `1px solid #181818` — the same weight as the text.

## Typography

### Font Family
- **Editorial / Display**: `Financier Display`, with fallbacks: `Georgia`, `'Times New Roman'`, `serif`
- **Body / UI**: `Sohne`, with fallbacks: `'Helvetica Neue'`, `Arial`, `sans-serif`
- **Labels / Metadata**: `DIN W01 Regular`, with fallbacks: `'Arial Narrow'`, `Arial`, `sans-serif`
- No variable fonts detected. Fonts are self-hosted (.woff2), not Google Fonts.
- **OpenType**: No explicit feature-settings detected; Sohne renders with standard optical corrections built into the face.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Editorial headlines, campaign section titles — Financier Display 48px at 1.0 line-height |
| `display` | Section pull quotes, campaign captions, editorial feature heads — Financier Display 24px |
| `heading-section` | Product category headings, section titles in prose — Sohne 17px |
| `heading-sub` | Filter category labels, collection sub-heads — DIN 16px / 1.6px tracking |
| `body` | Product descriptions, editorial body text, navigation drop-down content — Sohne 17px |
| `nav-link` | Global navigation items, footer links — DIN 11px uppercase / 1.1px tracking |
| `button-ui` | Add to cart, checkout CTAs, form submit labels — Sohne 12px |
| `caption` | Product pricing, image credit lines, meta labels — Sohne 12px |
| `label-upper` | Size selectors, filter tags, product category stamps — DIN 11px uppercase |
| `micro` | Legal copy, cookie notices, smallest UI metadata — Sohne 10px |

### Principles
- **Financier Display is editorial-only**: Its serif authority is reserved for campaign-adjacent moments — display heads and editorial feature captions. It never appears in navigation or product UI.
- **Sohne at weight 400 throughout**: The entire grotesk vocabulary runs at regular weight. Bold never appears in ALD's brand UI — hierarchy comes from size and spacing, not weight change.
- **DIN for classification**: All-caps DIN at 11px / 1.1px tracking is the universal metadata language — category slugs, nav items, size chips, filter labels. Its condensed proportions pack information without crowding.
- **Positive tracking on small DIN**: At 11–16px, DIN runs with 1.1–1.6px letter-spacing — the open tracking of a printed luxury catalog tag. At body sizes, Sohne uses tighter 0.6px spacing for comfortable reading.
- **Line-height as editorial pacing**: Display type compresses to 1.0 for block presence; body text opens to 1.41 for reading comfort. No mid-range compromise.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px.

The spacing vocabulary is deliberately compact. At 5–15px it handles the tight padding of product labels, pricing rows, and navigation items — the micro-precision of a catalog layout. The generous end (40–80px) opens for section breathing between campaign image blocks. The 15px workhorse unit appears across navigation padding, product card gutters, and form field insets.

### Grid & Container
- Max content width: approximately 1400px, fluid within that
- Navigation: full-width single bar with logo centered or left, DIN nav items spaced evenly
- Product grid: typically 2-column on desktop narrowing to single column on mobile; images fill their cells without padding
- Hero campaign: full-bleed, full viewport width, no container constraint
- Breakpoints span from 410px through 1400px in fine increments — reflecting the Shopify platform's responsive logic

### Whitespace Philosophy
- **Photography breathes**: Campaign images get the full container width with no surrounding margin — the frame is the product.
- **Compact product chrome**: Product names, prices, and sizes are packed tight at the 10–15px scale, echoing the economics of a printed catalog page.
- **Section gaps earned**: Between campaign sections, 40–80px of vertical space creates the page-turn rhythm of a physical lookbook.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, campaign images, standard layout |
| Subtle (Level 1) | `{colors.shadow-soft}` tint, very low opacity | Sticky navigation on scroll — structural only |
| Modal (Level 2) | Soft shadow | Cart drawer, overlay panels |
| Focus Ring | `2px solid {colors.focus-ring}` (estimated) | Keyboard focus on all interactive elements |

**Shadow Philosophy**: The site is completely flat for browsing content. ALD's editorial language has no place for lifted card surfaces or floating panels — depth comes from the photography's own composition, not from CSS elevation. Where the cart drawer or overlay panel requires layering, a minimal soft shadow establishes the hierarchy without dramatizing it. The focus ring is the only prescribed elevation moment in the component system.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All product cards, buttons, inputs, navigation — the entire brand system |
| `pill` | 9999px | Filter tags, badge chips, size selectors in certain contexts |

The system is binary: sharp for everything with brand identity, pill only for the occasional filter chip or tag element. The 34px radius detected in the raw data belongs to a single UI element (a category tag pill) — it is not a design language used at component scale. ALD's corners are square: it is the sharpness of a pressed collar, not the rounded approachability of a consumer app.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Solid `{colors.primary}` fill with `{colors.on-primary}` white label. `{rounded.none}` corners, 10px 20px padding, Sohne 12px. The standard add-to-cart and submit action. Square and frank.
- **`button-secondary`** — White background with `{colors.border-strong}` 1px border. Used for secondary actions — size selection, filter submission. Same geometry as primary, different surface.
- **`button-ghost`** — No background, no border, `{colors.ink}` text. Used for navigation-adjacent links that function as buttons — "View All," inline editorial CTAs. Hover shifts to `{colors.ink-secondary}`.

### Cards
Product cards sit on `{colors.background}` white with no box-shadow, no border-radius, and no card background fill — the image and product details render directly on the page ground. The bottom border rule (`1px solid {colors.border}`) appears in list-view contexts to separate rows. Hover on a product card produces no background change; the interaction is communicated through image zoom (CSS scale or transform) on the photograph itself.

### Inputs
Email and search inputs use no border initially — inputs appear as bare `{colors.background}` fields with a bottom-only `1px solid {colors.border-strong}` edge. This is the fashion newsletter convention: a line, not a box. Padding is asymmetric (`0px 60px 0px 0px`) to accommodate a submit arrow or CTA inline-right. Focus state removes the outline and sharpens the bottom border to `{colors.focus-ring}`.

### Navigation
Single horizontal bar. AIMÉ LEON DORE logotype (text, small) centered or left-positioned; DIN nav items (`{typography.nav-link}`) at 11px uppercase spread horizontally. Bottom border `1px solid {colors.border-strong}` anchors the bar. No background shift on scroll — the nav remains white unless overlaying a dark campaign hero. Cart and search icons as SVG at the far right. No mega-menu: hover reveals a sub-navigation dropdown in the same DIN typographic register.

### Badges / Tags
Category tags and filter chips: DIN 11px uppercase, `{rounded.pill}`, `{colors.surface}` background with `{colors.ink}` label. Size selectors are square — `{rounded.none}` — to match the overall geometry.

## Do's and Don'ts

### Do
- Use `{typography.display-hero}` (Financier Display) only for editorial display moments — campaign headings, feature section titles. Reserve the serif for these moments so its appearance carries weight.
- Set all DIN navigation and label text in uppercase with `{typography.nav-link}` tracking (1.1px minimum) — the open-tracked uppercase is definitional to the catalog register.
- Keep button radius at `{rounded.none}` — square corners on all CTAs and inputs. The sharpness signals luxury precision, not consumer friendliness.
- Use bottom-only borders (`1px solid {colors.border-strong}`) to separate nav, forms, and list items — hairline rules are the system's structural vocabulary, not box borders.
- Let campaign photography fill the full container width with zero surrounding margin — the image is the design.
- Maintain Sohne at weight 400 for all UI text — never introduce a bold weight into navigation, product titles, or CTA labels.
- Approximate `rgba(196, 196, 196, 0.7)` as `{colors.ink-secondary}` (`#c4c4c4`) in the YAML — Google format requires opaque hex.

### Don't
- Don't introduce a chromatic brand accent — there is no ALD signature color. Any saturated color in the UI will break the monochrome discipline and pull attention from the photography.
- Don't round product card images, button corners, or input outlines — `{rounded.none}` is the brand shape language; any softening reads as a consumer app, not a fashion label.
- Don't use font weight above 400 in Sohne for navigation or UI chrome — bold grotesk in the nav register reads as e-commerce generic, not editorial.
- Don't add box-shadow to product cards or layout containers — depth is communicated through photography and spacing, never CSS elevation.
- Don't use Financier Display for body text, navigation labels, or pricing — the serif is editorial-only; misapplying it dilutes its authority.
- Don't add hover background fills to product cards — the hover interaction is a scale transform on the image, not a surface color change.
- Don't use DIN at sizes above 16px without proportionally increasing letter-spacing — the face loses its catalog quality at larger sizes with default tracking.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | ≤410px | Single-column product grid, hero image fills viewport height, nav collapses to hamburger |
| Mobile | 411–560px | Single column, compact product labels at micro scale, stacked navigation |
| Large Mobile | 561–743px | Single column with larger imagery, begin 2-column in some product sections |
| Tablet Small | 744–1023px | 2-column product grid, navigation bar expands to partial display |
| Tablet | 1024–1199px | Full 2-column, navigation shows key items with overflow hamburger |
| Desktop | 1200–1366px | Full navigation bar, 2–3 column product grid, campaign hero full bleed |
| Large Desktop | 1367–1400px | Maximum grid width, generous section margins, editorial grid at full expression |

### Touch Targets
- Navigation links: 44px effective touch area via surrounding padding
- Add to cart buttons: 10px 20px padding — may need augmentation for touch contexts; minimum 44px height recommended
- Size selectors: square chips with adequate tap area via padding
- Full-card tap targets on product tiles — the entire image and label block is the link

### Collapsing Strategy
- **Navigation**: Full DIN bar collapses to hamburger + logo at ≤1024px; hamburger opens a full-height overlay menu
- **Campaign hero**: Full-bleed at all sizes; image crops to portrait ratio on mobile via object-fit cover
- **Product grid**: 2–3 columns on desktop → 2 columns on tablet → 1 column on mobile
- **Typography**: Display serif (`{typography.display-hero}`) scales from 48px to approximately 28–32px on mobile; DIN and Sohne UI sizes remain stable across breakpoints
- **Spacing**: 40–80px section gaps compress to 25–30px on mobile; 15px base unit maintained throughout

### Image Behavior
- Campaign photographs: full viewport width, object-fit cover, no border-radius at any breakpoint — aspect ratio adjusts but the full-bleed commitment holds
- Product photography: fills grid cell completely, no border, no shadow, no radius — pure rectangular image on white
- Hover interactions: CSS scale transform on product image (~1.03–1.05x) rather than any surface or shadow change

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text / muted: `{colors.ink-secondary}`
- Border (hairline): `{colors.border}`
- Border (structural / bottom): `{colors.border-strong}`
- CTA fill: `{colors.primary}`
- CTA label: `{colors.on-primary}`
- Dark surface: `{colors.surface-dark}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build an ALD-style product card: white background (`{colors.background}`), full-bleed square product image with `{rounded.none}` corners, product name in `{typography.caption}` (Sohne 12px, `{colors.ink}`, 0.6px tracking), price on the same row right-aligned, no card border, no shadow. On image hover: CSS scale(1.04) transform, 0.4s ease."
- "Build an ALD navigation bar: single horizontal row, white background (`{colors.background}`), `1px solid {colors.border-strong}` bottom edge. Logo centered in Financier Display or as wordmark. Nav items in `{typography.nav-link}` (DIN 11px, uppercase, 1.1px tracking, `{colors.ink}`). Hover shifts nav item color to `{colors.ink-secondary}`, 0.4s ease transition. No background fill on hover."
- "Build an ALD email input: white background (`{colors.background}`), no visible border on left/right/top, `1px solid {colors.border-strong}` bottom edge only. Placeholder in `{typography.body}` (Sohne 17px, `{colors.ink-secondary}`). Submit arrow icon right-aligned within the 60px right padding zone. No border-radius."
- "Build an ALD campaign section: full-bleed photograph at 100vw × 70vh, object-fit cover. Below the image, centered `{typography.display}` (Financier Display 24px, `{colors.ink}`, line-height 1.0) for the collection name. Below that, a single `{components.button-primary}` CTA. Section top/bottom padding: 50px."
- "Build an ALD size selector grid: a row of square chips, `{rounded.none}` corners, `{colors.border}` 1px border, `{typography.label-upper}` (DIN 11px uppercase, 1.1px tracking), `{colors.ink}` text. Selected state: `{colors.primary}` fill, `{colors.on-primary}` text. Unavailable state: text `{colors.ink-secondary}`, strikethrough. Chips at 38px × 38px minimum."

### Iteration Guide

1. Start with `{colors.background}` white and set `{typography.body}` (Sohne 17px, `{colors.ink}`) as the default reading text — the foundation is a clean white page with near-black ink.
2. Use `{typography.nav-link}` (DIN 11px uppercase) for all classification labels, filters, and navigation — never a grotesk or serif in that role.
3. Reserve `{typography.display-hero}` (Financier Display) for editorial moments only — one headline per section maximum; the serif derives its authority from scarcity.
4. Apply `{rounded.none}` to every interactive element — buttons, inputs, cards, image containers. The only pill shape allowed is a filter chip badge.
5. Use `1px solid {colors.border-strong}` (bottom-only) to separate structural zones: nav from content, input label from field, list items in dense views.
6. Keep all Sohne text at weight 400 — introduce hierarchy through size and color shift (`{colors.ink}` → `{colors.ink-secondary}`), never weight.
7. Let photography be the hero — avoid adding graphic elements, color overlays, or text blocks that compete with the campaign image.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Aimé Leon Dore. Brand names and trademarks belong to their respective owners.