---
version: alpha
name: "Tracksmith"
description: "New England running heritage brand — Sainte Colombe editorial serif on a deep navy canvas, Akzidenz-Grotesk Extended for all performance labels, and a warm brass-and-cream palette that evokes the collegiate sash stripe"

colors:
  # Surface / canvas
  background: "#ffffff"         # clean white — product listing and editorial surface
  surface: "#efead7"            # warm cream — the heritage canvas; sash stripe, hero overlays, modal backgrounds
  surface-dark: "#0a1e32"       # deep New England navy — primary brand canvas, nav on dark, footer

  # Ink / text
  ink: "#0a1e32"                # deep navy — all primary headings and body text
  ink-secondary: "#6c7884"      # was rgb(108,120,132) — muted captions, form placeholder text
  ink-muted: "#606a72"          # was rgb(96,106,114) — tertiary labels, dismissed UI copy
  on-dark: "#ffffff"            # white text on navy or dark surfaces
  on-surface: "#0a1e32"         # ink color on cream surface

  # Brand accent
  primary: "#857151"            # brass tan — primary CTA, button fill, link default
  on-primary: "#ffffff"         # white on brass buttons
  primary-light: "#9a825c"      # lighter brass variant — sign-up button, swatch chips, hover state
  # primary-light is rgb(154,130,92) — the theme_color in manifest

  # Borders
  border: "#857151"             # brass border — button outlines, form field edges in active state
  border-subtle: "#e7e9eb"      # was rgb(231,233,235) — section dividers, card separators, input resting state
  border-ink: "#ced2d6"         # was rgb(206,210,214) — input default 1px border
  # border-ink flattened from rgb(206,210,214) — medium grey for standard input chrome

  # Interaction / states
  focus-ring: "#857151"         # brass ring on focused inputs; matches border token
  text-hover: "#0c243c"         # was rgb(12,36,60) — hover darkening on navy interactive elements

  # Shadow tint
  shadow-soft: "#1a1a1a"        # flattened from rgba(0,0,0,0.1) — elevation shadow tint; Google format requires hex

  # Semantic accent (color swatch system only)
  swatch-navy: "#252c45"        # was rgb(37,44,69) — Harrier colorway navy; used in diagonal swatch tiles
  swatch-crimson: "#be2624"     # was rgb(190,38,36) — Harrier red colorway swatch accent

typography:
  display-hero:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.22
    letterSpacing: -2px
  display:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: -2px
  heading-section:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -2px
  heading-sub:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 34px
    fontWeight: 300
    lineHeight: 1.41
    letterSpacing: -1px
  body-large:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: -1px
  body:
    fontFamily: "SainteColombe, 'Sainte Colombe Tracksmith', 'Times New Roman', Times, Baskerville, Georgia, serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.68
    letterSpacing: 0px
  nav-link:
    fontFamily: "akzidenz-grotesk-extended, 'Arial Narrow', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 1.2px
  button-ui:
    fontFamily: "akzidenz-grotesk-extended, 'Arial Narrow', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1px
  label-upper:
    fontFamily: "akzidenz-grotesk-extended, 'Arial Narrow', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 1.2px
  caption:
    fontFamily: "akzidenz-grotesk-extended, 'Arial Narrow', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  micro:
    fontFamily: "akzidenz-grotesk-extended, 'Arial Narrow', Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 80px
  5xl: 120px

rounded:
  none: 0px
  sm: 2px
  md: 3px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 36px
  button-primary-hover:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 12px 36px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 36px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 12px 36px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.micro}"
    rounded: "{rounded.none}"
    padding: 11px 0px
  button-ghost-hover:
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 11px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 16px
    borderColor: "{colors.border-ink}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    padding: 16px
  input-email:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px
    borderColor: "{colors.border}"
  input-email-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px
  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-item:
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 0px
  nav-item-hover:
    textColor: "{colors.primary-light}"
    padding: 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  swatch-tile:
    rounded: "{rounded.none}"
    padding: 0px
