---
version: alpha
name: Alo Yoga
description: "Studio-to-street activewear brand where a pure white canvas and absolute black anchor every surface, uppercase Proxima Nova at weight 900 shouts confidence without a serif in sight, and zero border-radius on every CTA signals that softness is saved for the leggings."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"           # light product badge fill, subtle band backgrounds
  surface-warm: "#e5dac6"      # warm sand — editorial section backgrounds, swatch displays
  surface-dark: "#000000"      # primary CTA fill, dark hero overlays, nav on dark

  # Ink / text
  ink: "#000000"               # headings, body, primary type — pure black throughout
  ink-secondary: "#605e5c"     # supporting copy, secondary labels, muted metadata
  ink-muted: "#595959"         # was rgb(89,89,89) hover/focus dim state
  on-dark: "#ffffff"           # text and icons on black surfaces

  # Brand accent — Alo's accent is warm sand/tan, not a chromatic hue
  primary: "#ceb18f"           # warm tan — semantic primary per dembrandt, swatch highlight
  on-primary: "#000000"        # black type on tan surface
  primary-container: "#e5dac6" # lighter sand variant for backgrounds

  # Product swatch palette (seasonal colorways, not chrome colors)
  swatch-navy: "#01305c"       # deep navy — Sun Kissed collection
  swatch-periwinkle: "#bcd4ff" # periwinkle blue
  swatch-blush: "#f8bce5"      # soft pink blush
  swatch-rose: "#ebbfc7"       # dusty rose
  swatch-pink: "#fe87bc"       # vivid pink
  swatch-brown: "#895e48"      # rich sun-kissed brown
  swatch-espresso: "#513b2c"   # espresso

  # Borders
  border: "#ececec"            # hairline dividers, product card edges — was rgb(236,236,236)
  border-medium: "#dedede"     # was rgb(222,222,222) — medium-weight list dividers
  border-strong: "#a3a3a3"     # input border, form controls — was rgb(163,163,163)

  # Status / semantic
  error: "#de282e"             # was rgb(222,40,46) — form error, sale badge

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.3) — modal and dropdown shadows

typography:
  display-hero:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -1.8px
  display:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.96px
  heading-section:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.9px
  body-large:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.396px
  body:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.352px
  body-medium:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.3px
  button-ui:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 1.5px
  nav-link:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.9px
  label-ui:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.8px
  caption:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.48px
  caption-small:
    fontFamily: "proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.308px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 70px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 30px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    border: 1px solid {colors.surface-dark}
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.ink-secondary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

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

  input-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: 1px solid {colors.border-strong}
  input-dark-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    border: 1px solid {colors.primary}

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  badge-swatch:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 0px

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

  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px
  nav-link-hover:
    textColor: "{colors.ink-secondary}"
---

# Alo Yoga Design System

## Overview

Alo Yoga's interface is the visual handshake between an LA studio and a luxury DTC storefront — and it earns that positioning almost entirely through discipline. The canvas is pure white (`{colors.background}`), every CTA is solid black (`{colors.surface-dark}`) at 0px radius, and the typography is a single face, Proxima Nova, pushed to weight 900 with 1.5px uppercase tracking on buttons. The result is clean enough to read as a fashion brand, structured enough to survive a 300-item product grid, and confident enough to let world-class photography do the persuasion.

The typography hierarchy is the brand's most distinctive move. Headlines arrive at 60px in Proxima Nova at weight 700 with tight negative tracking (-1.8px), UPPERCASE, in absolute black on white — a compressed, athletic shout that reads as strength without aggression. Navigation links and section labels run at 18px with 0.9px positive tracking, also uppercase, giving the chrome a measured, editorial calm. The CTA text (`{typography.button-ui}`) is the loudest weight in the system at 900, with 1.5px tracking, so even a short "SHOP NEW IN" reads as a full-volume declaration. The system never whispers.

