---
version: alpha
name: "Alo Yoga"
website: "https://www.aloyoga.com"
description: >-
  A premium athleisure brand whose marketing site runs almost entirely on full-bleed lifestyle photography against a pure white canvas — no held-in-reserve brand color, no chrome decoration, just edge-to-edge images of models in soft pink and sand-toned activewear with thin Proxima Nova metadata strips above and 18px uppercase-tracked category labels between bands. The single in-page editorial moment is a 32px Proxima Nova italic display card reading "Alo Softcraft Capsule" rendered in warm beige cream on a soft pink crop, with a black-fill rectangular CTA pill 256px wide carrying 18px / 900-weight uppercase text. The brand voltage is the photograph; the system itself is monochrome chrome.

seo:
  title: "Alo Yoga Design System for React — pure white canvas, Proxima Nova, 16 components"
  metaDescription: "Alo Yoga's marketing site is a magazine grid where every band is a photograph. Black-on-white chrome, Proxima Nova 400-900, hot pink only in product imagery. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Photography-as-voltage — every brand color (hot pink, sage, cream, sand) lives inside model imagery rather than in chrome; the system itself uses only black, white, and warm grey"
    - "Rectangular black CTA — the 256px-wide black-fill button with 18px / 900-weight uppercase text and zero corner-radius is the single typographic shout on the page"
    - "Italic editorial display — Proxima Nova italic at 32px / 400 on the Softcraft Capsule card breaks the otherwise all-uppercase display tier with a magazine pull-quote"
    - "Two type tracks — running text at 16px / 400 with 0.352px tracking, display tracked tight at -0.96px and shouted in 18-60px uppercase weight 500-700"
    - "Pill-or-circle radius — 123 of the 125 captured radii are 50% (avatars, swatches, color dots); the remaining 2 are 4px on form fields. Everything else is square"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Alo Yoga's marketing site does what most athleisure brands hint at but never commit to: every band on the page is a photograph that bleeds to the viewport edge, and the brand chrome surrounding those photographs is monochrome. Black text on white canvas, a single rectangular black CTA, thin uppercase Proxima Nova category labels, and product cards that are themselves nothing more than a cropped model shot with a price strip beneath. Where Lululemon decorates its hero with a gradient overlay and an oversized serif headline, and where Outdoor Voices paints rounded color blocks behind its lifestyle imagery, Alo trusts the photograph to carry the entire emotional register. The chrome stays out of the way.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from the 49 distinct values the page renders — almost all of them either pure black (#000000, the dominant text and border at 2075 occurrences), pure white, or warm-neutral greys, with a small set of brand accents (hot pink, dusty rose, sage cream, denim navy) that appear only inside in-image overlays. 11 typography tokens running Proxima Nova in three weights (400, 500, 600, 700, 900) across an editorial display tier at 32-60px in uppercase and a body tier at 12-16px with 0.3-0.9px tracking. 4 corner-radius tokens centered on 0px (everything is rectangular) plus 50% for the 123 circular swatches. 16 component definitions covering the rectangular black CTA, the italic editorial card, hero photography panels, category strips, and the dotted color-swatch selector beneath every product tile.

    Feed this file to Claude or Cursor and it will reproduce Alo's specific moves: full-bleed photography per section, rectangular not pill-rounded CTAs, uppercase 18px / weight-900 button labels, tight italic Proxima Nova on the single editorial moment, and the strict discipline of keeping brand color out of the chrome entirely. Treat it as a reference rather than a clone target. The one move worth borrowing only if you sell visual product is the photography-as-voltage rule — strip the brand chrome to monochrome and let the imagery do every chromatic job. Most SaaS products lack imagery rich enough to carry the system this way; for fashion and lifestyle, it is the move.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.aloyoga.com"
      title: "Alo Yoga — official site"
      description: "Alo Yoga's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Alo Yoga's primary brand color?"
      answer: "Alo Yoga's site has no held-in-reserve brand voltage in the chrome — the surrounding interface is pure black on pure white. Black #000000 carries 2075 occurrences across text (1084), borders (958), and background fills (24). The chromatic identity lives inside the photography itself: a hot pink #fe87bc on the lead capsule shoot, a dusty rose #ebbfc7, a sage cream #ceb18f wired in CSS as --highlight-medium, and a deep denim navy #01305c wired as --accent-dark. These colors appear inside image overlays and product chips, never as button fills or page chrome. The black CTA is the single non-photographic chromatic act on the page."
    - id: "typography"
      title: "What typeface does Alo Yoga use, and what should I use as a substitute?"
      answer: "Alo Yoga runs Proxima Nova for everything — wired in CSS as --primary-font: 'proxima-nova', Helvetica, sans-serif. The system uses five weights: 400 for running body text at 16px, 500 for uppercase category labels at 18px with 0.9px tracking, 600 for h3 emphasis at 32px uppercase with -0.96px tracking, 700 for the hero headline at 60px / 72px line-height with -1.8px tracking, and 900 for the rectangular black CTA at 18px uppercase with 1.5px tracking. The closest open-source substitute is Montserrat at the same weights, or Inter for the body tier; both transfer cleanly without re-rhythming the page. Helvetica is the declared fallback."
    - id: "rectangular-cta"
      title: "Why is Alo Yoga's CTA a rectangle instead of a pill?"
      answer: "Alo's primary CTA is a fully-rectangular black-fill button — 0px border-radius, 256px wide, 48px tall, 15x30 padding, with 18px / 900-weight uppercase Proxima Nova text at 1.5px tracking. The choice is editorial rather than tactile: the rectangle reads as a magazine caption-block, not a soft tappable bubble, and reinforces the brand's positioning as fashion-adjacent rather than tech-app. Of 125 captured radii in the page, only 2 are 4px (form inputs) and 123 are 50% (circular swatches and avatars). The rest of the system — buttons, cards, panels — sits at 0px corners."
    - id: "italic-display"
      title: "What is the italic 'Alo Softcraft Capsule' moment?"
      answer: "On the lead product band, a single editorial card overlays the hot-pink photograph with 'Alo Softcraft Capsule' rendered in Proxima Nova italic at 32px / weight 400 with 35.2px line-height and normal tracking — the only italic moment in the typography system. The card sits on a warm beige overlay roughly #f1eee8, with body copy beneath set in 16px / 400 cream Proxima Nova. The italic display breaks the otherwise all-uppercase tracked-out display tier with a magazine pull-quote treatment; it appears exactly twice in the captured page (the Softcraft Capsule card and the 'Traveling Pants, Upgraded' band) and nowhere else."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own activewear marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Alo's specific moves: full-bleed photography per band, monochrome chrome (no brand color in buttons or page surrounds), rectangular not pill-rounded CTAs at 0px radius, uppercase Proxima Nova at weights 500-900 with positive tracking, and the discipline of keeping every accent color inside the photography rather than in the chrome. The token references resolve cleanly without invention. The one move worth borrowing only if you sell visual product is the photography-as-voltage rule — most SaaS sites lack imagery rich enough to carry this approach, but for fashion, lifestyle, hospitality, or wellness it is the move."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  ink-soft: "#404040"
  ink-warm: "#605e5c"
  canvas: "#ffffff"
  surface-1: "#ececec"
  hairline: "#ececec"
  muted: "#767676"
  disabled: "#a3a3a3"
  highlight-pink: "#fe87bc"
  highlight-rose: "#ebbfc7"
  highlight-medium: "#ceb18f"
  highlight-cream: "#e5dac6"
  accent-navy: "#01305c"
  accent-medium: "#7183b0"
  accent-soft: "#a8b6d1"
  accent-dark: "#384669"
  brand-clay: "#442b19"
  brand-mauve: "#846080"