---

# Tracksmith Design System

## Overview

Tracksmith is a running brand with a distinct New England collegiate sensibility — its design communicates the same values as a 1960s Ivy League cross-country team uniform: rigorous, heritage-weighted, and quietly confident. The canvas is not white but a warm cream (`{colors.surface}`) deployed across hero sections and editorial overlays, evoking aged athletic program literature. The alternate ground is deep navy (`{colors.surface-dark}`) — the color of a Tracksmith Harrier singlet at dusk — used for the navigation bar, footer, and any context where the brand's serious athletic provenance needs asserting. White (`{colors.background}`) serves as the workhorse product listing surface between those two poles.

The typography is the most distinctive element. Sainte Colombe (`{typography.display-hero}`) is a custom typeface commissioned specifically for Tracksmith: a high-contrast, classically proportioned display serif with light-weight cuts (300) at large sizes and tighter tracking as it scales down. At 72px/−2px it reads as the masthead of an old athletic journal; at 34px it anchors product category headers with the same understated authority. Akzidenz-Grotesk Extended (`{typography.nav-link}`, `{typography.button-ui}`) provides the performance-label counterpoint — a historically significant grotesque extended version that was the default language of European sports equipment and catalogues. The combination produces something rare: a running brand that feels literary without feeling precious.

The brand accent is brass-tan (`{colors.primary}`) — a warm brown-gold that appears in buttons, borders, form fields, and the iconic diagonal sash stripe used in color-chooser tiles. This color reads as oxidized metal hardware on vintage gear: a buckle, a spike plate, a trophy plaque. Combined with `{colors.surface-dark}` navy and `{colors.surface}` cream, the three-color brand system is complete without any chromatic novelty — no accent blues, no promotional reds (the red in the data belongs to product colorway swatches, not the UI chrome).

**Key Characteristics:**
- Two-canvas system: warm cream (`{colors.surface}`) for editorial moments and deep navy (`{colors.surface-dark}`) for navigation and footer — white (`{colors.background}`) as the commerce neutral between them
- Sainte Colombe at weight 300 for all display sizing (72px–34px) — confident lightness that reads as editorial refinement rather than bold reassurance
- Akzidenz-Grotesk Extended at 12px / 1.0–1.2px letter-spacing for all labels, navigation items, and button copy — the catalog language of European athletic heritage
- Brass-tan `{colors.primary}` as the sole chromatic accent — applied to CTAs, form borders, links, and the iconic diagonal sash stripe in color swatches
- Border-radius is minimal: 2–3px on buttons and inputs, essentially square — the geometry of pressed athletic apparel, not consumer software
- Diagonal swatch tiles using a two-stop linear gradient (50% split) for colorway visualization — brand-distinctive and instantly recognizable
- 0.3s `cubic-bezier(0.4, 0, 0.2, 1)` transitions on all interactive elements — unhurried but responsive, matching the deliberate pace of a serious runner
- Photography-led layout: full-bleed golden-hour or track-side imagery with minimal typographic overlay; the image does the emotional work
- 8px base spacing grid with generous section gaps (80–120px) that create the breathing room of a well-laid magazine spread
- No bold weight in the UI vocabulary — weight 300 and 400 are the only registers; hierarchy is expressed through size, spacing, and the serif/grotesk contrast

## Colors

### Canvas
- **Page White** (`{colors.background}`): The default surface for product listings, editorial body text, and white-ground sections. Not a chromatic or warm white — purely neutral.
- **Heritage Cream** (`{colors.surface}`): The brand's identity canvas — warm parchment used for hero sections, modal backgrounds, newsletter sign-up overlays, and any editorial interstitial. Evokes aged paper and vintage athletic program printing.
- **New England Navy** (`{colors.surface-dark}`): The primary dark ground, used for the navigation bar, footer, and dark-canvas hero sections. `#0a1e32` — a deeply saturated blue-black with visible hue, distinguishable from neutral black.

