---
version: alpha
name: Dagne Dover
description: Nimbus Sans Condensed Black at full uppercase shout defines every headline and CTA — an achromatic charcoal-on-near-white canvas with a warm blush accent, pill-radius buttons, and functional neoprene-bag photography doing all the brand storytelling.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f6f6f6"           # near-white drawer, nav, and section bands
  surface-warm: "#f9f5f2"      # warm blush tint — gradient start in promo banners

  # Ink / text
  ink: "#333333"               # primary text, nav links, headings
  ink-secondary: "#666666"     # supporting copy, secondary nav, metadata
  ink-muted: "#999999"         # placeholder text, disabled states /* estimated */
  on-dark: "#ffffff"           # text on charcoal CTA and dark surfaces

  # Brand accent — warm blush tan; wishlist buttons, warm surface accents
  accent: "#d6c7b8"            # blush / warm tan; the single chromatic brand moment
  accent-dark: "#b6a99c"       # hover deepening of the blush accent /* estimated from dembrandt hover */
  on-accent: "#333333"         # dark ink on the light blush accent surface

  # CTA / primary action
  primary: "#333333"           # near-charcoal CTA fill
  primary-hover: "#000000"     # hover deepens to pure black /* estimated */
  on-primary: "#ffffff"        # text on the dark CTA

  # Borders
  border: "#eeeeee"            # hairline input borders and card edges
  border-strong: "#333333"     # outlined-button and active-input border
  border-mid: "#717070"        # mid-tone outlined button variant

  # Semantic / status
  error: "#e83737"             # form validation — was rgb(232,55,55)
  error-text: "#be2119"        # --atlas-text-negative: error prose
  success: "#366d12"           # --atlas-text-positive: success text
  focus-ring: "#41a1e6"        # was rgba(65,161,230,0.2) — Google format requires hex /* estimated opaque */

  # Shadow tints (opaque approximations for elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.25) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.20) — Google format requires hex

typography:
  display-hero:
    fontFamily: "nimbus-sans-condensed, Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 68px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "nimbus-sans-condensed, Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 1.5px
  heading-section:
    fontFamily: "nimbus-sans-condensed, Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "nimbus-sans-condensed, Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 25px
    fontWeight: 900
    lineHeight: 1.16
    letterSpacing: 0px
  body-large:
    fontFamily: "nimbus-sans, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "nimbus-sans, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px
  body-bold:
    fontFamily: "nimbus-sans, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  button-ui:
    fontFamily: "nimbus-sans, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  nav-label:
    fontFamily: "nimbus-sans-condensed, Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "nimbus-sans, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 28px
  3xl: 40px
  4xl: 48px
  5xl: 60px

rounded:
  none: 0px
  sm: 4px
  md: 10px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 64px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.border-strong}"
    padding: 17px 40px
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-outline-mid:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    borderColor: "{colors.border-mid}"
    padding: 12px 24px
  button-outline-mid-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px

  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 6px 6px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 16px 20px

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 5px 12px

  wishlist-button:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
---

# Dagne Dover Design System

## Overview

Dagne Dover's site is visually organised around a single, relentless typographic gesture: **Nimbus Sans Condensed Black at full uppercase shout**. The condensed face — weight 900, with tracking at neutral to slightly positive — dominates every headline, section marker, and CTA. It is assertive without being aggressive, and it gives the site an athletic, New York–sports-brand energy that matches the brand's neoprene-and-organisation story. The canvas is a near-white light gray (`{colors.surface}`) and white (`{colors.background}`), kept intentionally neutral so that product photography — bags in slate, camel, blush, olive — carries all the colour narrative that the chrome deliberately withholds.

The one chromatic moment in the system is the warm blush tan (`{colors.accent}`, `#d6c7b8`): it surfaces in wishlist/favourite buttons and the edge of promo gradient bands. It is the brand's personality in a single hex value — warm, considered, a little feminine without being pastel. The rest of the palette is a stripped grey scale: charcoal `{colors.ink}` for primary text and CTAs, mid-grey `{colors.ink-secondary}` for secondary copy, pure white for surfaces. There is no brand blue, no orange, no red in UI chrome.