Below the surface, the product color-swatch palette doubles as a window into the brand's seasonal storytelling. "Sun Kissed Brown & Navy" (a warm-tan `{colors.primary}` and a deep `{colors.swatch-navy}`) appear as swatches before they become colorways — the website previews a colorstory rather than a catalog row. Shadows are nearly absent; separation is achieved through photography framing, whitespace, and a thin `{colors.border}` hairline. The only softness permitted is on circular swatches (`{rounded.pill}`): everything else corners at zero.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with product photography doing all visual heavy-lifting — no gratuitous backgrounds
- Absolute black (`{colors.surface-dark}`) as the only CTA fill — no chromatic brand button color
- **Zero border-radius on buttons, cards, and inputs** (`{rounded.none}`) — only swatch circles use `{rounded.pill}`
- Proxima Nova exclusively — weight 900 (`{typography.button-ui}`) for CTAs, 700 for display headlines (`{typography.display-hero}`)
- **UPPERCASE + positive letter-spacing** on every button, nav, and section label — 1.5px on CTAs, 0.9px on nav
- Tight negative tracking on hero display text (-1.8px at 60px) signals athletic compression, not editorial luxury
- Warm sand swatch family (`{colors.primary}`, `{colors.primary-container}`, `{colors.surface-warm}`) for seasonal editorial moments
- Product color swatches rendered as circular `{rounded.pill}` pill elements — the only rounded form in the system
- Hairline `{colors.border}` dividers for structural separation; shadows reserved for modals only
- Motion at 0.3s ease throughout with 0.2s ease-out on button interactions — snappy, not floaty
- Dark-surface email input (`{components.input-dark}`) appears in newsletter footer — inverted palette moment
- Error state via `{colors.error}` on sale badges and form validation only — no other semantic color

## Colors

### Surface & Canvas
- **Pure White** (`{colors.background}`): The dominant canvas. Every product page, category listing, and navigation panel starts on white.
- **Light Gray** (`{colors.surface}`): Product badge fills, subtle background bands, hover surfaces.
- **Warm Sand** (`{colors.surface-warm}`): Editorial section backgrounds and the lighter swatch range — the brand's seasonal warmth token.
- **Black** (`{colors.surface-dark}`): Primary CTA fill, dark hero panels, inverted newsletter sections.

### Ink / Text
- **Black** (`{colors.ink}`): All primary type — headings, body, nav, product names. Pure black, no softening.
- **Warm Gray** (`{colors.ink-secondary}`): Supporting copy, secondary labels, muted metadata.
- **Hover Dim** (`{colors.ink-muted}`): Focus/hover state dimming on interactive text elements.
- **On Dark** (`{colors.on-dark}`): Text and icon color when placed on `{colors.surface-dark}` surfaces.

### Brand Accent
- **Warm Tan** (`{colors.primary}`): The semantic primary from the extracted palette — appears in seasonal swatch highlight and gradient moments. Not a button color; a colorstory token.
- **Light Sand** (`{colors.primary-container}`): The softer sand companion — editorial surface variant.

### Product Swatch Palette
The swatch colors (`{colors.swatch-navy}`, `{colors.swatch-periwinkle}`, `{colors.swatch-blush}`, `{colors.swatch-rose}`, `{colors.swatch-pink}`, `{colors.swatch-brown}`, `{colors.swatch-espresso}`) represent current seasonal colorways. They exist on the page as circular swatches (`{rounded.pill}`) and in editorial photography — they do not drive chrome color decisions.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges, list dividers — the primary structural device at 1px solid.
- **Medium Border** (`{colors.border-medium}`): Heavier list-item dividers.
- **Form Border** (`{colors.border-strong}`): Input controls and form fields.
- **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the modal drop shadow (original: `rgba(0,0,0,0.3)` — flattened for Google spec).

## Typography

### Font Family
- **Primary**: `proxima-nova`, with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. Also loads as self-hosted `proxima-nova-normal.woff2` and `proxima-600.woff`.
- **Secondary display** (editorial only): `Arquitecta` (via Latinotype) — thin through black weights. Appears in campaign editorial contexts, not in the main product UI.
- **Weight range**: 400 (body) through 900 (CTAs). The system spans the full weight range but is binary in practice: body uses 400–500, buttons and headlines use 600–900.
- **Transform / tracking**: All CTAs, nav, and display are UPPERCASE. Button tracking: 1.5px. Nav tracking: 0.9px. Body stays sentence-case with faint 0.35px track.

