---
version: alpha
name: "Bode"
description: "NY heritage craft fashion — ITCBlairPro display at lowercase in warm cream, NeueHaasUnica grotesk for body and UI, cork-board hero imagery, vintage-photograph collage aesthetic, zero-radius sharp frames"

colors:
  # Surface / canvas
  background: "#faf8f4"          # warm off-white — aged paper, the cork-board's surround
  surface: "#f4f0e8"             # cream secondary surface, sidebar tray, filter drawers
  surface-warm: "#ede8dc"        # deeper warm card surface, hover state tray

  # Ink / text
  ink: "#000000"                 # pure black — primary headlines, body, navigation links
  ink-secondary: "#737373"       # mid-grey — secondary labels, pricing metadata, captions
  ink-muted: "#808080"           # muted tertiary — placeholder, disabled, legal copy
  on-dark: "#ffffff"             # white text on inverted dark surfaces

  # Brand accent — terracotta/rust from the vintage ribbon pinned to the cork board
  primary: "#c04a2a"             # /* estimated — terracotta rust, derived from the competition-ribbon accent in hero imagery */
  on-primary: "#ffffff"          # white text on terracotta CTA button
  primary-container: "#f5e0d8"   # /* estimated — light tint of primary for badge containers */

  # Interactive
  text-hover: "#000000"          # nav link hover stays black, no color shift
  focus-ring: "#000000"          # black 2px focus outline, keyboard navigation

  # Borders
  border: "#e0dbd1"              # light warm hairline — card edges, section dividers
  border-strong: "#000000"       # bottom-only ink rule on nav, inputs, structural lines

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

typography:
  display-hero:
    fontFamily: "ITCBlairPro, 'Palatino Linotype', Palatino, 'Book Antiqua', serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.4px
    fontFeature: "lowercase editorial treatment — text-transform: lowercase"
  display:
    fontFamily: "ITCBlairPro, 'Palatino Linotype', Palatino, 'Book Antiqua', serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.4px
  heading-section:
    fontFamily: "NeueHaasUnica, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  heading-sub:
    fontFamily: "NeueHaasUnica, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "NeueHaasUnica, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 3.0
    letterSpacing: 0px
  body:
    fontFamily: "NeueHaasUnica, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "ITCBlairPro, 'Palatino Linotype', Palatino, 'Book Antiqua', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.4px
  button-ui:
    fontFamily: "NeueHaasUnica, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "ITCBlairPro, 'Palatino Linotype', Palatino, 'Book Antiqua', serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.4px
  label-lower:
    fontFamily: "ITCBlairPro, 'Palatino Linotype', Palatino, 'Book Antiqua', serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.4px

spacing:
  xs: 3px
  sm: 10px
  md: 15px
  lg: 30px
  xl: 50px
  2xl: 100px
  3xl: 200px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  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.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 15px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 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: 34px 50px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 5px 0px
  nav-item-hover:
    textColor: "{colors.ink-secondary}"
    padding: 5px 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-lower}"
    rounded: "{rounded.none}"
    padding: 3px 8px
---

# Bode Design System

## Overview

Bode's digital presence is constructed as a found-object display case — a cork board covered in vintage photographs, competition ribbons, and pinned ephemera, all staged against a warm off-white surround (`{colors.background}`) that reads as aged paper rather than digital white. The brand was founded by Emily Adams Bode Aujla in New York in 2016, and the site encodes its founding philosophy directly into its interface: antique textiles and one-of-a-kind garments deserve a presentation language closer to a collector's archive or a regional fair board than to a modern e-commerce grid. The hero image is not a fashion campaign — it is a deliberate act of curation, presenting vintage photographs as artifacts with their own material histories.

The typographic system is organized around a single pairing with a twist: ITCBlairPro (`{typography.nav-link}`, `{typography.display}`) handles all editorial moments in a distinctive lowercase setting, a choice that reads against the grain of luxury convention. Where heritage brands reach for uppercase small caps and authoritative tracking, Bode sets its display and navigation type in lowercase ITCBlairPro — warm, slightly rounded, almost approachable in its seriffed informality. NeueHaasUnica (`{typography.body}`, `{typography.button-ui}`) handles the interface layer: clean, neutral grotesk at regular weight for body copy, product descriptions, and UI chrome. The contrast between an editorial serif-in-lowercase and a utility grotesk is exactly the tonal bridge Bode needs — antique material made accessible, not precious.

