---
version: alpha
name: Aritzia
description: "Everyday luxury as pure editorial: black, white, and a single red, letting the photography be the whole design."
colors:
  primary: "#DB1216"
  surface: "#FFFFFF"
  on-surface: "#000000"
  mist: "#F4F4F4"
typography:
  micro:
    fontFamily: Non-Seasonal Geo
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.06em
  caption-nav:
    fontFamily: Non-Seasonal Geo
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.04em
  body:
    fontFamily: Non-Seasonal Geo
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: Non-Seasonal Geo
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  buttons-tiles-images-cards: 0px
  pill-button-variant: 24px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px
  6xl: 192px
---
# Aritzia — Style Reference
> Everyday luxury as pure editorial: black, white, and a single red, letting the photography be the whole design.

**Theme:** light

Aritzia's system is an exercise in near-total restraint — the design gets out of the way so the photography can be the brand. The palette is essentially three values: black `#000000`, white `#FFFFFF`, and a soft light-grey `#F4F4F4` for the quiet secondary bands, with one saturated red `#DB1216` held in reserve for sale flags and alerts. There is no accent gradient, no color storytelling; the color comes entirely from the full-bleed campaign imagery — warm studio wood, denim, the amber sun of a "Sale's Going Fast" banner. Type is a single custom face, `Non-Seasonal Geo`, a refined geometric grotesque set small, spaced, and often uppercase — the wordmark, the nav, the "Everyday Luxury®" signature all sit in it at just 10–24px. Edges are overwhelmingly sharp (0px), the fashion-editorial default, with a lone 24px pill reserved for a specific button treatment and circles (50%) for avatars. The one shadow in the system is a subtle `0 2px 4px rgba(0,0,0,0.5)` on floating overlays. The whole effect is a luxury lookbook: white space, big images, tiny confident type, and nothing to distract from the clothes.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#FFFFFF` | `--color-bg` | The page and primary surface — the gallery wall the photography hangs on. |
| Black | `#000000` | `--color-text` | All type, the wordmark, borders, the dark footer and full-bleed dark bands. |
| Mist | `#F4F4F4` | `--color-surface` | The soft light-grey secondary band — editorial blocks and quiet sections that lift a hair off white. |
| Aritzia Red | `#DB1216` | `--color-accent` | The single accent — sale pricing, "% Off" flags, urgent/alert text. Used sparingly, never decoratively. |

## Tokens — Typography
### Non-Seasonal Geo — the entire brand voice; a custom geometric grotesque set small, spaced and often uppercase · `--font-sans`
- **Substitute:** "Non-Seasonal Geo", "Founders Grotesk", "Aktiv Grotesk", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif
- **Weights:** 400 (regular — body, nav, captions), 500 (medium — the wordmark, buttons, emphasis)
- **Sizes:** 10, 12, 16, 24px
- **Line height:** ~1.2–1.4; tight and even
- **Letter spacing:** slightly open, especially on the uppercase wordmark and nav (≈ +0.04–0.1em)
- **Role:** Does everything. The face is deliberately quiet and small — luxury is signalled by restraint and spacing, not by size. Note how little type there is: the imagery carries the page, and the type merely labels it.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro | 10px | 1.4 | +0.06em | `--text-micro` |
| Caption / Nav | 12px | 1.3 | +0.04em | `--text-caption` |
| Body | 16px | 1.4 | 0 | `--text-base` |
| Heading | 24px | 1.2 | +0.02em | `--text-lg` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** airy

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--space-1` |
| xs | 8px | `--space-2` |
| sm | 12px | `--space-3` |
| md | 16px | `--space-4` |
| lg | 24px | `--space-6` |
| xl | 32px | `--space-8` |
| 2xl | 48px | `--space-12` |
| 3xl | 64px | `--space-16` |
| 4xl | 96px | `--space-24` |
| 5xl | 128px | `--space-32` |
| 6xl | 192px | `--space-48` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, tiles, images, cards | 0px (sharp — the editorial default) |
| Pill button variant | 24px |
| Avatars / circular badges | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Overlay | `0 2px 4px 0 rgba(0,0,0,0.5)` | `--shadow-overlay` |

The only shadow in the system — a subtle lift for floating overlays (dropdowns, the "Picked Just For You" flyout). Resting surfaces are flat.

### Layout
- **Grid:** Full-bleed edge-to-edge imagery in 1- and 2-up blocks; almost no side margin on the hero.
- **Section rhythm:** Large image blocks stacked with minimal gaps (often 0), interrupted by generous white space around type.
- **Spacing scale reaches large:** 96–192px gaps frame the editorial breaks.
- **Element gap:** 8–24px within nav and label groups.

## Components
### Wordmark
**Role:** The brand's primary identity, top-center or top-left.
"ARITZIA" in `Non-Seasonal Geo` 500, uppercase, letter-spaced, black on white (reversing to white on the dark footer). No mark, no icon — the spaced wordmark is the whole logo.

### Primary Button ("Shop Now")
**Role:** The call to action beneath an editorial block.
Two treatments: (1) a sharp 0px white `#FFFFFF` block with `#000000` label, 12px/500 uppercase, generous 14px/42px padding; (2) a 24px pill variant in the same white-on-black-context treatment. Flat, no border, no shadow.