### Hierarchy

The full type scale lives in the `typography:` token block.

| Token | Use |
|---|---|
| `display-hero` | 60px / 700 / uppercase / -1.8px — major campaign headlines |
| `display` | 32px / 600 / uppercase / -0.96px — section headers, category titles |
| `heading-section` | 32px / 400 / 0px — editorial running heads |
| `heading-sub` | 18px / 500 / uppercase / 0.9px — sub-section labels, eyebrows |
| `body-large` | 18px / 400 / 0.396px — product description intro, editorial copy |
| `body` | 16px / 400 / 0.352px — standard reading copy |
| `body-medium` | 16px / 500 / 0.3px — emphasized body, filter labels |
| `button-ui` | 18px / 900 / uppercase / 1.5px — primary and secondary CTAs |
| `nav-link` | 18px / 500 / uppercase / 0.9px — header navigation |
| `label-ui` | 16px / 500 / uppercase / 0.8px — UI labels, filter headings |
| `caption` | 12px / 400 / 0.48px — fine metadata, legal, badges |
| `caption-small` | 14px / 400 / uppercase / 0.308px — category markers, product tags |

### Principles
- **Weight 900 is the CTA voice**: the heaviest weight in the system lives exclusively on buttons — the product chrome recedes, the action shouts.
- **UPPERCASE is non-negotiable for actions**: every clickable label is uppercase; sentence-case would read as passive. The brand communicates via compressed, athletic energy.
- **Negative tracking at large display**: -1.8px on 60px headlines creates the tight, performance-brand confidence that distinguishes Alo from a spa brand.
- **400 for reading, 900 for doing**: body copy is relaxed and readable; the moment a user should act, the type snaps to black weight.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The site uses an 8px-anchored scale with a notable spike at 70px (the `{spacing.4xl}` value, used heavily for hero section internal spacing) and a top-of-scale 96px (`{spacing.5xl}`) for major section breaks.

The spacing personality is generous at the page level and compressed inside components — wide sections separated by air, with product cards and nav items tightly controlled.

### Grid & Container
- Max content width: ~1440px with full-bleed photography breaking the container regularly
- Product grid: typically 2–4 columns of squared-off image cards depending on breakpoint
- Hero: full-bleed editorial photography (often 16:9 or portrait), headline over or beside
- "Trending Now" and category sections: multi-image scrollable or grid layout

### Whitespace Philosophy
- **Photography carries the page**: hero and product imagery fill every available inch; chrome is minimal
- **Section rhythm via generous vertical gaps**: `{spacing.5xl}` (96px) between major page sections
- **Compact inside, open outside**: product card internals are tight; the grid itself breathes freely

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Default — nearly the entire product site |
| Hairline (Level 1) | `1px solid {colors.border}` | Card edges, list dividers, section separation |
| Subtle (Level 2) | `0 3px 5px rgba(0,0,0,0.3)` (`{colors.shadow-soft}`) | Modals, promo overlays, floating UI |
| Carousel (Level 3) | `0 0 2px 2px {colors.shadow-soft}` | Swiper/carousel controls, occasional spotlight |

**Shadow Philosophy**: Alo Yoga is almost flat. The overwhelming majority of the site separates elements through whitespace and hairline borders, not depth. The single meaningful shadow (`0 3px 5px` at 30% black) appears on modals and transient overlays — it's restrained enough to feel like paper lifting off a table rather than a UI component floating in air. The flatness reinforces the brand's precision-first, fuss-free aesthetic.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, product image frames — everything structural |
| `sm` | 4px | Rare internal controls (sign-up form boundary) |
| `pill` | 9999px | Color swatches exclusively — the only soft form in the system |

The system is effectively binary: 0px for all functional chrome, `{rounded.pill}` (9999px) for circular swatch elements. Alo's rounded shapes live in the product palette, not the UI chrome — softness is reserved for the colorways, not the containers.

## Components

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

### Buttons