typography:
  display-xl:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 72px
    letterSpacing: "-1.8px"
  display-lg:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: "-0.96px"
  display-italic:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 35.2px
    letterSpacing: 0
  label-lg:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 23.94px
    letterSpacing: 0.9px
  label-md:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 19.6px
    letterSpacing: 0.7px
  body-md:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0.352px
  body-md-bold:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22.4px
    letterSpacing: 0.352px
  body-sm:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0.308px
  caption:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0.48px
  caption-upper:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "\"proxima-nova\", Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 900
    lineHeight: 18px
    letterSpacing: 1.5px

rounded:
  none: "0px"
  sm: "4px"
  full: "9999px"
  circle: "50%"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "9px"
  base: "12px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "70px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "15px 30px"
    height: "48px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "15px 30px"
    height: "48px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "16px 24px"
    height: "53px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px 16px"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  editorial-card:
    backgroundColor: "{colors.highlight-cream}"
    textColor: "{colors.ink-warm}"
    typography: "{typography.display-italic}"
    rounded: "{rounded.none}"
    padding: "24px"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-inverse:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
  caption-strip:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    padding: "9px 0px"
  category-label:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.label-lg}"
    padding: "8px 0px"
  product-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "0"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0"
  color-swatch:
    backgroundColor: "{colors.surface-1}"
    rounded: "{rounded.circle}"
    padding: "0"
    height: "18px"
    borderColor: "{colors.muted}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
    height: "26px"
    borderColor: "{colors.muted}"
  promo-banner:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption-upper}"
    padding: "9px 16px"