The palette is deliberately restrained to near-monochrome: `{colors.ink}` black, `{colors.surface}` warm cream, and `{colors.ink-secondary}` mid-grey carry the entire interface, leaving the terracotta-rust `{colors.primary}` — drawn from the vintage competition ribbon in the hero — as the sole chromatic moment. This ribbon-red CTA reads as a material artifact as much as an action trigger: it belongs to the same visual world as the pinned photographs and hand-sewn patches rather than feeling like a designed UI state. Zero border-radius on every element reinforces the impression of archival frames, flat-mounted photographs, and garment tags rather than softened digital components.

**Key Characteristics:**
- Cork-board collage hero — vintage photographs, ribbons, and ephemera pinned to a tactile texture surface, each session reflecting the seasonal archive
- ITCBlairPro displayed exclusively in lowercase — a deliberate anti-luxury gesture that signals warmth and handcraft over institutional authority
- `{colors.background}` warm off-white rather than digital white — aged paper, not screen brightness
- Two-family typographic system: ITCBlairPro (`{typography.display}`) for editorial identity, NeueHaasUnica (`{typography.body}`) for functional UI clarity
- `{colors.primary}` terracotta-rust as the sole chromatic brand moment — appearing on CTAs and select accents, derived from archival ribbon pigments
- Zero border-radius system (`{rounded.none}`) — every button, card, input, and container is strictly rectangular, mirroring archival mounting and garment-tag geometry
- Left-rail navigation sidebar that reveals category links in ITCBlairPro lowercase — the taxonomy of a collector's filing system
- Bottom-only border treatment (`{colors.border-strong}`) on inputs and structural dividers — the visual language of a lined notebook or inventory ledger
- 0.3–0.4s linear motion — deliberate, unhurried transitions that suggest care rather than speed
- No box-shadows on product cards — depth is created through the composition and material texture of the hero image, not UI convention
- Breakpoint cascade that preserves the archival full-width hero at every size before collapsing the sidebar navigation to a top bar
- Letter-spacing on ITCBlairPro set at 0.4px — barely perceptible positive tracking that opens the lowercase forms without turning them decorative

## Colors

### Canvas
- **Warm Off-White** (`{colors.background}`): The primary page surface — `#faf8f4`, aged-paper warm rather than digital white. Reads as the mat board around the cork display.
- **Cream Surface** (`{colors.surface}`): Secondary background for the sidebar navigation tray, filter drawers, and supporting content panels. A single step warmer than the background.
- **Deep Cream** (`{colors.surface-warm}`): Hover-state tray fills and the deepest panel backgrounds — the tone of untreated cotton canvas.

### Ink
- **Pure Black** (`{colors.ink}`): Primary text color — headlines, body, navigation labels, pricing. `#000000` — pure printed ink, not softened near-black.
- **Mid-Grey** (`{colors.ink-secondary}`): Secondary captions, metadata, pricing denominations, and hover-dimmed link states.
- **Muted Grey** (`{colors.ink-muted}`): Placeholder text in inputs, disabled labels, and the lightest tertiary information.
- **On Dark** (`{colors.on-dark}`): White text reserved for inverted panels and any dark-surface overlays.

### Brand Accent
- **Terracotta Rust** (`{colors.primary}`): The site's single chromatic moment — derived from the vintage competition-ribbon accent in the hero collage. Used exclusively on primary CTAs ("Shop Spring 2025") and selected accent moments. Never applied to decorative elements.
- **On Primary** (`{colors.on-primary}`): White label on the terracotta button — high contrast, historically grounded in the ribbon's original white text.
- **Primary Container** (`{colors.primary-container}`): A barely-tinted warm blush for badge containers and filter-tag backgrounds.

### Borders & Interaction
- **Warm Hairline** (`{colors.border}`): Standard 1px rule for card separators, section lines, and light structural dividers. A warm taupe rather than cool grey.
- **Ink Rule** (`{colors.border-strong}`): The primary structural edge — bottom-only borders on navigation, form inputs, and list dividers. `1px solid #000000`.
- **Focus Ring** (`{colors.focus-ring}`): Black outline for keyboard navigation — matches the ink rule for visual continuity.

## Typography

