---
version: alpha
name: Everlane
website: "https://www.everlane.com"
description: >-
  A studio-photography essentials storefront anchored on a warm off-white canvas (#faf9f8) and a deep ink black (#121212) — text count 438, border count 434 — with the only saturated voltage in the chrome reserved for the focus ring (sky `#41a1e6` against a `rgba(65, 161, 230, 0.2)` halo). Type runs Maison Neue Book at 12px uppercase with `0.24px` tracking for nav links, hero h2 sits at 32px with `0.48px` tracking, and the primary CTA is a hard-cornered `#121212` rectangle at `0px` radius with white text. The chrome reads like a printed garment catalog under museum glass: photography carries every color note, type whispers above the fold in uppercase caps, and there is one rounded element (the 20px-radius pill on the announcement-bar dismiss) in an otherwise right-angle system.

seo:
  title: "Everlane Design System for React — Maison Neue, ink #121212, 18 components"
  metaDescription: "Everlane's design system as a DESIGN.md file. Maison Neue Book, ink #121212, focus blue #41a1e6, 18 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "Zero-radius CTA geometry — primary button sits at `0px` corners with `#121212` fill and white text, 47px height with no visible padding inset"
    - "Uppercase nav typography — Maison Neue Book 12px with `0.24px` tracking carries every top-nav link, every category cap, and every footer column header"
    - "Single chromatic moment — sky `#41a1e6` appears only on the input focus ring against a `rgba(65, 161, 230, 0.2)` halo; the rest of the chrome is graphite, cream, and white"
    - "Warm off-white canvas — `#faf9f8` (atlas-background-main) sits one degree warmer than pure white, signalling cotton and linen over screen pixels"
    - "Two-radius vocabulary — `0px` on every interactive surface, `20px` reserved for the announcement-bar dismiss pill; cards default to `0px`, atlas-toolkit cards override to `24px`"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Everlane's storefront reads like a printed garment catalog rendered for the browser. The canvas is a warm off-white (`#faf9f8`) tinted just enough to read as cotton, not screen. Ink is a deep graphite black (`#121212`) used 438 times across text and 434 times across 1px hairlines — never the pure `#000000` that would feel pharmaceutical against the cream. Photography carries every chromatic moment: marled yellow knitwear, dark indigo leather sandals, sun-bleached hero portraits. The chrome stays out of the way, and the only saturated voltage in the entire system is the sky-blue focus ring (`#41a1e6`) that appears around an active text input — a single accessibility moment, not a brand color.

    This page packages the storefront into a DESIGN.md file written to the Google Labs open specification. Inside: 18 color tokens grouped into ink, surface, hairline, and semantic layers; 11 Maison Neue typography roles built around a 12px uppercase nav cap and a 32px hero h2 with `0.48px` tracking; a 4-step radius vocabulary that's effectively two values (`0px` everywhere, `20px` on one pill); a 9-step spacing scale anchored on the site's observed `4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `40px` rhythm extracted from the `--atlas-space-*` CSS variable cascade; and 19 component entries covering the announcement bar, the top nav, the hero overlay, the product tile, the newsletter capture, the 4-up category strip, and the footer link cluster.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Everlane's catalog restraint — the `0px` cornered black CTA, the uppercase Maison Neue nav, the warm cream canvas, the single sky-blue focus halo — instead of inventing a generic apparel-template with rounded corners and saturated accents. Reference tokens directly in Tailwind config or CSS variables when you want one specific value; every hex, font, radius, and spacing entry is a quoted literal you can paste into a `theme.extend` block. The reason this system rewards study is that most direct-to-consumer apparel brands ship pill-shaped CTAs and beige accents in pursuit of warmth — Everlane gets warmth from the canvas and the photography, holds every button at `0px`, and lets the garment do the talking.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.everlane.com"
      title: "Everlane — official site"
      description: "The Everlane storefront this DESIGN.md was extracted from on 2026-05-13."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Everlane's primary brand color?"
      answer: "Everlane doesn't run a saturated brand voltage. The dominant token is a deep graphite black (`#121212`, clustered with `#141414` and `#161912`) at a text-count of 438 and border-count of 434 — never the pure `#000000` you'd expect, because the warmer graphite holds against the cream canvas (`#faf9f8`) without going pharmaceutical. The closest thing to a chromatic accent is the sky-blue focus ring (`#41a1e6`) defined in `--atlas-border-focus`, used exclusively around active text inputs against a `rgba(65, 161, 230, 0.2)` halo. The primary CTA is a black-on-white rectangle with `0px` corners, not a saturated fill."
    - id: "typography"
      title: "What typography does Everlane use, and what should I use if Maison Neue is unavailable?"
      answer: "Everlane runs Maison Neue Book (Milieu Grotesque foundry) as the workhorse sans across every text role at weight 400, with Maison Neue (regular) carrying the 24px and 32px display tiers and a single Maison Neue Demi appearance at weight 600 for one uppercase 12px micro-label. Nav links, category caps, and footer headers all sit at 12px / 16px line-height with `0.24px` tracking, uppercase. Hero h2 reaches 32px / 44.8px leading with `0.48px` tracking. If Maison Neue is unavailable, Söhne or Inter at weight 400/500 are the closest substitutes — preserve the `0.24px` and `0.48px` tracking values exactly, as the uppercase rhythm depends on them."
    - id: "shape-system"
      title: "Why does Everlane use 0px corners on the primary CTA?"
      answer: "The radius vocabulary is effectively two values: `0px` on every interactive surface (the primary button extracted at `borderRadius: 0px`, the newsletter input at `0px`, the hero h2 frame at `0px`, the product tile at `0px`), and `20px` reserved for the single announcement-bar dismiss pill. The atlas component toolkit declares an `8px` input radius and a `24px` card radius internally, but the homepage chrome overrides both back to `0px`. The right-angle geometry inherits from print garment catalogs and museum-display typography — softening to a 4px or 8px corner would push the brand toward generic apparel-template territory."
    - id: "focus-blue"
      title: "When should I use the sky-blue focus accent?"
      answer: "Sky `#41a1e6` is a scoped accessibility voltage, not a general-purpose accent. It is declared in `--atlas-border-focus` and `--atlas-focus-outline-color` (`rgba(65, 161, 230, 0.2)`) and appears exclusively as the focus ring around active text inputs — newsletter capture, search field, account login. 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 graphite, cream, and white — the moment the blue spreads to a second component, the accessibility signal becomes ambient decoration."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React apparel storefront?"
      answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces Everlane's catalog restraint (`0px` corners on every CTA, uppercase Maison Neue nav at 12px / `0.24px` tracking, warm `#faf9f8` canvas, single sky-blue focus halo) rather than a generic apparel theme. Reference tokens directly when you want one specific value: `{colors.ink}` resolves to `#121212`, `{rounded.none}` to `0px`, `{typography.nav-link}` to Maison Neue Book 12px uppercase, and `{colors.focus}` to `#41a1e6`. The 47px primary-button height and the `0.48px` hero tracking are preserved as quoted literals you can paste into Tailwind config."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "Several surfaces aren't captured: the PDP (product detail page) typography hierarchy beyond the homepage tile, the size selector and add-to-bag CTA placement, the slide-in cart drawer and the full checkout flow, the transparency / pricing-breakdown editorial pages that show factory cost vs. retail markup, the loyalty / member area, hover-state colors per the global no-hover policy, the full Maison Neue weight ramp (the spec documents weight 400 and one weight 600 micro-label — Demi, Bold, and Mono are not in the homepage chrome), and the international currency picker. The extracted color palette runs at 12 raw hexes clustered into 17 tokens — the system is genuinely near-monochrome, not under-extracted."

colors:
  ink: "#121212"
  ink-graphite: "#161912"
  ink-primary: "#1d1e20"
  ink-secondary: "#4c4c4c"
  ink-muted: "#737373"
  ink-pure: "#000000"
  canvas: "#faf9f8"
  surface-content: "#ffffff"
  surface-chip: "#ebebea"
  surface-bubble: "#322e2f"
  hairline: "#000000"
  hairline-soft: "#ebebea"
  focus: "#41a1e6"
  atlas-button-primary: "#3f5260"
  status-error: "#be2119"
  status-error-input: "#cc3c28"
  status-success: "#518b22"
  status-success-text: "#366d12"
  status-caution: "#fdd926"
  on-ink: "#ffffff"

typography:
  hero-display:
    fontFamily: "\"Maison Neue\", Arial, \"Helvetica Neue\", sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "0.48px"
    textTransform: uppercase
  display-md:
    fontFamily: "\"Maison Neue\", Arial, \"Helvetica Neue\", sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: "0.96px"
    textTransform: uppercase
  body-lg:
    fontFamily: "\"Maison Neue\", Arial, \"Helvetica Neue\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.32px"
  body-md:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.32px"
  body-sm:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: "0.28px"
  nav-link:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: "0.24px"
    textTransform: uppercase
  category-cap:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: "0.48px"
    textTransform: uppercase
  micro-bold:
    fontFamily: "\"Maison Neue Demi\", sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: "0.24px"
    textTransform: uppercase
  caption:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "0.24px"
    textTransform: uppercase
  button-md:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "1px"
  input-md:
    fontFamily: "\"Maison Neue Book\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.4px"

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "20px"
  card: "24px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    borderColor: "{colors.on-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "47px"
    border: "0"
  button-primary-active:
    backgroundColor: "{colors.ink-graphite}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "{colors.surface-content}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "47px"
    border: "1px"
  button-text:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "0"
  announcement-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: "32px"
    rounded: "{rounded.none}"
  announcement-dismiss:
    backgroundColor: "{colors.surface-chip}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    height: "20px"
    padding: "0 8px"
  top-nav:
    backgroundColor: "{colors.surface-content}"
    textColor: "{colors.ink-pure}"
    typography: "{typography.nav-link}"
    height: "74px"
    rounded: "{rounded.none}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink-pure}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
  hero-overlay:
    backgroundColor: transparent
    textColor: "{colors.on-ink}"
    typography: "{typography.hero-display}"
    rounded: "{rounded.none}"
  hero-subhead:
    backgroundColor: transparent
    textColor: "{colors.on-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
  category-cap:
    backgroundColor: transparent
    textColor: "{colors.ink-primary}"
    typography: "{typography.category-cap}"
    rounded: "{rounded.none}"
  product-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "0"
  product-meta:
    backgroundColor: transparent
    textColor: "{colors.ink-primary}"
    typography: "{typography.body-sm}"
  product-meta-mute:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
  text-input:
    backgroundColor: "{colors.surface-content}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.input-md}"
    rounded: "{rounded.none}"
    padding: "15px 50px 15px 15px"
    height: "45px"
    border: "1px"
  text-input-focus:
    backgroundColor: "{colors.surface-content}"
    borderColor: "{colors.focus}"
    rounded: "{rounded.none}"
    border: "1px"
  hairline-divider:
    backgroundColor: "{colors.hairline-soft}"
    height: "1px"
  footer-header:
    backgroundColor: transparent
    textColor: "{colors.ink-pure}"
    typography: "{typography.nav-link}"
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.ink-pure}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
---

## Overview

Everlane's storefront is a printed garment catalog rendered for the browser. The canvas runs warm off-white (`{colors.canvas}` — #faf9f8 declared in `--atlas-background-main`), the ink is deep graphite (`{colors.ink}` — #121212) at a text-count of 438 and a border-count of 434, and the only saturated voltage in the entire chrome is a sky-blue focus ring (`{colors.focus}` — #41a1e6) declared in `--atlas-border-focus` that appears around active text inputs against a `rgba(65, 161, 230, 0.2)` halo. There is no second brand color, no decorative gradient, no atmospheric background tint.

**Catalog discipline**: where most direct-to-consumer apparel brands ship pill-shaped CTAs and a beige or terracotta accent in pursuit of warmth, Everlane ships neither — the primary button is a hard-cornered black rectangle at `0px` radius, and the warmth comes entirely from the cream canvas and the studio photography. The chrome reads as confidence by withholding. Unlike the convention of a 6–8px softened CTA on apparel sites, every interactive surface on Everlane holds its right angles, and the only rounded element in the captured chrome is a single 20px-radius pill on the announcement-bar dismiss.

Type runs **Maison Neue** (Milieu Grotesque) across every role with three weight axes — Maison Neue Book (the workhorse at weight 400), Maison Neue (the display tier at weight 400), and a single Maison Neue Demi appearance at weight 600 for one uppercase micro-label. Nav links sit at 12px / 16px line-height with `0.24px` tracking, all uppercase. Hero h2 reaches 32px / 44.8px leading with `0.48px` tracking — the largest type in the captured chrome. Body copy at 16px / 24px carries the editorial bands beneath the photography. The tracking values are the signature move: every uppercase role gets a deliberate letter-spacing kick (`0.24px` on 12px caps, `0.48px` on 24px display, `0.96px` on 24px campaign text) so the all-caps treatment reads as label, not shout.

**Key Characteristics:**
- Zero-radius CTA: `{component.button-primary}` ships at `{rounded.none}` (0px) with `{colors.ink}` (#121212) fill, white text, 47px height, and no internal padding — a hard-cornered rectangle the brand uses as its default action.
- Warm off-white canvas: `{colors.canvas}` (#faf9f8) sits one degree warmer than pure white, declared in `--atlas-background-main`; signals cotton fiber rather than screen pixels.
- Single chromatic moment: `{colors.focus}` (#41a1e6) appears only on input focus rings, scoped to accessibility — never as a CTA fill or heading color.
- Uppercase nav typography: every top-nav link, category cap, and footer header runs `{typography.nav-link}` (Maison Neue Book 12px uppercase, `0.24px` tracking).
- Graphite ink, not black: `{colors.ink}` (#121212) holds 438 text occurrences and 434 borders; the pure `{colors.ink-pure}` (#000000) is reserved for the nav-link extraction and 1px hairlines on the announcement bar.
- Two-radius vocabulary: `{rounded.none}` (0px) on every interactive surface; `{rounded.lg}` (20px) reserved for the single announcement-dismiss pill.
- Tracking as signature: `0.24px` on nav caps, `0.48px` on hero display, `0.96px` on campaign display — every uppercase role carries a deliberate letter-spacing kick.
- Photography carries warmth: marled yellow knitwear, indigo leather sandals, sun-bleached portraits handle every color note in the chrome — pigment is delegated to the garment, not the interface.

## Colors

### Ink
- **Graphite Ink** (`{colors.ink}` — #121212): frequency 101 (clustered with `#161912` and `#141414`). Used as text (50), border (49), bg (2). The dominant body and CTA color — a deep graphite that holds against the cream canvas without going pharmaceutical.
- **Atlas Ink Primary** (`{colors.ink-primary}` — #1d1e20): declared in `--atlas-heading-text-primary` and `--atlas-text-primary`. The toolkit-default heading color for atlas-shipped components; appears in modular review widgets and form labels.
- **Ink Secondary** (`{colors.ink-secondary}` — #4c4c4c): frequency 14. Used as text (7), border (7). The mid-gray secondary text grade — declared in `--atlas-text-secondary` and used for caption tiers and footer fine-print.
- **Ink Muted** (`{colors.ink-muted}` — #737373): frequency 26. Used as text (13), border (13). The placeholder color inside the newsletter input — declared in `--atlas-text-placeholder`.
- **Pure Ink** (`{colors.ink-pure}` — #000000): frequency 878. Used as text (438), border (434), gradient (4), bg (2). The top-nav link color and the 1px hairline on the announcement-bar dismiss — the only place pure black appears in the chrome.

### Surface
- **Canvas** (`{colors.canvas}` — #faf9f8): the warm off-white default page floor, declared in `--atlas-background-main`. One degree warmer than pure white, signalling cotton over screen.
- **Surface Content** (`{colors.surface-content}` — #ffffff): frequency 107. Used as bg (16), border (45), text (46). The pure-white content fill behind product tiles and the newsletter input — declared in `--atlas-background-content`.
- **Surface Chip** (`{colors.surface-chip}` — #ebebea): frequency 2. Used as bg (1), border (1). The light-gray chip surface for the announcement-bar dismiss pill — declared in `--atlas-chat-bubble-background`.
- **Surface Bubble** (`{colors.surface-bubble}` — #322e2f): declared in `--atlas-chat-bubble-text-primary`. A near-black surface reserved for the support-chat bubble text layer.

### Hairline
- **Hairline** (`{colors.hairline}` — #000000): the 1px black hairline tone — same hex as `ink-pure`, narrated separately because the role is a visible chrome line rather than text.
- **Hairline Soft** (`{colors.hairline-soft}` — #ebebea): same hex as `surface-chip`. The light-gray divider tone between editorial bands and inside footer column splitters.

### Brand Voltage
- **Focus Sky** (`{colors.focus}` — #41a1e6): frequency 0 raw, but declared as `--atlas-border-focus` with a `rgba(65, 161, 230, 0.2)` halo in `--atlas-focus-outline-color`. The single saturated moment in the chrome, scoped to active text inputs. Layer "brand" per extraction.
- **Atlas Button Primary** (`{colors.atlas-button-primary}` — #3f5260): declared in `--atlas-button-primary` and `--atlas-primary-color`. The atlas-toolkit's default primary fill — overridden to `#121212` on the homepage but present in modular review and form components.

### Semantic
- **Error** (`{colors.status-error}` — #be2119): declared in `--atlas-text-negative`, `--atlas-background-error`, and `--atlas-heading-text-negative`. The form-validation error state — appears on shipping-address errors and out-of-stock messaging.
- **Error Input** (`{colors.status-error-input}` — #cc3c28): declared in `--atlas-input-error`. A slightly brighter error tone reserved for input-border error states.
- **Success** (`{colors.status-success}` — #518b22): declared in `--atlas-background-success`. The order-confirmation surface.
- **Success Text** (`{colors.status-success-text}` — #366d12): declared in `--atlas-text-positive`. The order-confirmation text grade.
- **Caution** (`{colors.status-caution}` — #fdd926): declared in `--atlas-caution-base`. Reserved for shipping-delay or back-order warnings.

### Inverse
- **On Ink** (`{colors.on-ink}` — #ffffff): white text on the primary CTA and the hero overlay — declared in `--atlas-text-primary-inverse`.

## Typography

### Font Family
The system runs **Maison Neue** (Milieu Grotesque foundry) across every text role, split across three weight axes:

- **Maison Neue Book** — the workhorse at weight 400. Carries nav links, body, captions, button labels, and input fields.
- **Maison Neue** (regular) — the display tier at weight 400. Carries 24px and 32px headings and the editorial campaign text.
- **Maison Neue Demi** — a single weight-600 appearance, scoped to one uppercase 12px micro-label.

There is no separate display family. Maison Neue carries the entire scale with variation by weight axis (Book vs. regular vs. Demi) rather than by absolute weight number — Book and regular both register as weight 400 in the extraction, but the metrics differ.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.hero-display}` | 32px | 400 | 1.4 | 0.48px | Hero h2 (`DESTINATION ELSEWHERE`) — the largest type in the captured chrome |
| `{typography.display-md}` | 24px | 400 | 1.33 | 0.96px | Editorial campaign text — heaviest tracking in the system |
| `{typography.body-lg}` | 16px | 400 | 1.5 | 0.32px | Hero overlay subhead and editorial body |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0.32px | Default running text (count 4 — appears in product descriptions) |
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0.28px | Footer links and product-meta lines |
| `{typography.nav-link}` | 12px | 400 | 1.3 | 0.24px | Top-nav links — uppercase, the dominant chrome role |
| `{typography.category-cap}` | 12px | 400 | 1.33 | 0.48px | Section markers above editorial bands |
| `{typography.micro-bold}` | 12px | 600 | 1.33 | 0.24px | Single Maison Neue Demi uppercase span — the one bold instance in the chrome |
| `{typography.caption}` | 10px | 400 | 1.6 | 0.24px | Smallest uppercase label tier (count 5) |
| `{typography.button-md}` | 15px | 400 | 1.2 | 1px | Primary CTA label — heaviest tracking on a non-uppercase role |
| `{typography.input-md}` | 12px | 400 | 1.5 | 0.4px | Newsletter input placeholder and value text |

### Principles
Display tops out at 32px. The hero h2 (`DESTINATION ELSEWHERE`) at 32px / 44.8px leading with `0.48px` tracking is the largest type in the captured chrome — smaller than the 96px campaign type most apparel brands ship, but tracking carries the editorial weight that absolute size doesn't.

**Tracking as signature**: every uppercase role in the system carries a deliberate letter-spacing kick — `0.24px` on 12px nav caps, `0.48px` on 24px display, `0.96px` on 24px campaign text, and `1px` on the 15px primary-button label. The tracking values scale with size in a roughly linear progression (~2–3% of font size), which is what makes the all-caps treatment read as label rather than shout. Where most apparel brands run uppercase headlines at default `0` tracking and let the weight carry the emphasis, Everlane holds weight at 400 and uses tracking as the typographic muscle.

### Note on Font Substitutes
If Maison Neue is unavailable, **Söhne** (Klim Type Foundry) and **Inter** are the closest open-source-adjacent substitutes for the sans-serif family — geometry and x-height match within ~3% at body sizes. Preserve `letterSpacing: 0.24px` on nav caps, `0.48px` on hero display, and `0.96px` on campaign display when substituting; the tracking values are the signature metric, not the font itself. For the Maison Neue Demi role, Söhne Halbfett or Inter weight 600 are the closest matches.

## Layout

### Spacing System
- **Base unit:** 4px, with `--atlas-space-tiny` (`4px`) as the smallest token in the cascade.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 40px.
- **Atlas cascade:** the page declares `--atlas-space-4` (`4px`), `--atlas-space-8` (`8px`), `--atlas-space-12` (`12px`), `--atlas-space-16` (`16px`), `--atlas-space-20` (`20px`), `--atlas-space-24` (`24px`), `--atlas-space-32` (`32px`), and `--atlas-space-40` (`40px`) — an exact 4px-grid with no half-step exceptions.
- **Button padding:** `0` on the primary CTA — the 47px height is achieved by line-height alone, not by internal padding. Atlas-toolkit buttons declare `7px 12px` (`--atlas-button-padding-normal`) and `5px 12px` (`--atlas-button-padding-small`), but the homepage CTA overrides both.
- **Input padding:** `15px 50px 15px 15px` on the newsletter capture — extra right-side breathing room to accommodate the submit-arrow affordance.
- **Gutters:** `4px` (count 33) between product cells in the 4-up category grid; tight, so adjacent tiles effectively touch.

### Grid & Container
- **Top-nav height:** `74px` (declared in `--header-height`). Roughly twice the height of Glossier's 40px nav — Everlane gives the wordmark and the category list more breathing room.
- **Full-header height:** `106px` (declared in `--full-header-height`) including the announcement bar at the top.
- **Announcement bar:** `32px` (declared in `--announcement-bar-height`). A fixed top-of-viewport strip carrying shipping or promotion messaging.
- **Page width:** `120rem` (`--page-width`) — an unusually generous 1920px max-width that lets editorial photography breathe at desktop.
- **Product grid:** 4-up at desktop with `4px` gutters between cells. Each product tile is a hard-cornered rectangle with the garment photograph occupying the full cell width and a 2-line meta stack beneath.

### Whitespace Philosophy
The system gives editorial bands generous vertical breathing room (60–80px between sections) and compresses product grids to 4px gutters. The contrast is intentional: the page reads as "open editorial above, dense merchandising below," and the photography carries the visual weight rather than the chrome.

## Elevation

The captured chrome runs largely flat. The atlas component toolkit declares several shadow variables — `--atlas-shadow-medium` (`0px 8px 16px 0px rgba(55, 63, 71, 0.2)`), `--atlas-card-shadow` (`0px 2px 8px 0px rgba(55, 63, 71, 0.08), 0px 1px 2px 0px rgba(55, 63, 71, 0.12)`), `--atlas-popover-shadow` (`0 20px 48px 0 rgba(55, 63, 71, 0.16), 0 12px 24px 0 rgba(55, 63, 71, 0.2), 0 0 12px 0 rgba(55, 63, 71, 0.08)`), and `--atlas-select-panel-shadow` (`0px 8px 16px 0px rgba(55, 63, 71, 0.2)`) — but these are scoped to atlas-toolkit popovers and select panels, not the homepage chrome.

- **Flat (no shadow):** body, hero, top nav, every editorial band, every product tile, every category card — 100% of the captured homepage surfaces.
- **Atlas popover:** the only elevated component in the system, reserved for help-chat dropdowns and account-select panels.
- **No card-hover lift:** product tiles do not gain a shadow on pointer hover; the title-underline pattern handles state instead.

**Shadow absence as discipline**: the homepage reads as museum-flat because the chrome refuses elevation. The atlas shadow tokens exist for modal layers, but the merchandising surfaces ship without any ambient lift — depth comes from photography composition and surface separation, not from layered shadows.

## Shapes

The radius vocabulary is effectively **two values**.

- `{rounded.none}` (0px) on every interactive surface: primary CTA, secondary CTA, text input, product tile, hero overlay, top nav, footer cell.
- `{rounded.lg}` (20px) on exactly one element: the announcement-bar dismiss pill.
- `{rounded.sm}` (4px), `{rounded.md}` (8px), and `{rounded.card}` (24px) are declared in atlas tokens (`--atlas-chip-border-radius` 4px, `--atlas-button-border-radius` 8px, `--atlas-card-border-radius-small` 12px, `--atlas-card-border-radius-normal` 24px, `--atlas-drawer-border-radius` 24px) but are overridden to `0px` on the homepage chrome.
- `{rounded.full}` (9999px) is declared as a fallback token but is not used in the captured chrome.

**0px as identity**: where the atlas toolkit declares an 8px button radius as default, the homepage chrome overrides every interactive surface back to 0px. The right-angle geometry is a deliberate brand override on top of a softer component library — softening to a 4px or 8px corner anywhere would push Everlane toward the apparel-template aesthetic the system is built to refuse.

## Components

### Buttons

**`button-primary`** — Graphite ink fill (`{colors.ink}` — #121212) with white text (`{colors.on-ink}` — #ffffff) and no border. `0px` radius, `0` internal padding, 47px height — the height is carried by line-height alone. The default action across the chrome. Where atlas declares an 8px radius and `7px 12px` padding for its toolkit buttons, the homepage overrides both.

**`button-primary-active`** — The press state. Background flips to `{colors.ink-graphite}` (#161912). No transform, no shadow change.

**`button-secondary`** — White fill (`{colors.surface-content}`) with ink text and a 1px ink border. Same `0px` radius and 47px height. Used for inverse CTAs over photography hero panels.

**`button-text`** — Plain ink text, no surface, no border. Underlined on hover. Used for editorial "Shop now" links underneath product tiles.

### Top Navigation

**`announcement-bar`** — A 32px-tall strip at the top of every page, declared in `--announcement-bar-height`. Cream canvas fill, ink text in `{typography.nav-link}` (Maison Neue Book 12px uppercase).

**`announcement-dismiss`** — A light-gray pill (`{colors.surface-chip}` — #ebebea) at `{rounded.lg}` (20px). The single rounded element in the captured chrome.

**`top-nav`** — White surface (`{colors.surface-content}`), 74px height (declared in `--header-height`). Everlane wordmark flush left, category nav center, account + bag utilities flush right. No bottom shadow, no hairline separator at rest.

**`nav-link`** — Pure-ink text (`{colors.ink-pure}` — #000000), 12px uppercase Maison Neue Book with `0.24px` tracking. No underline at rest, underline on hover.

### Hero

**`hero-overlay`** — Hero h2 in `{typography.hero-display}` (Maison Neue 32px / 1.4 / `0.48px` tracking) burned into editorial campaign photography. Text color flips to `{colors.on-ink}` (white) over dark imagery.

**`hero-subhead`** — Editorial subhead in `{typography.body-md}` (Maison Neue Book 16px / 1.5 / `0.32px` tracking), also rendered on the overlay against photography.

### Editorial

**`category-cap`** — Ink uppercase label in `{typography.category-cap}` (Maison Neue Book 12px / 400 uppercase with `0.48px` tracking). Used as section markers above editorial bands like `THE SUMMER EDIT`.

### Product Tiles

**`product-tile`** — Cream canvas card (`{colors.canvas}` — #faf9f8) with `0px` corners and no padding. Contains a full-width garment photograph above a 2-line meta stack (product title, regular price).

**`product-meta`** — Ink primary body line (`{typography.body-sm}` — Maison Neue Book 14px / 1.43 leading with `0.28px` tracking), used for product titles.

**`product-meta-mute`** — Muted gray caption (`{colors.ink-muted}` — #737373) in `{typography.caption}` (10px uppercase), used for size or fit descriptors.

### Forms

**`text-input`** — White surface (`{colors.surface-content}`), 1px graphite-ink outline (`{colors.ink}`), `0px` radius, 45px height. Padding is `15px 50px 15px 15px` — asymmetric right-side to accommodate the submit-arrow affordance inside the field. Placeholder text in `{typography.input-md}` (Maison Neue Book 12px / 1.5 with `0.4px` tracking) at the muted gray (`{colors.ink-muted}` — #737373).

**`text-input-focus`** — The focused state. The 1px outline switches from graphite ink to `{colors.focus}` (#41a1e6) with a `rgba(65, 161, 230, 0.2)` outline halo declared in `--atlas-focus-outline-color`. The single chromatic moment in the captured chrome.

### Dividers & Footer

**`hairline-divider`** — A 1px line at `{colors.hairline-soft}` (#ebebea) used between editorial bands. Lighter than the `{colors.hairline}` token used for input outlines.

**`footer-header`** — Pure-ink uppercase label in `{typography.nav-link}` (Maison Neue Book 12px uppercase) — same role as the top-nav link, reused for footer column headers.

**`footer-link`** — Plain ink text in `{typography.body-sm}` (Maison Neue Book 14px / 1.43 leading). No underline at rest, underline on hover. Dense rows, tight 4px vertical rhythm between links.

## Do's and Don'ts

### Do
- Hold every interactive surface at `{rounded.none}` (0px). The atlas toolkit declares an 8px button radius as default; the homepage overrides it back to 0px for a reason — the catalog metaphor depends on the right angles.
- Preserve `letterSpacing` on every uppercase role exactly — `0.24px` on 12px nav caps, `0.48px` on 32px hero display, `0.96px` on 24px campaign text, `1px` on 15px button labels. The tracking values are the signature metric.
- Use `{colors.ink}` (#121212) for the primary CTA, never `#000000`. The graphite holds against the cream canvas; pure black goes pharmaceutical.
- Reserve `{colors.focus}` (#41a1e6) for input focus rings only. Render it with a `rgba(65, 161, 230, 0.2)` outline halo — both values are declared in atlas focus variables.
- Lean on photography for warmth and color. The chrome is graphite, cream, and white; every chromatic moment lives in the garment photograph.

### Don't
- Don't soften the primary CTA to a 4px or 8px corner — the homepage chrome overrides the atlas default `8px` back to `0px` on purpose. A softened CTA would push the brand toward generic apparel-template territory.
- Don't use `{colors.ink-pure}` (#000000) for body copy — it appears 438 times as text on nav links and 1px hairlines, not on running paragraphs. Body copy and CTA fills sit at `{colors.ink}` (#121212), the warmer graphite.
- Don't drop the tracking values when substituting fonts. The system's typographic identity is the letter-spacing kick on every uppercase role; rendering 12px Inter uppercase at `0` tracking produces a different brand entirely.
- Don't use `{colors.focus}` (#41a1e6) for a CTA fill, a heading color, or a hairline. It is an accessibility token scoped to input focus rings — the moment it spreads to a second component, the focus signal becomes ambient decoration.
- Don't add a card-shadow to product tiles. The atlas toolkit declares `--atlas-card-shadow` for popover surfaces, but the homepage merchandising tiles ship flat. A `0px 2px 8px rgba(55,63,71,0.08)` lift on hover reads as a generic e-commerce theme.
- Don't replace the warm canvas (`#faf9f8`) with pure white. The one-degree warmth shift is the difference between cotton-fiber catalog and screen-pixel storefront — pure white flattens the photography contrast.

## Known Gaps

- **Product detail pages (PDP):** the homepage tile is captured, but the full PDP typography hierarchy (size selector, fit guide, add-to-bag CTA placement, fabric-composition table) is out of scope.
- **Cart drawer and checkout:** the bag-count indicator is captured, but the slide-in cart drawer and the full checkout flow are not.
- **Transparency / pricing-breakdown pages:** Everlane's signature "factory cost vs. retail markup" editorial pages run a separate typographic treatment with a horizontal price-breakdown bar — not represented in this DESIGN.md.
- **Loyalty / member area:** out of scope; the authenticated chrome isn't captured.
- **Hover-state colors:** not documented per the global no-hover policy. The actual `:hover` styling on product tiles is a title-underline thicken; precise color extraction is unreliable.
- **Form-validation states:** the newsletter input is documented at rest; error / success states are declared in atlas tokens but not visible in the captured chrome.
- **Full Maison Neue weight ramp:** the spec documents weight 400 (Book and regular) and one weight 600 (Demi) micro-label — the Bold and Mono members of the family are not present in the captured homepage chrome.
- **International currency picker:** the localized site shows USD shipping copy; the full currency-picker dropdown styling is not captured.