---

## Overview

Alo Yoga's marketing site inverts the activewear convention. **Photography as voltage**: where Lululemon overlays gradient washes on its hero imagery and where Outdoor Voices paints colored blocks behind its lifestyle shots, Alo runs each band as a full-bleed photograph against a pure white canvas (`{colors.canvas}` — #ffffff) with the surrounding chrome stripped to monochrome. The brand voltage — hot pink (`{colors.highlight-pink}` — #fe87bc), dusty rose (`{colors.highlight-rose}` — #ebbfc7), sage cream (`{colors.highlight-medium}` — #ceb18f), denim navy (`{colors.accent-navy}` — #01305c) — appears only inside the photographs themselves and inside product-tile color swatches. Outside those two contexts the system uses only black, white, and warm grey. The chrome trusts the imagery to do every chromatic job.

The single non-photographic typographic shout is the **rectangular black CTA**: 256px wide, 48px tall, 0px border-radius, filled with `{colors.ink}` (#000000) and carrying 18px / weight-900 uppercase Proxima Nova at 1.5px tracking. Where most DTC apparel brands wrap their primary CTA in a soft pill — capsule corners, rounded warmth, tactile bubble — Alo runs a perfect rectangle that reads more like a magazine caption-block than a tap target. Of 125 captured corner-radii in the page, only 2 are 4px (the search input field) and 123 are 50% (the color swatches and avatar circles); the remaining UI sits at 0px corners, which is the system's structural posture: editorial, not app-like.

The typography is Proxima Nova across every tier, used at five distinct weights (400, 500, 600, 700, 900). The display tier is dual-track: an editorial all-uppercase 60px / 700 / -1.8px tracking hero, and a single italic moment at 32px / 400 on the Softcraft Capsule card that breaks the otherwise tracked-out uppercase rhythm with a magazine pull-quote treatment. Body sits at 16px / 400 with 0.352px positive tracking; category labels run 18px uppercase / 500 with 0.9px tracking. There is no serif tier, no second font family, no system-ui escape hatch — Proxima Nova does every job, with weight and tracking carrying the hierarchy.

**Key Characteristics:**
- Pure white canvas (`{colors.canvas}` — #ffffff) with full-bleed photography per band; the chrome around the imagery is strictly monochrome (`{colors.ink}` and grey-tone neutrals).
- Rectangular black CTA (`{component.button-primary}`) at 0px border-radius, 256x48px, 18px / 900-weight uppercase Proxima Nova with 1.5px tracking — the single typographic shout on the page.
- Proxima Nova across every tier in five weights (400/500/600/700/900). No second family, no serif, no system-ui fallback in the chrome.
- Italic editorial card moment (`{component.editorial-card}`) at 32px / 400 italic on warm cream — the only italic in the system, reserved for product-capsule pull-quotes ("Alo Softcraft Capsule", "Traveling Pants, Upgraded").
- Tracked-out uppercase labels (`{typography.label-lg}` at 18px / 500 / 0.9px tracking; `{typography.label-md}` at 14px / 600 / 0.7px tracking) for every category strip, navigation chip, and product-collection title.
- Pill-or-circle radius scale — 123 of 125 captured radii are 50% (color swatches, avatars), 2 are 4px (form inputs). Every other surface sits at 0px.
- Hot pink (`{colors.highlight-pink}` — #fe87bc) and sage cream (`{colors.highlight-medium}` — #ceb18f) appear only inside photography and color-swatch dots, never as button fills or chrome surfaces.
- 8/9/16/24/32px spacing module — base unit of 8-9px, with 70px and 408px outliers used for hero overlays and section padding.

## Colors

### Structural

- **Ink** (`{colors.ink}` — #000000): frequency 2075. Used as text (1084), border (958), background (24), gradient (9). The dominant tone in the system — every line of body copy, every product caption, every nav link, every hairline divider. Wired in CSS as `--primary`. The system has no near-black variant; #000000 is the single ink color.
- **Ink Soft** (`{colors.ink-soft}` — #404040): frequency 8. Used as text and border on Osano cookie-banner controls. Wired as `--mine`. Reserved for the consent overlay and accessibility chrome.
- **Ink Warm** (`{colors.ink-warm}` — #605e5c): frequency 54. Used as text (25), border (25), background (3). The secondary text tone — caption rows, product metadata, "View all" link strips. Wired as `--chicago`.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 360. Used as background (57), border (141), text (140), gradient (22). The page floor and the inverse text color on photography overlays.

### Surface and hairline

- **Surface-1 / Hairline** (`{colors.surface-1}` — #ececec): frequency 156. Used as border (123) and background (28). The single hairline tone for product-card dividers, swatch outlines, and the muted cream surfaces beneath promotional bands. Wired as `--smoke`, `--alert-light`, `--highlight-light`.
- **Muted** (`{colors.muted}` — #767676): frequency 1, used as the search-input border. The form-field outline tone.
- **Disabled** (`{colors.disabled}` — #a3a3a3): frequency 2. Used as background (1) and border (1). Wired as `--dawn` — the disabled-toggle surface.

### Brand (in-photography only)

- **Highlight Pink** (`{colors.highlight-pink}` — #fe87bc): frequency 9, all as background within image overlays. The hot pink of the Softcraft Capsule and the lead activewear shots. Not a chrome color — appears only inside photography frames and as a color-swatch dot beneath the matching product tile.
- **Highlight Rose** (`{colors.highlight-rose}` — #ebbfc7): frequency 3 background. The dusty rose used on softer product shots and swatch dots.
- **Highlight Medium** (`{colors.highlight-medium}` — #ceb18f): frequency 13. Used as background (8), gradient (5). The sage cream wired as `--highlight-medium` — used on the "Alo Softcraft Capsule" editorial card as a warm-tinted overlay behind the italic display text.
- **Highlight Cream** (`{colors.highlight-cream}` — #e5dac6): frequency 4. Used as background. Wired as `--sand`, `--success-light` — the soft-beige tone behind editorial pull-quotes.

### Accent

- **Accent Navy** (`{colors.accent-navy}` — #01305c): frequency 7, all as background. A deep denim navy used inside specific product imagery (denim capsule, men's outerwear shots). Not declared as a CSS variable; reads as the deepest non-black tone the page exposes.
- **Accent Medium** (`{colors.accent-medium}` — #7183b0): frequency 0 in the captured render but declared as `--accent-medium`. Reserved for in-imagery overlays and out-of-stock badge variants.
- **Accent Soft** (`{colors.accent-soft}` — #a8b6d1): frequency 4 background. The pale blue-grey used on cooler-toned product photography.
- **Accent Dark** (`{colors.accent-dark}` — #384669): frequency 0 in capture but declared as `--accent-dark`. Reserved for in-imagery dark-tone variants.

### Photo-derived warm tones

- **Brand Clay** (`{colors.brand-clay}` — #442b19): frequency 3 background. The brown-clay tone of leather-detail product imagery.
- **Brand Mauve** (`{colors.brand-mauve}` — #846080): frequency 3 background. The dusty mauve of the wellness-band photography.

## Typography

### Font Family

The system runs **Proxima Nova** for every typographic tier — display, heading, body, button, label, caption. Wired in CSS as `--primary-font: "proxima-nova", Helvetica, sans-serif`. There is no second family, no serif tier, no monospace voice. Five weights carry the entire hierarchy: 400 for body text and the single italic display moment, 500 for tracked-out uppercase labels, 600 for product-tile emphasis and h3 displays, 700 for the hero h2 at 60px, and 900 for the single rectangular black CTA at 18px uppercase.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 700 | 72px | -1.8px | Hero h2 ("First time at ALO?") on photography overlay |
| `{typography.display-lg}` | 32px | 600 | 40px | -0.96px | Section h3 uppercase ("THE PIECES EVERYONE WEARS") |
| `{typography.display-italic}` | 32px | 400 | 35.2px | 0 | Editorial card italic ("Alo Softcraft Capsule") — only italic in the system |
| `{typography.label-lg}` | 18px | 500 | 23.94px | 0.9px | Uppercase category labels (h6 / span) |
| `{typography.label-md}` | 14px | 600 | 19.6px | 0.7px | Uppercase sub-section labels |
| `{typography.body-md}` | 16px | 400 | 22.4px | 0.352px | Default running text |
| `{typography.body-md-bold}` | 16px | 600 | 22.4px | 0.352px | Body emphasis, product titles |
| `{typography.body-sm}` | 14px | 400 | 19.6px | 0.308px | Caption rows, secondary copy |
| `{typography.caption}` | 12px | 400 | 16.8px | 0.48px | Footnote and legal strips |
| `{typography.caption-upper}` | 12px | 400 | 16px | 0 | Promo-banner top strip, uppercase metadata |
| `{typography.button-md}` | 18px | 900 | 18px | 1.5px | The single rectangular CTA label, uppercase tracked |

### Principles

The display tier is **dual-track**: a tracked-tight hero at 60px / weight 700 / -1.8px tracking on photography overlays, and a single italic moment at 32px / weight 400 / 0 tracking on the editorial card. Everything else in the display tier is uppercase. Body text runs at 16px / 400 with 0.352px positive tracking — wider than typical web body copy, which carries the editorial-magazine voice through into running prose. The 18px / 500 / 0.9px tracked uppercase label tier does the work that a small-caps treatment would do in a print-magazine layout.

The button-md token at 18px / weight 900 / 1.5px tracking is the heaviest typographic moment in the system — heavier than the hero display itself. The choice is intentional: the rectangular black CTA needs to read with maximum confidence against the photography it sits on top of, and weight 900 with extreme tracking is the loudest call-to-action treatment the brand uses anywhere.

### Note on Font Substitutes

Proxima Nova is a licensed family. The closest open-source substitute is **Montserrat** at the same weights — the proportions transfer cleanly and Montserrat carries the same tracked-out uppercase character at 18px / 500. For body text, **Inter** at the same weights reads slightly tighter and may need +5% letter-spacing to match Proxima Nova's 0.352px tracking. The declared fallback is Helvetica.

## Layout

### Spacing System

- **Base unit:** 8-9px (the dominant gap value, appearing 28 and 41 times respectively in the captured render).
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 9px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 70px.
- **Section padding (vertical):** ~70px between major bands, with 408px-tall hero overlays appearing 5 times in the captured page.
- **Card internal padding:** 0 on product tiles (the photograph fills edge-to-edge), 24px on editorial cards.
- **Top-nav padding:** ~16px vertical, with 53px total nav-link height.

### Grid & Container

- **Hero bands:** full-bleed photography, edge-to-edge at viewport width.
- **Product grid:** 4-column at desktop showing model-photographed product tiles with a 9px gap between cells.
- **Logo / category strips:** typically 2-up to 4-up rows of full-bleed image cells with thin caption strips between them.
- **Editorial overlay cards:** centered within the photography band at ~668px width, with the italic display text plus a body paragraph.

### Rhythm

The page is a **vertical magazine grid** — each band is either a single full-bleed photograph (lead capsule shots, lookbook bands, lifestyle stories) or a 2-to-4-up product grid where each cell is itself a cropped model shot. There are no atmospheric gradients between bands, no decorative dividers, no surface-color shifts. The transition between bands is a thin band of `{colors.canvas}` white space (typically 24-32px) and a small uppercase category label centered above the next photograph. The rhythm alternates between immersive (full-bleed lookbook) and dense (4-up product grid), but never sits in between.

## Elevation

The system has essentially **no shadow tier** in the marketing chrome. Shadows declared in CSS (`--shadow-level-1` through `--shadow-level-4`) carry small box-shadow definitions for the cookie banner and dropdown surfaces, but the captured page renders with 0 shadow occurrences across all rendered colors. Hierarchy comes from photography contrast — a model on a white floor pops against the canvas; a dark-background product shot sits adjacent to a light one with a thin hairline between them.

- **Flat (no shadow):** every product tile, every hero, every editorial card, every nav surface — 100% of the page.
- **Photography contrast:** depth is created by the imagery itself; the chrome around the photography is flat.
- **Hairline outlines:** `{colors.surface-1}` (#ececec) marks dividers between product cells and outlines color swatches.

## Shapes

The radius scale is **rectangle-or-circle**, with almost nothing in between:

- `{rounded.none}` 0px — the dominant surface treatment. Every button, every card, every hero, every editorial overlay. The rectangle is the system's structural posture.
- `{rounded.sm}` 4px — appears exactly 2 times in the captured render, on the search input field corners.
- `{rounded.circle}` 50% — 123 of 125 captured radii. Used on color swatches beneath every product tile, on avatar dots in the customer-photo carousel, and on circular icon buttons in the top nav.
- `{rounded.full}` 9999px — declared for any pill-shaped chip variants but not visible in the captured marketing chrome.

There is no 8 / 12 / 16 / 24px middle tier. The system is binary: surfaces are rectangles, decorative dots are circles. The choice keeps the brand voice editorial — a soft pill on the CTA would tip the page toward app-like warmth and away from the magazine-grid posture.

## Components

**`button-primary`** — The signature CTA. Black `{colors.ink}` fill, white text, `{rounded.none}` 0px radius, 15x30 padding, 48px height, 256px wide. 18px / weight 900 uppercase Proxima Nova at 1.5px tracking. The single most assertive element on the page, sitting at the foot of hero photography overlays.

**`button-secondary`** — White `{colors.canvas}` fill, black text, 1px `{colors.ink}` border. Same 48px height and rectangular `{rounded.none}` shape as the primary. Used for "Sign In" / secondary actions in modals.

**`top-nav`** — White `{colors.canvas}` surface, 53px height, ~16px horizontal padding. The Alo wordmark flush left, category links (NEW, MEN, WOMEN, ACCESSORIES, ABOUT) horizontally centered, and the account / cart icons flush right. No bottom hairline divider — the nav sits flush against the photography band beneath.

**`nav-link`** — Transparent background, black text at `{typography.body-md}` (16px / 400). 16px horizontal padding. No hover-state fill visible in the captured chrome.

**`hero-heading`** — White text on photography overlay, `{typography.display-xl}` (60px / 700 / -1.8px tracking). 0 padding — sits as text directly on the photograph rather than inside a contained box.

**`section-heading`** — Black `{colors.ink}` text, `{typography.display-lg}` (32px / 600 / -0.96px tracking, uppercase). Used for "THE PIECES EVERYONE WEARS", "POPULAR WITH NEW ARRIVALS", "SHOP THE LOOK" category headings.

**`editorial-card`** — Cream `{colors.highlight-cream}` (#e5dac6) or pink-tinted fill overlaid on photography, with `{typography.display-italic}` (32px / 400 italic) display text and `{typography.body-md}` body paragraph. The single italic moment in the system. Used twice: the Softcraft Capsule card and the "Traveling Pants, Upgraded" band.

**`body-paragraph`** — Black `{colors.ink}` text at `{typography.body-md}` — the workhorse running-text style.

**`body-paragraph-inverse`** — White `{colors.canvas}` text variant used on photography overlays and the black promo-banner strip.

**`caption-strip`** — Black text at `{typography.label-md}` (14px / 600 uppercase / 0.7px tracking). 9px vertical padding. Used beneath product photography for category labels ("WOMEN'S", "MEN'S", "BESTSELLER").

**`category-label`** — Black text at `{typography.label-lg}` (18px / 500 uppercase / 0.9px tracking). The larger category-header treatment used as section dividers.

**`product-tile`** — White `{colors.canvas}` background, 0 padding, `{rounded.none}` 0px radius. The product imagery fills the tile edge-to-edge with a single thin caption row below (product title at `{typography.body-sm}`, price at `{typography.body-md-bold}`, color swatches at `{component.color-swatch}` below that).

**`hero-band`** — Full-bleed `{colors.canvas}` background that hosts edge-to-edge photography. 0 padding, 0 border-radius. The structural container for every immersive image band.

**`color-swatch`** — Circular `{rounded.circle}` (50%) dot, ~18px diameter, with a 1px `{colors.muted}` border. Fills with the product-variant color (which lives outside the brand palette — pulled from the actual garment color). Appears in horizontal rows of 3-5 swatches beneath each product tile.

**`text-input`** — White `{colors.canvas}` fill, black text, `{rounded.sm}` 4px radius (the only non-zero rectangular radius in the system), 1px `{colors.muted}` border, 4x8 padding, 26px height. The search input is the canonical instance.

**`promo-banner`** — Black `{colors.ink}` fill, white text in `{typography.caption-upper}` (12px / 400 uppercase). 9x16 padding. The persistent top-of-page strip carrying free-shipping and rewards-program callouts.

## Do's and Don'ts

**Do** keep every brand color inside photography or color-swatch dots. The chrome around the imagery is strictly monochrome — black, white, warm grey. Reaching for `{colors.highlight-pink}` (#fe87bc) as a CTA fill or `{colors.accent-navy}` (#01305c) as a nav background would break the photography-as-voltage rule that defines the system.

**Do** render the primary CTA as a perfect rectangle. `{rounded.none}` 0px corners on a 256x48 black block with 18px / weight 900 uppercase text is the canonical signature. Softening the corners to even a 4px radius shifts the read from editorial-magazine to consumer-app and weakens the brand's fashion-adjacent positioning.

**Do** use the italic display moment (`{typography.display-italic}`) only on editorial-capsule pull-quotes. The italic is the single non-uppercase display treatment in the system; using it for product titles or section headers dilutes the magazine-card effect.

**Do** track out every uppercase label with positive letter-spacing — 0.9px on 18px labels, 0.7px on 14px labels. The tracked-out uppercase is the system's signature for navigation and category strips; tight-set uppercase reads as a different brand voice entirely.

**Don't** use `{colors.surface-1}` (#ececec) as a button background or text color — it is a border-only token (123 of 156 occurrences are borders). For light surfaces use pure `{colors.canvas}` white; the system has no muted-surface tier.

**Don't** introduce an 8 / 12 / 16 / 24px middle radius tier. The system is binary — rectangles (0px) and circles (50%). Adding a soft-pill radius for buttons makes the page feel like an app rather than a magazine, which is the opposite of the brand's typographic intent.

**Don't** layer atmospheric gradients between bands. Every section terminates on the same `{colors.canvas}` white floor; depth comes from photography contrast and from the hairline divider between cells, not from background-color shifts.

**Don't** mix Helvetica or Arial weights with Proxima Nova in the running chrome. The system declares Helvetica as the fallback only — every visible body, label, button, and display in the captured page renders Proxima Nova. Mixing typefaces would break the single-family discipline that carries the entire hierarchy.

## Known Gaps

- **Hover and focus states:** the captured marketing chrome documents resting states only. Hover fills, focus rings, active-press tints, and disabled treatments for `{component.button-primary}` and `{component.nav-link}` are not captured.
- **Form input error states:** `{component.text-input}` carries the resting state. Validation, error, and success styling lives inside the product checkout flow which is not exposed in the captured marketing page.
- **Dark mode:** the captured surfaces are light-only. The Osano consent overlay uses a dark deep-violet variant for its background, but a brand dark mode is not represented in the chrome itself.
- **Motion:** product carousels and lookbook bands ship with horizontal-scroll transitions; the spec captures end-state values only. Easing curves, autoplay timing, and parallax depth on hero photography live in the live page runtime.
- **Localized variants:** the captured page is the Hebrew (he-il) locale, which renders right-to-left. Direction-sensitive components (top-nav, product tiles, caption strips) carry locale-specific layout adjustments not exposed in the token spec.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The PDP (product-detail page), checkout, account, and rewards-program surfaces carry richer state matrices, filter UI, and form chrome that are not represented here.
- **In-photography typography:** lookbook bands include in-image typography (model-quote overlays, lookbook-name captions baked into the photograph) — these are illustrator-set rather than rendered HTML and live outside the token system.