### Font Family
- **Display / Navigation**: `ITCBlairPro`, with fallbacks: `'Palatino Linotype'`, `Palatino`, `'Book Antiqua'`, `serif`. Always rendered lowercase — not via font weight variation but through a consistent `text-transform: lowercase` treatment applied at the display and navigation levels.
- **Body / UI**: `NeueHaasUnica`, with fallbacks: `'Helvetica Neue'`, `Helvetica`, `Arial`, `sans-serif`. Self-hosted; no Google Fonts detected on the interface layer.
- No variable fonts detected. No explicit OpenType feature-settings; ITCBlairPro renders its warm, humanist serif forms without additional optical manipulation.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign titles, editorial section heads — ITCBlairPro lowercase 56px |
| `display` | Feature collection names, hero text overlays — ITCBlairPro lowercase 32px |
| `heading-section` | Product category titles, content section labels — NeueHaasUnica 16px |
| `heading-sub` | Sub-category labels, filter group headers — NeueHaasUnica 14px |
| `body-large` | Pull-quote body text, editorial description paragraphs — NeueHaasUnica 16px / 3.0 line-height (generous opening) |
| `body` | Product descriptions, standard body copy — NeueHaasUnica 16px / 1.5 line-height |
| `nav-link` | Left-rail sidebar navigation — ITCBlairPro lowercase 16px |
| `button-ui` | CTA labels, form submit actions — NeueHaasUnica 12px |
| `caption` | Image credits, pricing metadata, archival notes — ITCBlairPro lowercase 12px |
| `label-lower` | Badge labels, small categorical stamps — ITCBlairPro lowercase 12px |

### Principles
- **ITCBlairPro is always lowercase**: The typeface never appears in title-case or uppercase in brand contexts. This is a constitutive design decision, not a typographic convention — it signals handcraft and informality against the luxury-fashion default of imposing caps.
- **NeueHaasUnica at weight 400 throughout**: Regular weight handles all UI text. There is no bold in the Bode interface — hierarchy is communicated through size and the serif/grotesk contrast, not weight.
- **Serif for identity, grotesk for clarity**: ITCBlairPro carries brand voice and emotional resonance; NeueHaasUnica handles the task-oriented reading work. The two families never compete at the same size.
- **Generous line-height in editorial contexts**: Pull-quote body text runs at line-height 3.0 — an unusually open setting that creates breathing room between archival fragments, mimicking the spacing of scrapbook captions.
- **Minimal tracking**: 0.4px positive tracking on ITCBlairPro at display sizes — barely perceptible, just enough to open the lowercase forms for screen reading without imposing a typographic-style effect.

## Layout

### Spacing System
The spacing scale is rooted in a 3px base with a non-standard progression: 3, 10, 15, 30, 50, 100px — not a doubling grid but an additive sequence that mirrors the irregular spacing of a pinboard display rather than a modular system. The two largest values (100px, 200px) appear in hero section breathing and full-viewport image staging.

The design creates generous white space around product photography and hero imagery — the gap between content and edge is always proportionately larger than typical e-commerce layouts, emphasizing the archival display-case feel.

### Grid & Container
- Max content width: approximately 1440px (detected breakpoint ceiling)
- Left-rail sidebar: ~115px reserved column for category navigation
- Remaining viewport: full-bleed imagery with zero margins — the cork board and product photographs extend edge-to-edge
- Product grid: likely 2- or 3-column at desktop, collapsing to single column on mobile

### Whitespace Philosophy
- Whitespace is archival breathing room, not aesthetic minimalism — it exists because the photographs need space to be contemplated, not scanned
- Section-to-section spacing uses the 50–100px tier, creating clear chapter breaks between the hero and newsletter, and between product categories
- Tight internal spacing (3–10px) within nav items and caption clusters keeps information compact without crowding

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product cards, navigation items, all standard UI |
| Subtle (Level 1) | No shadow | Secondary panels, sidebar tray |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard-accessible interactive elements |

**Shadow Philosophy**: Bode uses no box-shadows anywhere on the interface. Depth is created entirely through photography — the cork board texture, the three-dimensional quality of pinned photographs, and the material richness of the garment imagery. Applying a drop-shadow to a product card would compete with the dimensional illusion already carried by the visual content. The interface stays flat; the content creates depth.

## Shapes

The complete radius scale in the `rounded:` token block above contains a single entry:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, cards, inputs, badges, containers, navigation frames |

Bode's shape system is strictly rectangular. No element on the site uses a curved corner — not CTAs, not product thumbnails, not form fields, not notification badges. This zero-radius absolutism mirrors the geometry of garment tags, archival mounting boards, and woven patch frames. A rounded corner would signal a different brand entirely — softer, more consumer-digital. The sharp rectangle says: this is a crafted object, not a tech product.

## Components

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

### Button variants