### Ink
- **Navy Ink** (`{colors.ink}`): All primary text — headings, product names, body copy — set against white or cream surfaces. The same navy as the dark canvas creates continuity: text color and surface dark are identical.
- **Steel Muted** (`{colors.ink-secondary}`): Placeholder text in form fields, secondary metadata, muted caption copy. A cool medium grey.
- **Smoke** (`{colors.ink-muted}`): Tertiary labels, dismiss links ("No thanks"), and lowest-hierarchy UI copy.
- **On Dark** (`{colors.on-dark}`): White type on navy surfaces — navigation items, footer links, nav bar logotype.

### Brand Accent
- **Brass Tan** (`{colors.primary}`) — The primary CTA fill, link color, button border, and form field border in active state. Warm, metallic, restraint-adjacent. Nothing in the navigation or editorial chrome uses this color except where explicit interaction is called for.
- **Brass Light** (`{colors.primary-light}`) — A slightly lighter, warmer brass used for hover states, sign-up button fills, and the site's manifest theme color. The distinction from `{colors.primary}` is subtle but perceptible.

### Borders & Semantic
- **Brass Border** (`{colors.border}`): Full-strength 1px solid brass — used on outlined buttons and email input borders in active/selected state.
- **Mist Divider** (`{colors.border-subtle}`): Light warm grey for section dividers, card separators, and layout rules.
- **Input Chrome** (`{colors.border-ink}`): Medium cool grey for standard text input borders in their default state.
- **Focus Ring** (`{colors.focus-ring}`): Brass — matching the border color, 2px auto on focused email inputs. Functional and on-brand simultaneously.

## Typography

### Font Family
- **Display / Editorial**: `SainteColombe` (custom Tracksmith-commissioned serif), with fallbacks: `'Sainte Colombe Tracksmith'`, `'Times New Roman'`, `Times`, `Baskerville`, `Georgia`, `serif`. Self-hosted; no Google Font equivalent.
- **Navigation / Labels / Buttons**: `akzidenz-grotesk-extended`, with fallbacks: `'Arial Narrow'`, `Arial`, `sans-serif`. Self-hosted via Adobe Fonts; closest Google Font substitute is `Barlow Condensed` or `Oswald`.
- No variable fonts in use. Weights are discrete cuts (300 and 400 for the serif; 400 and 500 for the grotesk).
- **OpenType**: No explicit feature-settings detected in the extracted data; Sainte Colombe handles its own optical sizing through weight selection.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference tokens directly via `{typography.display-hero}`, `{typography.body}`, etc.

| Token | Use |
|---|---|
| `display-hero` | Primary campaign heroes — 72px, light 300, −2px tracking; masthead-scale editorial |
| `display` | Section-level campaign headers — 60px, regular 400; product category openers |
| `heading-section` | Product collection titles, editorial feature heads — 48px, light 300, −2px |
| `heading-sub` | Sub-collection labels, callout blocks, sidebar headings — 34px, light 300, −1px |
| `body-large` | Editorial lead paragraphs, pull quotes — 24px, light 300, −1px |
| `body` | Product descriptions, journal articles, about copy — 19px, regular 400, 1.68 lh |
| `nav-link` | Navigation items, footer links — Akzidenz 12px, 1.2px tracking, line-height 2.0 |
| `button-ui` | CTAs, button labels, checkout actions — Akzidenz 12px, 1px tracking |
| `label-upper` | Category stamps, badges, filter labels — Akzidenz 12px / 500, 1.2px tracking |
| `caption` | Product pricing, metadata, photo credits — Akzidenz 14px |
| `micro` | Legal disclaimers, dismiss links — Akzidenz 10px |