The shape language answers the typographic muscularity with softness: buttons are full pill-radius (`{rounded.pill}`), not squared off. This combination of bold-condensed uppercase + rounded CTA is the brand's central design tension — strength in the type, approachability in the button edges. Product image cards get a gentle `{rounded.md}` (10–12px) that keeps them friendly without going circular. Elevation is minimal — a handful of shadows on modals and drawers, but the resting page is flat.

**Key Characteristics:**
- **Nimbus Sans Condensed Black (weight 900)** for all display, section, and CTA text — uppercase, vertically compressed, the dominant visual statement
- Near-achromatic palette: white `{colors.background}`, near-white `{colors.surface}`, charcoal `{colors.ink}` — product photography supplies the only real colour
- Warm blush tan (`{colors.accent}`) is the sole chromatic brand token — reserved for wishlist buttons and warm promo surfaces
- **Pill-radius buttons** (`{rounded.pill}` 9999px) — the shape language is soft and rounded despite the bold type
- `nimbus-sans` (weight 400/700) handles all body, caption, and UI label text; tracking raised to 1px on bold labels for legibility
- Uppercase convention throughout — nav labels, section markers, CTA text, and badges are all uppercase Nimbus Sans or Nimbus Sans Condensed
- Product image cards use `{rounded.md}` (10–12px) radius — approachable without being circular
- Flat elevation philosophy: the page is borderless and shadow-free at rest; depth appears only on modals and sliding drawers
- 8px-based spacing scale with generous section rhythm at `{spacing.5xl}` (60px)
- Single promo gradient — warm blush-to-dusty-rose (`{colors.surface-warm}` to a deeper blush) — used for email-capture and promo modal backgrounds

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas for product sections and standard page layout.
- **Near-White Gray** (`{colors.surface}`): The Dagne Dover default section and drawer background — a whisper off pure white that grounds the layout without going cream.
- **Warm Blush Tint** (`{colors.surface-warm}`): The gradient start for the promo email-capture modal; warm without being pink.

### Ink / Text
- **Charcoal** (`{colors.ink}`): The primary voice — headings, body copy, and the filled CTA. A deep charcoal `#333333`, not pure black, which keeps the tone warm.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting copy, secondary links, product metadata.
- **Light Gray** (`{colors.ink-muted}`): Placeholder text, disabled labels.

### Brand Accent
- **Warm Blush** (`{colors.accent}`): The single chromatic moment in UI chrome — `#d6c7b8`, a sandy tan applied to wishlist/favourite buttons and warm promo surfaces. Hover deepens to `{colors.accent-dark}`.

### CTA / Primary Action
- **Charcoal CTA** (`{colors.primary}`): Near-black fill, same value as `{colors.ink}` — deliberate; the button and the primary text are one voice. Hover deepens to pure black (`{colors.primary-hover}`).

### Borders
- **Hairline** (`{colors.border}`): Light input borders and card edges (`#eeeeee`).
- **Strong Border** (`{colors.border-strong}`): Outlined buttons and active input borders — charcoal.
- **Mid Border** (`{colors.border-mid}`): A medium gray outlined-button variant for secondary actions.

### Semantic / Status
- **Error** (`{colors.error}`): Form validation highlight.
- **Error Text** (`{colors.error-text}`): `--atlas-text-negative` prose-level error color.
- **Success** (`{colors.success}`): `--atlas-text-positive` confirmation text.

### Shadow Tints
- `{colors.shadow-soft}` / `{colors.shadow-ambient}`: Opaque stand-ins for modal drop-shadows (originals were `rgba(0,0,0,0.25)` and `rgba(0,0,0,0.20)`).

## Typography

