---
title: "Alo Yoga design system"
variant: extended
source: https://www.aloyoga.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/aloyoga-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Alo Yoga · Design System

> Quiet monochrome frames an energetic studio-to-street wardrobe.

**Theme:** light · **Industry:** fashion · **Source:** https://www.aloyoga.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Alo Yoga’s homepage pairs a restrained black-and-white storefront with large-scale lifestyle photography of studio-to-street apparel. Spacious editorial sections give way to compact product and category grids, with muted color accents appearing mainly in seasonal merchandising.

## North star

Keep the interface quiet and monochrome so full-bleed lifestyle photography and tightly curated product grids carry the visual energy.

## Overview

The visual system keeps the interface nearly monochrome: white is the dominant canvas, black carries navigation, headings, product details and primary calls to action, while pale gray distinguishes selected lower-page bands and fine boundaries. Color accents such as navy, blue, yellow and green are sparse in the measured interface and read primarily as merchandising cues, not a competing brand palette. Proxima Nova is used throughout, with uppercase navigation and buttons gaining emphasis through tracking and heavier weights; headings remain clean and unornamented. The page alternates full-bleed campaign photography with centered editorial headings, horizontal category imagery and a dense product carousel. Product cards rely on photography, compact labels, price text and small color swatches. Generous white intervals separate major campaigns, while grid areas tighten the pace. The overall effect depends on crisp contrast and image-led storytelling rather than decorative interface effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, white section backgrounds, and reversed text on black primary buttons. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Navigation, headings, product copy, icons, footer, badges, and primary call-to-action backgrounds. |
| Deep Navy | `#01305c` | `--color-deep-navy` | accent | Sparse circular product color swatch; a product option rather than a broad interface color. |
| Soft Fog | `#f0f0f0` | `--color-soft-fog` | surface | Pale gray activity and social gallery bands, subtle borders, and muted interface surfaces. |
| Coastal Blue | `#5993c1` | `--color-coastal-blue` | accent | Rare blue product swatch used to indicate a selectable product color. |
| Warm Graphite | `#605e5c` | `--color-warm-graphite` | neutral | Muted supporting text, secondary to black headings and product links. |
| Butter Light | `#ffe699` | `--color-butter-light` | accent | Small seasonal product-card or swatch accent; not a defining page surface. |
| Merlot Accent | `#84172f` | `--color-merlot-accent` | accent | Rare measured button color, likely a localized product or control accent rather than a site-wide brand color. |
| Sky Tint | `#71c6eb` | `--color-sky-tint` | accent | Occasional product or control accent; keep confined to small selectable color cues. |
| Quiet Silver | `#dedede` | `--color-quiet-silver` | neutral | Minor navigation or button boundary detail; subordinate to the cleaner pale-gray hairlines. |
| Bamboo Sage | `#677566` | `--color-bamboo-sage` | accent | Seasonal Bamboo Green merchandising card color and announcement-strip tone; also echoes campaign imagery. |
| Control Gray | `#767676` | `--color-control-gray` | semantic | Measured input outline detail; use only for restrained form-control boundaries. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Soft Fog) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#605e5c` (Warm Graphite) · `--color-border` → `#f0f0f0` (Soft Fog) · `--color-accent` → `#01305c` (Deep Navy) · `--color-accent-2` → `#5993c1` (Coastal Blue) · `--color-accent-3` → `#ffe699` (Butter Light)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#ffffff` | `#f0f0f0` | 1.14:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#605e5c` | `#ffffff` | 6.46:1 | AA |
| `#605e5c` | `#f0f0f0` | 5.66:1 | AA |
| `#605e5c` | `#000000` | 3.25:1 | AA-large |
| `#01305c` | `#ffffff` | 13.3:1 | AAA |
| `#01305c` | `#f0f0f0` | 11.67:1 | AAA |
| `#01305c` | `#000000` | 1.58:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 50%, 50%, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| proxima-nova | `--font-body` | webfont | 400, 600, 500, 900, 700 | Site-wide type for navigation, headings, product information, links, buttons, captions, and footer content. | Montserrat |

