What is Alo Yoga's primary brand color?

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.

What typeface does Alo Yoga use, and what should I use as a substitute?

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.

Why is Alo Yoga's CTA a rectangle instead of a pill?

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.

What is the italic 'Alo Softcraft Capsule' moment?

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.

Can I use this DESIGN.md to build my own activewear marketing site?

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.

Alo Yoga Design System

Alo Yoga's marketing site is a magazine grid where every band is a photograph.

About Alo Yoga DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source aloyoga.com

E-commerce & Retail

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.

What makes it distinct

Photography-as-voltageevery 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 CTAthe 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 displayProxima Nova italic at 32px / 400 on the Softcraft Capsule card breaks the otherwise all-uppercase display tier with a magazine pull-quote
Two type tracksrunning 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 radius123 of the 125 captured radii are 50% (avatars, swatches, color dots); the remaining 2 are 4px on form fields. Everything else is square

Live at aloyoga.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

aloyoga.com

Explore Alo Yoga

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Alo Yoga design system FAQ

Common questions about Alo Yoga's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Alo Yoga — official site

Alo Yoga's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.