What is Aritzia's primary brand color?

Aritzia does not run a saturated brand voltage. The dominant token is pure black (`#000000`, declared in `--gle-black`) at 523 total occurrences split exactly 258 text / 258 border / 6 background / 1 shadow — never a graphite or a warm gray. The surface counterpart is pure white (`#ffffff`, declared in `--gle-white`) at 178 occurrences, also used as on-ink text against black hero overlays. The only saturated hex declared in the `:root` cascade is `#db1215` (`--gle-red`), which appears 0 times in the captured chrome — it is a validation-error escape hatch, never a chrome color. The primary CTA is a pure-black-on-white rectangle with `0px` corners, not a saturated fill.

What typography does Aritzia use, and what should I substitute if Non-Seasonal Geo is unavailable?

Aritzia runs a single proprietary grotesque, Non-Seasonal Geo, declared in `--gle-font-family` and reused across every text role. Body and nav copy sit at 16px / 24px line-height at weight 400; product captions and footer rows drop to 12px / 20px at weight 400 or 500; the uppercase category-cap role runs 12px / 20px at weight 400 with `textTransform: uppercase`; the hero display tier reaches 48px / 56px at weight 400 with `-0.48px` letter-spacing — the only tracking value in the system. If Non-Seasonal Geo is unavailable, the closest open substitutes are Söhne (Klim Type Foundry) and Inter at weight 400/500 — both keep the geometric proportions with similar x-height. Preserve the `-0.48px` negative kerning on the 48px hero tier verbatim; it is the only typographic flourish in an otherwise neutral system.

Why does Aritzia use 0px corners almost everywhere?

The captured radius vocabulary is effectively two values: `0px` on every interactive surface (the primary CTA at `borderRadius: 0px`, the newsletter input at `0px`, every product tile at `0px`, the top-nav at `0px`) and a single `24px` token on the announcement-bar pill at the top of the viewport. There is no `4px`, `8px`, or `12px` softened-corner state in the captured chrome. The right-angle geometry inherits from print fashion editorial layouts — softening to a `4px` or `8px` corner anywhere on the merchandising chrome would push the brand toward generic e-commerce-template territory. The 24px pill on the announcement bar is the system's deliberate exception — one rounded element against a 19-component right-angle baseline.

When should I use `#db1215`, the red declared in `--gle-red`?

Red `#db1215` is a scoped validation-error voltage, not a general-purpose accent. The hex is declared in `--gle-red` but appears 0 times in the captured homepage chrome — its `text`, `bg`, `border`, `shadow`, and `gradient` counts are all zero. Reserve it for inline form-validation messages (`Email is required`), out-of-stock badges on the PDP, and the cart-error toast surface. Never use it as a CTA fill, never as a heading color, never as a hairline. The whole reason it works is that the rest of the chrome is pure black, pure white, and one mid-gray — the moment the red spreads to a second component, the validation signal becomes ambient decoration.

What spacing rhythm does Aritzia use?

The page is locked to a multiples-of-four rhythm with no half-step exceptions. Eight `--q438jj*` tokens ladder up the scale: `--q438jj0` (`0px`), `--q438jj1` (`4px`), `--q438jj2` (`8px`), `--q438jj3` (`12px`), `--q438jj5` (`24px`), `--q438jj6` (`32px`), `--q438jj7` (`40px`), `--q438jj8` (`48px`), `--q438jj9` (`64px`), `--q438jja` (`80px`), `--q438jjb` (`96px`), `--q438jjc` (`128px`), `--q438jjd` (`192px`). Dominant rhythm in the extracted CSS is `8px` (28 occurrences) and `48px` (9), followed by `24px` (8), `16px` (6), and `4px` (6). The newsletter input padding lands at `22px 8px 6px` — asymmetric vertical breathing room to accommodate the floating-label affordance above the value text.