- **proxima-nova:** Use a clean sans-serif voice; navigation and buttons are uppercase with tracked lettering, while heavier weights emphasize calls to action.

### Type scale — Custom (ratio ≈ 2, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.1 | 0 | — | proxima-nova | Campaign and primary page headlines, kept clean and unornamented. |
| body | 16px | 600 | 1.4 | 0.022em | — | proxima-nova | Supporting copy, product details, and general section text. |
| caption | 14px | 400 | 1.4 | 0.022em | — | proxima-nova | Compact product labels, small descriptions, and supporting metadata. |
| button | 18px | 900 | 1 | 0.083em | uppercase | proxima-nova | Primary shopping calls to action; heavy, uppercase, tracked text. |
| nav | 18px | 500 | normal | 0.05em | uppercase | proxima-nova | Uppercase category navigation with moderate tracking. |
| link | 16px | 400 | 1.4 | 0.022em | — | proxima-nova | Product names, shopping links, and footer destinations. |
| eyebrow | 18px | 500 | 1.1 | 0.05em | uppercase | proxima-nova | Uppercase introductory labels above campaign or section copy. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 8, 9, 10, 12, 15, 16, 20, 24, 30, 32, 70 px.
- Section rhythm 70px · element gap 2px · card padding 12px · max content width 1300px.

The page uses a wide desktop storefront with full-bleed campaign imagery alongside centered content and multi-column merchandising grids. The measured maximum page width is 1300px, with a comfortable density and recurring section gaps of 70px. Hero campaigns stretch across the viewport; product and category sections use four- to twelve-column structures, with visible cards arranged in tighter horizontal runs. Headings alternate between centered editorial placement and left-aligned merchandising labels. Preserve generous white intervals between major campaigns, then tighten spacing within product cards and category rows.

## Shape & elevation

- Radius: button `50%`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.3) 0px 3px 5px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The storefront is mostly flat, with white canvas and occasional pale-gray bands providing section changes. Fine borders define quiet control and card details; strong contrast comes from black text and filled CTA buttons rather than shadows. Reserve the measured soft shadow for isolated floating interface elements, not product cards or campaign blocks.

## Imagery

Lifestyle photography dominates: models wear athletic apparel in natural, studio, and street settings. Campaign imagery is often full-width or arranged as adjacent panels; product and category imagery sits in clear card grids. Keep the photography warm and editorial, with natural environments and garments providing the strongest color. There is no defining illustration or 3D treatment; measured seasonal hues should not be mistaken for interface palette.

## Components

### Announcement bar

A narrow sage-green strip above the white header, carrying centered, uppercase shipping-and-returns copy.

### Storefront navigation

White horizontal header with black wordmark, uppercase category links, and compact search, account, favorite, and bag icons.

### Campaign hero

Large image-led campaign assembled from adjacent photographs, with a strong black uppercase campaign label and a black SHOP NEW IN button.

### Category tiles

A horizontal photographic grid with short uppercase category links beneath each image, surrounded by generous white space.

### Product cards

Compact product photography, BEST SELLER badge, product name, color and price details, plus small color-selection swatches.

### Shop-by-color cards

Seasonal color stories pair a model image with a colored caption area, a brief description, and a shopping link.

### Footer

Dense black footer with grouped white links, app and newsletter areas, social icons, and small legal links.

### Measured component styles