- **`button-primary`** — Terracotta fill (`{colors.primary}`) with white label, zero radius. The sole colored interactive element on the page, it reads as a material object — a competition ribbon, a wax seal — rather than a designed UI state. Used for "Shop Spring 2025" and primary collection CTAs.
- **`button-secondary`** — White fill with a 1px black border, zero radius. Secondary purchase actions and "view collection" contexts.
- **`button-ghost`** — No background or border; appears as an underline-free inline link. Used for navigation and inline editorial actions where a button frame would over-formalize the context.

### Cards
Product cards are strictly flat rectangles (`{rounded.none}`, no shadow) — the image fills the frame edge-to-edge, with product name in ITCBlairPro lowercase and price in NeueHaasUnica below. Card hover shifts the background to `{colors.surface}` without animation overshoot.

### Inputs
Email and text inputs use a bottom-only border (`1px solid {colors.border-strong}`) on a transparent or warm-white background — the visual language of a lined ledger sheet. The placeholder text is rendered in `{colors.ink-muted}`. On focus, a 2px black outline activates the keyboard focus affordance.

### Navigation
The left-rail sidebar lists category links (New Arrivals, Ready to Wear, One-of-a-Kind, Same Cost, Suiting, Accessories, Shoes) in ITCBlairPro lowercase at 16px with no tracking modification — the taxonomy of a private archive or a vintage dealer's catalog. The BODE wordmark is centered in the top header bar. Cart and search icons anchor the right side. On mobile, the sidebar collapses into a top-bar navigation pattern.

### Badges
Tags and small categorical labels use the `{colors.primary-container}` warm blush background with `{colors.primary}` text — a terracotta-on-blush combination that echoes the competition-ribbon palette without demanding attention.

## Do's and Don'ts

### Do
- Set ITCBlairPro consistently in lowercase — this is a constitutive brand identity decision, not a case-by-case choice. Every headline, nav link, caption, and editorial label uses lowercase.
- Use `{colors.primary}` terracotta exclusively for primary CTAs and the most important single action per page — its scarcity is what gives it the ribbon-quality authority.
- Keep all border-radius at `{rounded.none}` — the rectangular language must be absolute. A single rounded corner breaks the archival-frame system.
- Apply bottom-only borders (`1px solid {colors.border-strong}`) for structural dividers — nav underlines, input bottom edges, section hairlines.
- Use `{colors.background}` warm off-white (`#faf8f4`) as the base canvas — never substitute a neutral or cool white, which would dissolve the aged-paper warmth.
- Let full-bleed photography carry depth — cork texture, pinned photographs, and material richness create all the Z-axis interest the design needs.
- Use NeueHaasUnica for all body and UI copy at weight 400 — its neutrality serves the archival display, where the type should recede and the images advance.
- Maintain 50–100px breathing room between major content sections — the generous space is as much a design element as the type or color.

### Don't
- Don't uppercase ITCBlairPro. The lowercase-only treatment is not decorative — it is the brand's typographic signature.
- Don't introduce mid-range border-radius (2–32px). The system is strictly zero — no "slightly rounded" compromises.
- Don't add chromatic hover states. Navigation links dim to `{colors.ink-secondary}` grey on hover — there is no color-shift, no underline animation, no colored highlight.
- Don't use `{colors.primary}` for decorative accents, secondary states, or visual warmth without a direct action affordance attached. The terracotta is earned by function.
- Don't add box-shadows to product cards or UI elements. Depth lives in the imagery, not the chrome.
- Don't substitute digital-white (`#ffffff`) for the warm page background — even a small shift toward cool undermines the aged-paper register.
- Don't use bold font weight in the NeueHaasUnica layer. The entire UI grotesk vocabulary is weight 400.
- Don't introduce additional typefaces. The two-family system (ITCBlairPro / NeueHaasUnica) is the complete type vocabulary.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Left-rail sidebar collapses to top hamburger or top-bar nav; full-bleed cork hero compresses to aspect-ratio cropped block |
| Mobile Large | 600–750px | Single-column product grid; BODE wordmark remains centered in header |
| Tablet | 750–1024px | Two-column product grid appears; left-rail navigation may transition to top bar |
| Desktop | 1024–1440px | Left-rail sidebar revealed; full-bleed hero at designed viewport width; three-column product grid |
| Large Desktop | >1440px | Layout caps at 1440px max-width; side margins fill with `{colors.background}` warm off-white |

### Touch Targets
- Navigation links in the sidebar use sufficient line-height (min ~44px effective target height) to support thumb navigation
- Primary CTA button minimum height equivalent to 44px, with 12px top/bottom padding and full-width mobile treatment