Can I use this DESIGN.md to build my own React fashion storefront?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Aritzia's editorial discipline (`0px` corners on every CTA, Non-Seasonal Geo across every tier, pure-black ink, pure-white canvas, the single `24px` announcement pill, the `-0.48px` hero kerning) rather than a generic apparel theme. Reference tokens directly when you want one specific value: `{colors.ink}` resolves to `#000000`, `{colors.canvas}` to `#ffffff`, `{rounded.none}` to `0px`, `{typography.display-xl}` to Non-Seasonal Geo 48px / 56px / `-0.48px`. The 46px newsletter-input height and the `22px 8px 6px` asymmetric padding are preserved as quoted literals you can paste directly into a `theme.extend` block or a Tailwind v4 `@theme` declaration.

Aritzia Design System

Aritzia's storefront as a DESIGN.md file.

About Aritzia DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source aritzia.com

E-commerce & Retail

Aritzia's storefront reads as a print fashion editorial rendered for the browser. The canvas is pure `#ffffff`, the ink is pure `#000000` (523 occurrences split exactly 258 text / 258 border / 6 background / 1 shadow), and the only chromatic moment in the entire `:root` cascade is the `#db1215` error red declared in `--gle-red` — a token that doesn't appear once in the captured homepage chrome at rest. Type runs a single proprietary grotesque, Non-Seasonal Geo, declared in `--gle-font-family` and reused across every role from 12px nav caps to a 48px / 56px display tier; the only tracking value in the system is the `-0.48px` negative kerning on the hero display. The right-angle geometry is broken exactly once: a 24px-radius pill on the announcement-bar element.

This page packages the storefront into a DESIGN.md file written to the Google Labs open spec. Inside: 19 color tokens grouped into ink, surface, hairline, grade, and semantic layers; 9 Non-Seasonal Geo typography roles spanning 12px caps to 48px display; a 4-step radius vocabulary that's effectively `0px` everywhere and `24px` on one pill; an 8-step spacing scale anchored on the observed `--q438jj0` through `--q438jjd` cascade (`0`, `4px`, `8px`, `12px`, `24px`, `32px`, `40px`, `48px`, `64px`, `80px`, `96px`, `128px`, `192px`); and 19 component entries covering the announcement bar, the top nav, the mega-menu drawer, the hero overlay band, the editorial 3-up, the product tile, the newsletter input, and the footer link column.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Aritzia's editorial discipline — pure-white canvas, pure-black ink, hard-cornered CTAs, the single Non-Seasonal Geo grotesque across every tier, the `-0.48px` hero kerning — instead of inventing a pillowed apparel template with rounded chrome and a beige accent. Reference tokens directly in Tailwind config or CSS variables when you want a specific value; every hex, font, radius, and spacing literal is preserved verbatim from the extracted `--gle-*` and `--q438jj*` cascade. The reason this system rewards study is that most women's-fashion sites soften with pill geometry and a champagne or rose accent to signal warmth — Aritzia ships pure black on pure white, the lone red as a validation token only, and a single proprietary grotesque doing all the work.

What makes it distinct

Mono-grotesque type stackNon-Seasonal Geo handles every role from 12px caps to 48px display, with `-0.48px` tracking reserved for the single hero tier
Pure-black ink at 523 occurrences`#000000` carries 258 text and 258 border hits against 178 `#ffffff` surfaces, the load-bearing chrome contrast
Single-radius vocabulary`24px` appears once on the announcement-bar pill; every CTA, input, product tile, and footer cell holds `0px` corners
Red as escape hatch`#db1215` declared in `--gle-red` reserved entirely for validation errors and never appears in the homepage chrome at rest
Atlas spacing cascadeeight `--q438jj*` tokens (`0` through `192px`) lock the entire page to a multiples-of-four rhythm with no half-step exceptions

Live at aritzia.com

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

aritzia.com

Explore Aritzia

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Aritzia design system FAQ

Common questions about Aritzia'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.

Aritzia — official site

The Vancouver-based women's fashion storefront this DESIGN.md was extracted from on 2026-05-13.

The DESIGN.md specification

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

Use Aritzia in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→