### Principles
- **Sainte Colombe at weight 300 for large sizes**: The light cut is the display default — weight is introduced only for body copy (400). The contrast between 300 at 72px and 400 at 19px creates a two-register system without mixing faces at each level.
- **Akzidenz-Grotesk Extended is label-only**: The extended cut does not appear in body text or editorial contexts. Its job is classification — navigation, button labels, size chips, filter tags. This strict role separation prevents the grotesk from diluting the serif's authority.
- **Negative tracking at display sizes**: −2px at 48–72px tightens the headline into a compact editorial block; −1px at 24–34px maintains that quality at intermediate scales. Body text at 19px returns to 0px tracking for reading comfort.
- **Line-height as editorial pacing**: Display type compresses to 1.22 for a block-like headline presence; body text opens to 1.68 — generous enough to feel like printed magazine text. The 2.0 line-height on nav links creates comfortable vertical rhythm in the nav bar.
- **No bold in the UI vocabulary**: Weight 500 appears only in `label-upper` for the Akzidenz grotesk; weight 300–400 covers everything else. The brand's confidence comes from size and spacing, not typographic weight.

## Layout

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

Tracksmith's spacing is generous at the section level and precise at the component level. The 8px grid governs button padding and form field insets; section gaps scale to 64–120px to create the breathing room of a well-printed editorial spread. The 120px token appears between major campaign sections where photography needs room to exhale before the next content block. This wide-step scale reflects a brand that is comfortable with emptiness — white space is a design choice, not a layout shortcoming.

### Grid & Container
- Max content width: 1440px, fluid within that
- Navigation: fixed top bar at `{colors.surface-dark}` navy; logo centered (SVG wordmark, 165×73px); nav items Akzidenz Extended 12px spanning left and right wings
- Product grid: typically 3–4 column on large desktop, 2 column on tablet, single column on mobile; product cards are image-dominant with minimal text chrome below
- Hero sections: full-bleed editorial photography up to 1800px breakpoint; headline overlay uses the cream `{colors.surface}` as text or background context
- Max breakpoint 1800px — the system extends to large monitors without a layout change

### Whitespace Philosophy
- **Editorial breathing room**: Section gaps of 80–120px between major campaign moments echo the page-turn cadence of an athletic journal — no section crowds the next.
- **Product grid density**: Inside the product grid, spacing compresses to 12–24px. The photography carries the hierarchy; the text chrome (name, price) is minimal and subordinate.
- **Generous body text leading**: 1.68 line-height at 19px body creates a reading experience that feels print-quality — long-form journal articles are a Tracksmith editorial pillar.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, navigation, standard layout surfaces |
| Hover (Level 1) | Subtle image scale transform | Product card photography scales ~1.03–1.05x on hover |
| Modal (Level 2) | `rgba(0, 0, 0, 0.1) 0px 10px 30px 5px` | Newsletter sign-up modal, cart drawer |
| Form chrome | `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 1px 2px 0px` | Input field subtle lift; approximated shadow-soft |
| Focus Ring | `2px auto {colors.focus-ring}` on inputs | Keyboard focus indicator; brass-colored, matches border |

**Shadow Philosophy**: Tracksmith's elevation language is almost entirely flat. Product cards have no shadow or border — photography sits directly on the white surface, giving the grid a printed-catalog quality. The one elevated moment is the newsletter modal, which uses a generous 30px blur at 0.1 opacity to create a clean float above the photography without drama. The form input uses a hairline lift shadow (1px blur at 0.05) as structural definition for the field, not as a design statement. The brand's restraint in shadow use reinforces its editorial posture: this is not a software product, it is a publication.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All product cards, sign-up button variant, layout containers |
| `sm` | 2px | Primary buttons ("Continue Shopping"), standard text and email inputs |
| `md` | 3px | Outlined buttons ("View Cart", "Quick Buy"), secondary CTAs |
| `pill` | 9999px | Close dialog and search dismiss icon buttons only |