### Collapsing Strategy
- Left-rail sidebar is the primary casualty on mobile — it either slides under a hamburger or the top bar absorbs category navigation as horizontal scroll
- The cork-board hero image is cropped rather than scaled down: the composition is preserved at the center of the frame
- Product grid collapses from 3-column → 2-column → single-column
- Spacing scale contracts proportionally; the 50px section breaks compress to approximately 30px on mobile

### Image Behavior
- Full-bleed hero images are `object-fit: cover` within their container — the cork-board composition adapts to aspect ratio changes by showing the center content
- Product thumbnail images maintain their aspect ratio within rectangular frames (`{rounded.none}`) with no overflow clipping beyond the card boundary

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — warm off-white `#faf8f4`
- Text: `{colors.ink}` — pure black `#000000`
- Brand accent: `{colors.primary}` — terracotta rust (estimated `#c04a2a`)
- Secondary text: `{colors.ink-secondary}` — mid-grey `#737373`
- Border: `{colors.border}` — warm hairline `#e0dbd1`
- Structural border: `{colors.border-strong}` — ink rule `#000000`
- CTA: `{colors.primary}` on `{components.button-primary}`

### Example Component Prompts

- "Create a Bode-style hero section: full-bleed cork-texture background image, centered BODE wordmark in NeueHaasUnica at 14px uppercase letter-spaced, left-rail category navigation in ITCBlairPro lowercase 16px (`{typography.nav-link}`), and a terracotta CTA button (`{components.button-primary}`) labeled 'shop spring 2025' in lowercase. Use `{colors.background}` `#faf8f4` for surrounding canvas."

- "Create a Bode-style product card: no border-radius (`{rounded.none}`), no box-shadow, full-bleed product image, ITCBlairPro lowercase product name at 16px (`{typography.display}`), NeueHaasUnica price at 12px (`{typography.button-ui}`) in `{colors.ink}`, bottom-only 1px border in `{colors.border}`. Hover shifts background to `{colors.surface}`."

- "Create a Bode-style primary CTA button: background `{colors.primary}` `#c04a2a`, text `{colors.on-primary}` `#ffffff`, font `{typography.button-ui}` NeueHaasUnica 12px weight 400, padding 12px 24px, border-radius `{rounded.none}`. Hover: background shifts to `{colors.ink}` `#000000`, text stays white. No transition animation beyond 0.3s linear."

- "Create a Bode-style left-rail sidebar navigation: `{colors.surface}` `#f4f0e8` background, 115px wide, category links in ITCBlairPro lowercase (`{typography.nav-link}`) at 16px / 0.4px letter-spacing, `{colors.ink}` text with `{colors.ink-secondary}` hover, 5px top/bottom padding per nav item. No dividers between items. The sidebar has a bottom-only 1px `{colors.border-strong}` right edge."

- "Create a Bode-style newsletter sign-up form: `{colors.background}` canvas, headline 'subscribe to our newsletter' in ITCBlairPro lowercase (`{typography.display}`), email input using `{components.input}` — transparent background, bottom-only border in `{colors.border-strong}`, NeueHaasUnica 16px placeholder text in `{colors.ink-muted}`, submit button using `{components.button-primary}` full-width below the input."

- "Create a Bode-style badge/category tag: background `{colors.primary-container}`, text `{colors.primary}`, typography `{typography.label-lower}` ITCBlairPro lowercase 12px, padding 3px 8px, border-radius `{rounded.none}`. Used on 'one-of-a-kind' and 'new arrivals' category indicators."

### Iteration Guide

1. **Start with the warm canvas**: Set `{colors.background}` `#faf8f4` as the page background. If anything appears too cool or too blue-white, pull toward the `#faf8f4` value.
2. **Typography contract**: ITCBlairPro goes lowercase-only in editorial and nav contexts (`{typography.display}`, `{typography.nav-link}`). NeueHaasUnica handles everything functional (`{typography.body}`, `{typography.button-ui}`). Never mix their roles.
3. **Reserve terracotta**: `{colors.primary}` should appear on exactly one primary CTA per screen. If there are two primary actions, one is secondary — use `{components.button-secondary}` with the ink border.
4. **Enforce zero radius**: Run a final pass to confirm every border-radius is `0` or `{rounded.none}`. Any curve is a violation.
5. **No shadows anywhere**: Remove any box-shadow from product cards, modals, or UI panels. Depth comes from image content.
6. **Bottom-border language**: Structural dividers are `1px solid {colors.border-strong}` on the bottom edge only — not full-border frames, not top borders, not side rules.
7. **Photography is the brand**: If a layout feels sparse or underpowered, the answer is not more UI chrome — it is a stronger or larger photograph. Let the archival imagery fill the visual weight.

---

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