### Font Family
- **Display / Headlines**: `nimbus-sans-condensed`, with fallbacks `Arial Narrow, Arial, Helvetica Neue, Helvetica, sans-serif`. A very wide-weight condensed grotesque used exclusively at weight 900. All uppercase. The unmistakable brand voice — compressed, high-impact, sporty-serious.
- **Body / UI**: `nimbus-sans`, with fallbacks `Arial, Helvetica Neue, Helvetica, sans-serif`. The workhorse for body copy, labels, and UI text. Used at 400 for reading and 700 for labels, captions, and CTA text. Uppercase with 1px tracking on all label contexts.
- **Weight strategy**: Two extremes — Nimbus Condensed 900 for display; Nimbus Sans 400/700 for UI and body. No intermediate weights (500 or 600) used in UI chrome.
- **Transform convention**: Everything label-like is uppercase — nav, CTA, badge, section eyebrow. Body copy stays sentence-case.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 68px Condensed 900 — hero headline, the brand shout |
| `display` | 60px Condensed 900 / 1.5px — full-bleed campaign headlines |
| `heading-section` | 40px Condensed 900 — "Best Sellers", major section openers |
| `heading-sub` | 25px Condensed 900 — feature sub-heads, product category headers |
| `body-large` | 20px Nimbus Sans 400 / 1.4 lh — feature body copy |
| `body` | 16px Nimbus Sans 400 / 1.5 lh / 0.2px — standard reading copy |
| `body-bold` | 16px Nimbus Sans 700 / 1px tracking — emphasis text, link labels |
| `button-ui` | 14px Nimbus Sans 700 / uppercase / 1px tracking — all CTAs |
| `nav-label` | 14px Condensed 900 / uppercase / 0.5px tracking — nav links |
| `caption` | 12px Nimbus Sans 700 / uppercase / 1px tracking — badges, helper text |

### Principles
- **Condensed Black is the brand**: Nimbus Sans Condensed at 900 is not just a headline font; it IS the Dagne Dover voice. Using it below 25px or in body copy blurs the hierarchy.
- **Uppercase convention is universal for labels**: every nav link, button, badge, and section marker is uppercase — sentence case on labels breaks the system personality.
- **Tracking on bold UI**: 1px letter-spacing on Nimbus Sans Bold (700) labels improves legibility at small sizes and reinforces the premium, measured tone.
- **No intermediate weights**: the system jumps directly from 400 to 700 (Sans) and to 900 (Condensed) — no 500, no 600.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base rhythm is 8px-derived. Common values cluster at 8, 12, 16, 20px for component internals; major section gaps run at `{spacing.5xl}` (60px). The scale is practical, not extravagant — sections breathe without the extra-large gaps of luxury editorial brands.

### Grid & Container
- Max content width: ~1280px, centered; product photography can break to full-bleed edges
- Product grid: typically 3–4 columns on desktop, collapsing to 2 then 1 on mobile
- Hero sections: full-bleed photography with condensed headline overlaid or adjacent
- Sticky nav bar at top; below it, large-format lifestyle photography alternates with tight product grids

### Whitespace Philosophy
- **Photography-forward, not editorial**: whitespace is enough to let product photography breathe, but the system doesn't indulge in luxury-editorial air gaps
- **Compact efficiency**: 8–12px internals on components, 20–28px between groups — the spacing personality is organised and functional, matching the bag brand's promise
- **Grid discipline**: product tiles are evenly spaced with consistent gutters; the grid never collapses asymmetrically

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | The default — the entire resting page |
| Hairline (Level 1) | `1px solid {colors.border}` | Input fields, card edge separators |
| Drawer (Level 2) | `rgba(0,0,0,0.20) 0px 0px 18px 0px` (`{colors.shadow-ambient}`) | Navigation drawers, side panels |
| Modal (Level 3) | `rgba(0,0,0,0.25) 0px 22px 36px -24px` (`{colors.shadow-soft}`) | Email-capture modal, promo overlays |
| Focus Ring | `2px auto {colors.focus-ring}` | Keyboard focus on inputs and interactive elements |

**Shadow Philosophy**: Dagne Dover is essentially flat. The resting page has no card shadows, no hover lifts, no layering cues beyond hairline borders. Depth appears only when transient UI (drawers, modals) needs to float above the page. The modal shadow is a long, cinematic drop — soft and directional — keeping the popup distinct from the background photography without feeling heavy.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used — some inner structural elements |
| `sm` | 4px | Input fields, small utility elements |
| `md` | 10px | Product image cards, content containers |
| `lg` | 12px | General cards, section containers |
| `pill` | 9999px | **All buttons** — the defining shape language |