### Text Link / Nav Item
**Role:** Navigation and inline links.
`Non-Seasonal Geo` 12px, 400 (500 for emphasis), `#000000` on light and `#FFFFFF` on dark imagery/footer. No underline at rest; spacing and case do the work. Nav sits as a slim uppercase row (New · Clothing · Dresses · Activewear · Sweatfleece · Accessories & Shoes · Discover · Sale).

### Search Input
**Role:** Site search in the header overlay.
Transparent fill over imagery, a single `1px solid #000000` underline/border, `#FFFFFF` text at 16px, 8px/24px padding. Minimal and unboxed — a line, not a field.

### Editorial Image Block
**Role:** The primary content unit and the real hero.
Full-bleed campaign photography, sharp 0px corners, edge-to-edge or 2-up. A short overlaid label ("Sweatfleece", "T-Shirts & Tanks", "Late Sun", "Wedding Guest Dresses") in `Non-Seasonal Geo` sits bottom-left in white or black depending on the image. The image is the design; the type is a caption.

### Sale Flag
**Role:** Marks a promotion or reduced price.
`Aritzia Red` `#DB1216` type — the only place saturated color appears in the chrome — on "40–60% Off" and sale pricing. Small, urgent, and rare.

### Product Card
**Role:** A single product in a "Picked Just For You" rail.
Sharp 0px image on white, a `#000000` name at 12px/400 and a price beneath (red `#DB1216` if on sale). No border, no shadow, no fill — the product photo on white is the entire card.

### Footer
**Role:** Global navigation and brand sign-off.
Full-width `#000000` band, reversed white type, dense uppercase link columns (Aritzia · Get Help), app-store badges, and the "Everyday Luxury®" signature in `Non-Seasonal Geo`.

## Do's and Don'ts
### Do
- Let full-bleed photography carry the page; keep the chrome to black, white, and `#F4F4F4` grey.
- Set type in `Non-Seasonal Geo`, small and spaced — 10–24px, uppercase for the wordmark and nav. Restraint reads as luxury.
- Reserve red `#DB1216` for sale flags and pricing only — it is the single note of color and must stay rare.
- Default to sharp 0px corners on images, tiles, and buttons; the editorial crispness is the brand.
- Use the light-grey `#F4F4F4` band to separate editorial sections without introducing a second color.
- Keep buttons flat: white or black fills, no borders, no shadows (the lone shadow is for floating overlays).
- Give the page air — 96–192px breaks around type let the images breathe.

### Don't
- Don't introduce accent colors beyond the red; the palette is intentionally monochrome so the clothing supplies the color.
- Don't round images or product tiles — soft corners break the sharp editorial language (the 24px pill is a deliberate, isolated exception).
- Don't promote the red into a decorative brand color; it means "sale," nothing else.
- Don't shadow resting surfaces or add gradients — everything is flat ink and paper.
- Don't set type large and heavy; Aritzia's confidence is in small, quiet, well-spaced letters, not scale.
- Don't crowd the imagery with UI — labels are captions, not chrome.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | White | `#FFFFFF` | The page and primary gallery surface. |
| 1 | Mist | `#F4F4F4` | Soft secondary bands and editorial sections. |
| — | Black | `#000000` | Full-bleed dark bands and the footer. |

## Elevation
There is almost no elevation. Surfaces are flat planes of white, grey, and black; separation is done with the change of tone or, more often, with the edge of a photograph. The single exception is a subtle `0 2px 4px rgba(0,0,0,0.5)` shadow on genuinely floating overlays — the account/search flyout and dropdown menus — which need to detach from the imagery beneath. Everything else — buttons, cards, editorial blocks — sits flush, deriving structure from the grid and the crisp 0px edges rather than from any z-axis. The brand's depth comes from photographic layering, not UI shadow.