The system is nearly square throughout. The 2–3px radius on buttons and inputs is a concession to browser default conventions rather than a design statement — functionally these read as sharp corners. The `{rounded.pill}` value appears only on small circular close/dismiss icon buttons (span and dialog close elements), never on content components. Tracksmith's geometry is the geometry of athletic tape and race-number perforations: flat, precise, utilitarian.

## 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`** — Brass-tan fill (`{colors.primary}`), white label, 12px 36px padding, Akzidenz Extended 12px, 2px radius. The primary e-commerce action. Used for "Continue Shopping," "Add to Cart." Hover deepens to `{colors.primary-light}`.
- **`button-secondary`** — White background with brass 1px border, brass text, 3px radius. Used for outlined secondary actions like "View Cart" and "Quick Buy." Hover inverts to brass fill — the secondary becomes a primary visually, signaling decisive available action.
- **`button-ghost`** — No background, no border, muted ink text at 10px. Used for dismiss links ("No Thanks") within modal contexts. The lowest-hierarchy interactive element in the system.

### Cards
Product cards have no background fill, no shadow, no border-radius, and no border. The product image fills the card area completely; product name and price sit below in the white gutter. Hover behavior is image-driven — CSS transform scale on the photograph, 0.5s `cubic-bezier(0.4, 0, 0.2, 1)`. The card chrome is invisible at rest, making the grid feel like a series of images with caption text rather than framed tiles.

### Inputs
Standard text inputs use a 2px radius, white background, 1px medium-grey border (`{colors.border-ink}`), Sainte Colombe 19px body text, and 16px padding. Email inputs (newsletter, sign-up modals) use 0px radius with a brass 1px border (`{colors.border}`) — the editorial context calls for a sharper, more intimate feel. Focus state adds a 2px brass outline ring matching `{colors.focus-ring}`.

### Navigation
Fixed top bar on `{colors.surface-dark}` navy. Tracksmith SVG wordmark centered (165×73px). Left wing: Men, Women, Footwear, Apparel — Akzidenz Extended 12px, white, uppercase implied by the typeface. Right wing: Stores, Events & Programs, Journal — same treatment. Hover shifts link color from `{colors.on-dark}` to `{colors.primary-light}` (brass), 0.3s transition. Cart icon far right. The navbar does not become transparent or change behavior on scroll — it is always the navy stripe.

### Badges / Tags
Category labels use `{typography.label-upper}` (Akzidenz Extended 500, 12px, 1.2px tracking) on a cream `{colors.surface}` background with navy text. No border-radius. Used for editorial stamps — "New Arrivals," collection identifiers, seasonal tags. The label register deliberately echoes a hand-stamped race number tag.

### Color Swatches
The brand uses a distinctive diagonal-split tile system for colorway selection: a CSS linear-gradient at 50% (`to right bottom`) splitting two color stops. The Harrier colorway, for example, shows navy-and-cream (`{colors.swatch-navy}` over `{colors.surface}`) or navy-and-crimson (`{colors.swatch-navy}` over `{colors.swatch-crimson}`). This diagonal visualization is brand-distinctive and appears nowhere else in the UI system.

## Do's and Don'ts

### Do
- Use `{typography.display-hero}` (Sainte Colombe 300, 72px, −2px tracking) for any headline that needs editorial authority — campaign section openers, collection debut pages, journal mastheads.
- Apply `{colors.primary}` (brass) exclusively to CTAs, form borders, links, and the diagonal swatch accent — preserve its metallic singularity by never using it for decorative fills or background washes.
- Set all navigation items and button labels in `{typography.nav-link}` or `{typography.button-ui}` (Akzidenz Extended, 12px, 1.0–1.2px tracking) — the extended width and open spacing is the performance-label register of this brand.
- Use `{colors.surface}` (heritage cream) for editorial moments — hero overlays, modal backgrounds, sign-up forms, about sections. Reserve it for narrative; do not use it as a generic card background.
- Keep body copy at `{typography.body}` (19px, 1.68 line-height) for all long-form reading contexts — journal articles, brand story pages, race reports.
- Use `{colors.surface-dark}` navy for any reversed-out context: the nav bar, footer, dark-canvas hero sections. Do not substitute pure black.
- Apply the diagonal swatch tile gradient for colorway visualization — it is the brand-specific system; square flat swatches are too generic for Tracksmith's visual language.