- **`button-primary`** — Black (`{colors.surface-dark}`) fill, white text, 0px radius, `15px 30px` padding, Proxima Nova 900 at 1.5px tracking uppercase. The dominant CTA. Hover dims to `{colors.ink-secondary}`.
- **`button-secondary`** — White fill, black text, 1px black border, 0px radius, `14px 32px` padding. Used for ghost CTAs on dark photography and alt marketing contexts.
- **`button-ghost`** — Bare text link in Proxima Nova 500 uppercase; no fill, no radius. Hover dims to `{colors.ink-secondary}`.

### Cards

- **`card`** — White surface, 0px radius, no resting shadow. Product cards are squared-off image frames; the image occupies full card width flush to top with product name, price, and swatch row beneath.
- **`card-hover`** — Media elements transition at 0.6s ease-in-out on transform; image scales or shifts subtly.

### Inputs

- **`input`** — White fill, `{colors.border-strong}` 1px border, 0px radius, `12px 16px` padding. Focus state shifts border to solid black.
- **`input-dark`** — Inverted variant on the newsletter footer: black fill, white placeholder text, `{colors.border-strong}` border. Focus highlights in `{colors.primary}` tan.

### Badges

- **`badge`** — Light gray (`{colors.surface}`) fill, black text, 0px radius, 12px uppercase UPPERCASE. Used for product "NEW", "TRENDING" labels.
- **`badge-swatch`** — Circular swatch (`{rounded.pill}`) in any of the seasonal colorway values. The only pill-shaped element in the system.

### Navigation

- **`nav-bar`** — White background, black uppercase links at 18px 500 with 0.9px tracking. Sticky on scroll. Logo is the Alo wordmark SVG at top-left.
- **`nav-link`** — Pure black, transitions to `{colors.ink-secondary}` on hover via 0.3s ease color shift.

## Do's and Don'ts

### Do
- Keep every button, card, and input corner at `{rounded.none}` (0px) — rounded corners break the language
- Set all CTA and nav text in uppercase Proxima Nova at the correct weights: 900 with 1.5px tracking for buttons, 500 with 0.9px tracking for nav
- Use `{colors.surface-dark}` (black) as the primary CTA fill — it's the only CTA color in the system
- Let oversized editorial photography carry the page — the canvas exists to frame it
- Apply `{colors.primary}` (`#ceb18f`) and the swatch palette as colorway tokens, not chrome accent colors
- Reserve `{rounded.pill}` exclusively for product color swatches
- Use hairline `{colors.border}` dividers and whitespace for structural separation rather than shadows
- Dim interactive text hover states to `{colors.ink-secondary}` — never introduce a color for hover

### Don't
- Don't round any button, input, or card corner — `{rounded.none}` is the structural identity
- Don't use the warm tan `{colors.primary}` as a button background color — it's a swatch and editorial surface token, not a CTA accent
- Don't introduce a second typeface in the UI chrome — Proxima Nova carries all weights and contexts; Arquitecta is editorial-only
- Don't add resting card shadows or hover lift effects — the site reads flat, and that's deliberate
- Don't use sentence-case on buttons or nav labels — uppercase is the entire voice of interactive elements
- Don't pull product swatch colors (`{colors.swatch-navy}`, `{colors.swatch-pink}`, etc.) into UI chrome — they communicate product, not brand
- Don't go below 900 weight on primary CTAs — the system earns its confidence through the heaviest weight; lighter reads as hesitation
- Don't place background-tinted sections without photography anchoring them — warm sand bands work because imagery justifies them

---

## Responsive Behavior