## Imagery
Photography is the entire visual identity. Aritzia's homepage is a sequence of large, warm, editorial campaign images — models in studio and campus settings (the Juilliard collaboration), styled product shots on white for the rails, and atmospheric seasonal banners (a golden sun for "Sale's Going Fast"). The look is elevated but approachable: natural light, real environments, muted-warm grading. Product imagery is clean and consistent — full-length on seamless white. There is no illustration and no iconography beyond a minimal line set (bag, account, search) in black. The images provide 100% of the color in the experience; the UI stays black-and-white so nothing competes.

## Layout
The page is a stacked column of full-bleed image blocks — a hero campaign, then 2-up editorial pairs (Sweatfleece / T-Shirts, Wardrobe Essentials / Sweaters), a horizontal product rail ("Picked Just For You"), large lifestyle banners ("Late Sun", "Wedding Guest Dresses"), and a promotional band, closing on a dense black footer. Margins are minimal so images run edge-to-edge; the breathing room comes between blocks, not around them. The header is a thin uppercase nav over the hero with the centered/left wordmark. Type is always small and secondary to the picture it labels. The rhythm is a printed lookbook translated to scroll: image, image, image, with quiet type in the seams.

## Typography Signature
Aritzia commits entirely to one custom face, `Non-Seasonal Geo`, and to keeping it small. The wordmark and navigation sit uppercase and letter-spaced at 12px; editorial labels reach only 24px; body settles at 16px. Weight barely varies — 400 for nearly everything, 500 for the wordmark and buttons — because the brand signals luxury through spacing and scale-restraint rather than typographic drama. The face itself is a refined geometric grotesque: even, humanist-tinged, quietly modern, with open counters that read cleanly at tiny sizes and over photography. The signature move is confidence through smallness — where other fashion brands shout in giant serifs, Aritzia whispers in a spaced, understated grotesque, trusting the imagery to carry the volume.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` white / text: `#000000` black / secondary surface: `#F4F4F4` mist / accent: `#DB1216` red (sale/pricing only) / dark bands & footer: `#000000` with white type / no other colors — imagery supplies all color

## Example Component Prompts
1. **Editorial image block**: A full-bleed, sharp 0px campaign photograph with a short label overlaid bottom-left in `Non-Seasonal Geo` 12–24px, white or black per the image. No border, no rounding, edge-to-edge.
2. **Shop Now button**: A flat white `#FFFFFF` block, `#000000` uppercase label in `Non-Seasonal Geo` 12px/500, 14px/42px padding, 0px corners (or a 24px pill for the alternate treatment). No shadow.
3. **Product rail card**: A product photo on `#FFFFFF`, sharp corners, a `#000000` 12px/400 name below and a price — `#DB1216` if on sale. No card fill, border, or shadow.
4. **Slim nav bar**: An uppercase row of `Non-Seasonal Geo` 12px links in `#000000`, letter-spaced, over the hero, with the centered "ARITZIA" wordmark at 500 weight. Transparent background.
5. **Black footer**: A full-width `#000000` band, reversed white `Non-Seasonal Geo` type in dense uppercase link columns, app-store badges, and the "Everyday Luxury®" signature.

## Similar Brands
- **COS** — the same stark black-white minimalism and photography-first, quiet-type editorial system.
- **The Row** — luxury restraint, near-monochrome palette, and confidence in white space.
- **Everlane** — clean product-on-white grids with minimal chrome and understated type.
- **Zara** — full-bleed fashion editorial and a small, spaced type voice over big imagery.
- **Aesop** — a single-typeface, monochrome, image-led system where restraint signals premium.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-text: #000000;
  --color-text-inverse: #FFFFFF;
  --color-accent: #DB1216;

  /* Typography — Family */
  --font-sans: 'Non-Seasonal Geo', 'Founders Grotesk', 'Aktiv Grotesk', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-medium: 500;

  /* Typography — Scale */
  --text-micro: 10px;
  --text-caption: 12px;
  --text-base: 16px;
  --text-lg: 24px;
  --leading-tight: 1.2;
  --leading-normal: 1.4;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-pill: 24px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-overlay: 0 2px 4px 0 rgba(0,0,0,0.5);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-text: #000000;
  --color-text-inverse: #FFFFFF;
  --color-accent: #DB1216;

  /* Typography — Family */
  --font-sans: 'Non-Seasonal Geo', 'Founders Grotesk', 'Aktiv Grotesk', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --text-caption: 12px;
  --text-base: 16px;
  --text-lg: 24px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-48: 192px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-pill: 24px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-overlay: 0 2px 4px 0 rgba(0,0,0,0.5);
}
```