### Don't
- Don't introduce a chromatic accent outside `{colors.primary}` and `{colors.primary-light}` in the UI chrome — the red and gold in the gradient data belong to product colorway swatches only, not buttons, links, or borders.
- Don't use Sainte Colombe at weight 400 for display sizes — the 300 light cut is the editorial voice; weight 400 is for body reading only. Mixing them at equivalent sizes dilutes the hierarchy.
- Don't round product cards, layout containers, or editorial image frames — `{rounded.none}` is the architectural shape language; radius belongs only to buttons and form inputs at 2–3px.
- Don't add box-shadow to product cards — the catalog-grid quality depends on flat photography sitting directly on the white surface without lift.
- Don't use Akzidenz-Grotesk Extended for body copy or editorial text — its extended proportions make paragraph reading uncomfortable; it is a label and navigation typeface exclusively.
- Don't use white as the nav bar background — the navy `{colors.surface-dark}` bar is the brand's structural frame; a white nav would collapse the identity of the page.
- Don't reduce letter-spacing on Akzidenz Extended below 1px at 12px — the open tracking is definitional to its catalog register; condensed spacing makes it read as a generic grotesque.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Single column, nav collapses to hamburger + logo, hero typography scales down |
| Mobile | 600–700px | Single column with edge padding, compact product labels |
| Tablet Small | 700–900px | 2-column product grid, nav items partially visible |
| Tablet | 900–1024px | Full 2-column, editorial text at mid-sizes |
| Desktop | 1024–1440px | 3–4 column product grid, full nav bar, editorial heroes at full expression |
| Large Desktop | 1440–1800px | Max-width layout centered, side margins grow, section gaps at 120px |

### Touch Targets
- Navigation links: 44px effective touch area through 16px vertical padding and line-height 2.0
- Primary buttons: 12px 36px padding achieves approximately 44px height — meets WCAG 2.5.5 for most viewport sizes
- Product cards: full-card tap target — the image and title block are the entire link area
- Size chips: minimum 36px touch area; some chip implementations benefit from 44px padding augmentation

### Collapsing Strategy
- **Navigation**: Full navy bar collapses to hamburger + centered wordmark below ~1024px; hamburger opens a full-height overlay in navy
- **Hero typography**: `{typography.display-hero}` (72px) scales to approximately 36–48px on tablet and 28–32px on mobile; letter-spacing adjustments are handled via CSS clamp
- **Product grid**: 3–4 columns on desktop → 2 columns on tablet → 1 column on mobile
- **Section gaps**: 120px editorial gaps compress to 64px on tablet and 40px on mobile; the breathing room ratio is maintained
- **Photography**: Full-bleed at all breakpoints; art-directed portrait crops on mobile for hero sections

### Image Behavior
- Product photography: fills card cells completely with no border-radius, no shadow — pure rectangular image on white ground
- Editorial campaign photography: full-bleed, object-fit cover, no text overlap except for `{colors.surface}` cream panels positioned beneath the image
- Color swatch tiles: diagonal CSS gradient splits, no image file — pure CSS rendering at any size
- Hover on product images: CSS transform scale(~1.03) over 0.5s `cubic-bezier(0.4, 0, 0.2, 1)` — a slow, deliberate reveal

---

## Agent Prompt Guide