- **Primary button** (“SHOP NEW IN”): background #000000 · text #ffffff · radius 0px · padding 15px 30px · 900 18px proxima-nova · uppercase
- **Secondary button**: background #01305c · text #000000 · border 1px solid #ececec · radius 50% · padding 0px · 400 16px proxima-nova
- **Link** (“SHOP NEW IN”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px proxima-nova
- **Input**: transparent background · text #000000 · border 2px inset #767676 · radius 0px · padding 1px 2px · 400 16px proxima-nova
- **Card** (“BAMBOO GREEN Branch out in the freshest ”): background #677566 · text #000000 · radius 0px · padding 12px 8px 16px 12px · 400 16px proxima-nova
- **Badge** (“BEST SELLER”): background #f2f2f2 · text #000000 · radius 0px · padding 4px 8px · 400 12px proxima-nova · uppercase
- **Navigation item** (“WOMEN MEN SHOES ATELIER NEW SIGN IN TO G”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px proxima-nova

## Do

- Use white as the default page canvas.
- Keep headings, navigation, and primary controls black.
- Let editorial apparel photography lead each campaign.
- Alternate full-width imagery with restrained card grids.
- Use uppercase, tracked text for navigation and key CTAs.
- Keep seasonal colors limited to product stories and swatches.

## Don't

- Do not add a bright, persistent interface color.
- Do not decorate the page with gradients or heavy shadows.
- Do not crowd campaign imagery with excess copy.
- Do not turn the layout into a dense dashboard.
- Do not use seasonal card colors as global brand surfaces.
- Do not replace the clean sans-serif typography with a display serif.

## Agent prompt

Build a fashion storefront page in Alo Yoga’s restrained editorial style. Use Gallery White (#ffffff) as the main canvas and Studio Ink (#000000) for navigation, headings, product copy, footer, and primary CTA buttons. Set text in a clean Proxima Nova–like sans serif, using uppercase tracked navigation and bold uppercase CTA labels. Structure the page with a full-width photographic campaign, spacious editorial section breaks, and compact product or category grids. Let lifestyle photography supply most of the color; use Bamboo Sage (#677566), Deep Navy (#01305c), Coastal Blue (#5993c1), or Butter Light (#ffe699) only as localized seasonal merchandising cues. Use Soft Fog (#f0f0f0) for occasional muted section bands. Favor thin boundaries and flat surfaces over shadows. Keep product labels and secondary links compact and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign imagery spans the page in adjacent panels with a bold label and CTA. | campaign entry point, primary shop CTA | large lifestyle photography, black button, uppercase campaign label |
| 2 | category-nav | Centered heading above a four-column row of photographic category tiles. | browse popular categories, direct category links | centered heading, image tiles, uppercase captions |
| 3 | hero | Full-bleed campaign split between apparel imagery and a prominent campaign photograph. | seasonal campaign discovery, shop campaign CTA | editorial photography, black shopping button, large image panels |
| 4 | product-grid | Left-aligned heading above a dense horizontal best-seller product carousel. | browse best sellers, select product color, open product detail | product cards, muted badges, color swatches, price labels |
| 5 | gallery | Five seasonal color-story cards arranged in a horizontal gallery. | browse seasonal colors, shop by color | model photography, colored caption panels, small text links |
| 6 | feature-split | Two side-by-side image-led features with copy and shopping links beneath imagery. | discover fabric story, shop seasonal essentials | paired photography, centered supporting copy, text links |
| 7 | cta | A wide photographic banner with centered messaging and a compact START HERE button. | new-customer onboarding, start-here action | full-width image, overlaid headline, light button |
| 8 | category-nav | Six narrow image categories sit in one row beneath a centered heading on pale gray. | browse by activity, direct category links | pale-gray band, category photographs, uppercase captions |
| 9 | gallery | Centered social heading above a wide multi-column community image gallery on pale gray. | social proof, community discovery | muted section band, multi-column image feed, social handles |
| 10 | footer | Black full-width footer with grouped link columns and app, newsletter, social, and legal areas. | customer support access, newsletter signup, social discovery | inverse black surface, white link groups, email input, social icons |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(24,13,67,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #000000;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #e1e1e1;
--osano-dialog-foreground-color: #404040;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #37CD8F;
--osano-toggle-off-track-color: #a3a3a3;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #758e6d;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #404040;
--osano-button-accept-background-color: #000000;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #a3a3a3;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #000000;
--osano-button-reject-all-background-color-hover: #141414;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #000000;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #37CD8F;
--osano-info-dialog-button-close-color: #FFFFFF;
--osano-info-dialog-toggle-off-track-color: #a3a3a3;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #758e6d;
--osano-info-dialog-button-background-color: #000000;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #ffffff;
--osano-dialog-gpc-background-color: #e1e1e1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/aloyoga-com