Dagne Dover's radius strategy is effectively binary: structure uses `{rounded.md}` / `{rounded.lg}` soft cards, and every button is a full pill (`{rounded.pill}`). This combination — bold condensed uppercase in a rounded pill container — is the brand's central tension and its most recognisable UI signature. No button in the system is squared-off; the pill is non-negotiable.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Charcoal fill (`{colors.primary}`), white text, **full pill radius**, `14px 64px` generous padding, Nimbus Sans Bold 700 uppercase 1px tracking. The shop/submit CTA. Hover deepens to pure black (`{colors.primary-hover}`).
- **`button-outline`** — White fill, charcoal text, `1px {colors.border-strong}` outline, **full pill radius**, `17px 40px` padding. Secondary action (Sign Up, modal opt-in). Hover inverts to charcoal fill.
- **`button-outline-mid`** — White fill, charcoal text, mid-gray `{colors.border-mid}` outline, **full pill radius**. Tertiary or less prominent secondary actions.

### Cards
- **`card`** — White fill, `{rounded.lg}` (12px), light border or none, no resting shadow. General-purpose content container.
- **`card-product`** — Near-white surface, `{rounded.md}` (10px) radius, no shadow. Product tile with image above, type below.

### Inputs
- **`input`** — White fill, hairline `{colors.border}` at rest, `{rounded.sm}` (4px), `12px 16px` padding. On focus: border strengthens to `{colors.border-strong}` (charcoal). The email capture uses a transparent-background variant with the same pill-adjacent feel.

### Badges
- **`badge`** — Charcoal fill, white uppercase text, `{rounded.sm}` (5px) radius, tight `6px` padding. Product tags: "BEST SELLER", "NEW".

### Navigation
- **`nav-bar`** — White background, Dagne Dover wordmark in Nimbus Sans Condensed Bold, `{typography.nav-label}` uppercase links in charcoal. Stays anchored at top; a thin announcement bar with promotional copy scrolls above it.

### Wishlist / Accent Button
- **`wishlist-button`** — Warm blush fill (`{colors.accent}`), charcoal text, pill radius. The only branded-color button in the system; used for wishlist/favourite interactions.

## Do's and Don'ts

### Do
- Use `nimbus-sans-condensed` weight 900 in uppercase for every headline, section opener, and CTA text — it is the brand signature, not just a stylistic choice
- Keep all buttons as full pill-radius (`{rounded.pill}`) — rounded CTAs are non-negotiable to this system
- Hold the canvas light: white `{colors.background}` or near-white `{colors.surface}` — dark backgrounds are off-brand outside of dark product photography insets
- Set all labels, nav links, badges, and button copy in uppercase — sentence case on UI elements breaks the voice
- Reserve the warm blush `{colors.accent}` exclusively for the wishlist button and warm promo surfaces — its rarity is its signal
- Apply 1px letter-spacing on all Nimbus Sans Bold (700) UI labels (`{typography.button-ui}`, `{typography.caption}`) for legibility at small sizes
- Use `{rounded.md}` (10–12px) for product image cards — they should feel friendly, not sharp-cornered
- Let product photography — bags in slate, camel, olive, blush — supply the entire colour narrative; chrome stays achromatic

### Don't
- Don't use Nimbus Sans Condensed at weights below 900 or in sentence case — the condensed face only works at full Black and uppercase
- Don't add chromatic brand colours to buttons, borders, or backgrounds beyond the warm blush accent — the system is deliberately greyscale
- Don't square off buttons — a squared CTA contradicts the pill-radius language that defines the brand's approachability
- Don't introduce resting card shadows or hover-lift effects — the page is flat; elevation belongs only to modals and drawers
- Don't use Nimbus Sans Condensed for body copy or captions — the condensed face belongs to display and CTA contexts only
- Don't set body text in uppercase — the uppercase convention is reserved for labels, headings, and UI elements
- Don't exceed a 1280px max-width container — product photography can bleed to the edge, but type containers should respect the grid
- Don't add a second chromatic accent; the warm blush is sufficient and intentional — additional colours fragment the palette discipline

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single column; hero condensed headline scales to ~40px; nav collapses to burger |
| Mobile | 390–767px | Single-column product grid; full-bleed photography; pill buttons stay full-width |
| Tablet | 768–1023px | Two-column product grid; nav starts expanding; hero headline ~52px |
| Desktop | 1024–1279px | Full horizontal nav; 3–4 column product grid; section layout unlocks |
| Large Desktop | ≥1280px | Max ~1280px container centered; photography can bleed edge-to-edge |