### Quick Color Reference
- Background (product surface): `{colors.background}`
- Heritage canvas: `{colors.surface}`
- Navy brand ground: `{colors.surface-dark}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- CTA fill: `{colors.primary}`
- CTA text: `{colors.on-primary}`
- Border (brass, active): `{colors.border}`
- Border (subtle): `{colors.border-subtle}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build a Tracksmith-style campaign hero: full-bleed editorial photography at 100vw, object-fit cover. Overlay panel at bottom-left using `{colors.surface}` (heritage cream) background with `{typography.display-hero}` (Sainte Colombe 300, 72px, −2px tracking) headline in `{colors.ink}` navy. Below the headline, a `{components.button-primary}` (brass fill, Akzidenz Extended 12px, 12px 36px padding, 2px radius). Section gap above and below: `{spacing.5xl}` (120px)."
- "Build a Tracksmith product card: white `{colors.background}` surface, full-bleed square image with `{rounded.none}` corners, no shadow. Below image: product name in `{typography.body}` (Sainte Colombe 19px, `{colors.ink}`, 1.68 line-height), price in `{typography.caption}` (Akzidenz Extended 14px). On image hover: CSS scale(1.03), 0.5s `cubic-bezier(0.4, 0, 0.2, 1)`. No card border."
- "Build a Tracksmith navigation bar: fixed top, `{colors.surface-dark}` navy background, `{spacing.lg}` 16px vertical padding. Tracksmith SVG wordmark centered in white. Left: Men, Women, Footwear, Apparel in `{typography.nav-link}` (Akzidenz Extended 12px, `{colors.on-dark}`, 1.2px tracking). Right: Stores, Events & Programs, Journal, same style. Link hover: color shifts to `{colors.primary-light}`, 0.3s cubic-bezier transition."
- "Build a Tracksmith newsletter modal: `{colors.surface}` cream background, `0 10px 30px 5px rgba(0,0,0,0.1)` shadow, centered on viewport. Headline in `{typography.heading-sub}` (Sainte Colombe 300, 34px, −1px tracking, `{colors.ink}`). Sub-copy in `{typography.body}` (19px, 1.68 lh). Email input: `{components.input-email}` (brass border, 0px radius). Submit button: `{components.button-primary}` (brass fill, full-width). Dismiss link: `{components.button-ghost}` (10px Akzidenz, `{colors.ink-muted}`)."
- "Build a Tracksmith colorway swatch selector: a row of 40×40px square tiles (`{rounded.none}`). Each tile uses a CSS `linear-gradient(to right bottom, <color1> 50%, <color2> 50%)` split — navy-cream for the Harrier, navy-crimson for red edition. Selected state: `2px solid {colors.border}` outline at 2px offset. Hover: scale(1.05), 0.15s ease. Label below each tile in `{typography.micro}` (Akzidenz 10px, `{colors.ink-secondary}`)."

### Iteration Guide

1. Start with `{colors.surface}` cream for editorial moments and `{colors.background}` white for commerce surfaces — the first decision defines which register you're building for.
2. Set `{typography.display-hero}` (Sainte Colombe 300, 72px, −2px) for the primary headline — the light weight at large size is the brand's editorial voice; do not substitute a heavier weight or different size.
3. Use `{colors.primary}` (brass) for every interactive signal: button fills, link colors, border highlights. The brass is the brand's only chromatic accent — deploy it consistently.
4. Apply `{typography.nav-link}` (Akzidenz Extended 12px, 1.2px tracking) for all classification labels, navigation items, and button copy — the extended grotesk is the performance-label layer.
5. Keep radius at `{rounded.sm}` (2px) on buttons and inputs, and `{rounded.none}` on cards and layout elements — the near-square geometry is the brand's architectural statement.
6. Use the diagonal CSS gradient swatch tile pattern (`linear-gradient(to right bottom, <color1> 50%, <color2> 50%)`) for any colorway or palette visualization — it is the Tracksmith-distinctive approach to color selection.
7. Maintain section gaps at `{spacing.4xl}` (80px) minimum between major content blocks — the editorial breathing room is non-negotiable for the print-quality feel.

---

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