### Breakpoints
*(Alo exposes 25 breakpoints; the table below summarizes the meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column; hero crops to portrait; nav collapses to hamburger |
| Mobile | 375–639px | Single-column product grid; 40px display headlines; full-bleed photography |
| Tablet | 640–991px | 2-column product grid; hero keeps full-bleed; nav remains collapsed |
| Desktop | 992–1150px | 3–4 column grid; hero full-bleed with text overlay; full horizontal nav |
| Large Desktop | ≥1151px | Max layout; editorial hero sections at full 1440px width |

### Touch Targets
- Primary CTA (`{components.button-primary}`): `15px 30px` padding — 48px+ tap height, comfortable for thumb
- Nav links: full-row tap targets in mobile hamburger drawer
- Product swatches: circular `{rounded.pill}` elements maintain minimum 32×32px hit area
- Product cards: full card is tappable as a single navigation target

### Collapsing Strategy
- **Navigation**: horizontal nav bar collapses to hamburger (left) + Alo logo (center) + cart/search (right) on mobile
- **Product grid**: 4-col → 2-col → 1-col; image maintains square or portrait crop at every breakpoint
- **Hero type**: display scales from 60px to ~32–40px; uppercase and negative tracking preserved
- **Section spacing**: compresses from 96px to ~32–48px on mobile; editorial rhythm maintained
- **Swatch row**: up to 5 circular swatches shown, with "+N more" overflow on small viewports

### Image Behavior
- Full-bleed photography at every breakpoint — no margin constraints on hero imagery
- Product cards maintain square or slight-portrait aspect ratios; art-directed alternate crops for mobile portrait
- Editorial "Sun Kissed" style photography served at viewport width; alt crops for 375px portrait

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Brand accent: **Black** (`{colors.surface-dark}`) — there is no chromatic brand button color
- Secondary text: Warm Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA: Black fill, white text (`{components.button-primary}`)
- Editorial accent: Warm Tan (`{colors.primary}`)

### Example Component Prompts

- "Create an Alo Yoga hero section: full-bleed editorial photography on white (`{colors.background}`), a 60px uppercase headline in Proxima Nova weight 700 with -1.8px tracking, pure black text (`{colors.ink}`), and a single black CTA below: background `{colors.surface-dark}`, white text, `15px 30px` padding, **0px border-radius**, font Proxima Nova 900 at 1.5px tracking uppercase (`{typography.button-ui}`)"
- "Build a primary CTA button: black fill (`{colors.surface-dark}`), white text (`{colors.on-dark}`), **0px radius**, `15px 30px` padding, Proxima Nova weight 900 uppercase with 1.5px letter-spacing; hover background dims to `{colors.ink-secondary}`"
- "Design a product card on white (`{colors.background}`) with **0px radius** and no shadow. Product photograph fills full card width at top, flush to edges. Below: product name in Proxima Nova 16px weight 500 (`{typography.body-medium}`), price in Proxima Nova 16px weight 400, and a row of circular color swatches (`{rounded.pill}`) in the brand colorway palette"
- "Create an email capture input for a dark newsletter footer: background `{colors.surface-dark}`, white placeholder text, `1px solid {colors.border-strong}` border, **0px radius**, `12px 16px` padding, Proxima Nova 16px 400 (`{typography.body}`). Focus state: border shifts to `{colors.primary}` warm tan"
- "Design a site nav bar: white background, sticky on scroll. Alo wordmark SVG at left. Center: Proxima Nova 18px weight 500 uppercase links with 0.9px letter-spacing, pure black. Link hover transitions to `{colors.ink-secondary}` in 0.3s ease. Right: search, account, wishlist, cart icons in black"
- "Create a product badge for 'NEW IN': background `{colors.surface}` light gray, black text, **0px radius**, `4px 8px` padding, Proxima Nova 12px weight 400 uppercase (`{typography.caption}`)"

### Iteration Guide

1. Start on pure white (`{colors.background}`). Alo's canvas is always white — if you reached for a warm background first, reserve it for a designated editorial band only.
2. **Square every corner.** If any button, input, card, or image frame has border-radius, set it to 0px. The only valid `{rounded.pill}` is for circular color swatches.
3. All CTAs are black fill with white text. There is no chromatic brand button color — the warm tan (`{colors.primary}`) is a swatch and editorial token, not a CTA accent.
4. Every interactive label is uppercase Proxima Nova. Buttons at weight 900 with 1.5px tracking; nav at 500 with 0.9px tracking. If any CTA is sentence-case or lighter than 700, fix it.
5. Headings are uppercase with negative tracking (-1.8px at 60px). If the display type doesn't feel compressed and athletic, tighten the tracking.
6. Separation happens via whitespace and hairline borders (`{colors.border}`). No resting card shadows, no hover lifts, no atmospheric depth.
7. The swatch palette (`{colors.swatch-navy}`, `{colors.swatch-blush}`, etc.) communicates colorways — never pull these into buttons, nav, or any functional chrome.

---

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