### Touch Targets
- Pill buttons with `14px 64px` or `17px 40px` padding provide generous, comfortable tap areas
- Nav links in condensed 14px are sized with adequate container padding for mobile tap height
- Product cards are fully tappable — not just the CTA

### Collapsing Strategy
- **Navigation**: full horizontal bar with condensed nav labels → hamburger drawer on mobile
- **Product grid**: 4-col → 3-col → 2-col → 1-col as viewport narrows
- **Hero type**: Nimbus Sans Condensed 900 scales from 68px at desktop toward ~36–40px on mobile, preserving uppercase letterform character
- **Pill buttons**: remain pill-radius at all breakpoints; on mobile often expand to near-full-width

### Image Behavior
- Product photography is full-bleed on hero sections at all viewports
- Product tile images use consistent aspect ratios (1:1 or 3:4); `{rounded.md}` (10–12px) radius preserved across breakpoints
- Lifestyle hero photography uses `object-fit: cover`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Section surface: Near-white (`{colors.surface}`)
- Primary text: Charcoal (`{colors.ink}`)
- Secondary text: Mid-gray (`{colors.ink-secondary}`)
- CTA fill: Charcoal (`{colors.primary}`)
- Brand accent: Warm blush (`{colors.accent}`) — wishlist and promo only
- Border: Hairline (`{colors.border}`)

### Example Component Prompts

- "Create a hero section: full-bleed lifestyle photography behind a condensed uppercase headline at 68px (`{typography.display-hero}`) in `{colors.ink}` on `{colors.background}`, with a single pill-radius CTA below — `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.pill}`, `14px 64px` padding, `{typography.button-ui}` uppercase 1px tracking"
- "Build a primary CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}` (14px Nimbus Sans 700, uppercase, 1px letter-spacing), `{rounded.pill}` radius, `14px 64px` padding. Hover deepens fill to `{colors.primary-hover}` (pure black)."
- "Build a product card: `{colors.surface}` near-white background, `{rounded.md}` (10px) image tile, no shadow. Below image: 16px Nimbus Sans 400 product name in `{colors.ink}`, 14px price in `{colors.ink-secondary}`. Include a `{colors.accent}` (blush) pill wishlist button at top-right of image."
- "Design an email input with submit CTA: transparent-background input with `{rounded.sm}` (4px), hairline `{colors.border}` at rest — sharpens to `{colors.border-strong}` on focus. Adjacent pill CTA: `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.pill}`, `{typography.button-ui}` uppercase."
- "Create a navigation bar: `{colors.background}` fill, Dagne Dover wordmark in Nimbus Sans Condensed 900, `{typography.nav-label}` uppercase condensed links in `{colors.ink}` at 14px / 0.5px tracking. No underlines. Announcement bar above in `{colors.surface}` with `{typography.caption}` uppercase 12px promo copy."

### Iteration Guide

1. Start on white (`{colors.background}`) or near-white (`{colors.surface}`). If you reached for a saturated or dark background outside of photography insets, stop — the system is light-first.
2. **All headlines and section markers in Nimbus Sans Condensed 900, uppercase.** If a heading is in a non-condensed face, swap it. Size range: 25–68px for display/section use.
3. **All buttons are pill-radius** (`{rounded.pill}`). If any button has a squared or low-radius corner, fix it immediately — this is the most visible brand signal.
4. The only chromatic accent is warm blush `{colors.accent}`. All other UI chrome stays in the charcoal–gray–white palette. Product photography carries the colour.
5. UI labels, nav, CTAs, and badges are always uppercase. Body copy is sentence-case.
6. Apply 1px letter-spacing to all Nimbus Sans Bold (700) labels for legibility.
7. The page is flat at rest — no card shadows, no hover lifts. Elevation is modal-only.
8. Product image tiles get `{rounded.md}` (10–12px) radius — keep them friendly without going circular.

---

## 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 Dagne Dover. Brand names and trademarks belong to their respective owners.