Alo Yoga Design System

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

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.