---
version: alpha
name: Everlane
description: Uncompromising black-on-white retail where every corner is squared off — no border-radius anywhere — Maison Neue Book sets uppercase letter-spaced labels, the CTA is solid near-black, and oversized product photography does all the talking. Radical transparency rendered as radical restraint.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # muted section bands, light input fill
  surface-soft: "#ebebea"      # alternate input fill, faint chip
  surface-dark: "#121212"      # near-black CTA fill, dark sections

  # Ink / text
  ink: "#121212"               # near-black headings, body, CTA fill (not pure black)
  ink-strong: "#000000"        # pure-black nav, links, max-contrast type
  ink-secondary: "#4c4c4c"     # supporting copy, secondary links
  ink-muted: "#737373"         # captions, metadata, hover-dim, focus outline
  on-dark: "#ffffff"           # text on the near-black CTA and dark sections

  # Accent — Everlane has no chromatic brand color; black IS the accent
  accent: "#121212"            # the single workhorse: CTA, active states
  accent-hover: "#000000"      # CTA hover deepens to pure black

  # Borders
  border: "#ebebea"            # hairline dividers, card edges
  border-strong: "#121212"     # outlined-button + active input border

  # Status / semantic
  negative: "#be2119"          # error text (--atlas-text-negative)
  positive: "#366d12"          # success text (--atlas-text-positive)
  focus-ring: "#41a1e6"        # focus outline tint (--atlas-focus-outline-color)

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.15) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.6px
  display:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1.28px
  heading:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.96px
  heading-sub:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.8px
  body-large:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.6px
  body:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.32px
  body-bold:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.6px
  button:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.8px
  nav-label:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.8px
  caption:
    fontFamily: "Maison Neue Book, Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 64px
  6xl: 96px

rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 15px 32px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 15px 32px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-bold}"
    rounded: "{rounded.none}"
    padding: 0px
  button-text-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 50px 15px 15px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  input-filled:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 16px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.nav-label}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-bold}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-muted}"

  eyebrow:
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 0px
---

# Everlane Design System

## Overview

Everlane's site is what "radical transparency" looks like when it metastasizes into the design language itself. The single most distinctive move is geometric: **nothing is rounded.** Buttons, cards, inputs, image frames — every corner is squared off at `{rounded.none}` (0px). In a retail web where soft 8-12px radii are the universal default, Everlane's hard right angles read as a statement of seriousness, like a gallery wall or a clothing tag. The canvas is pure white (`{colors.background}`), text is a near-black `{colors.ink}` (`#121212`, never quite pure black except in the nav), and there is no chromatic brand color at all. Black does every job a brand accent would do.

The second signature is the typographic discipline. Everything is set in **Maison Neue Book** — a neo-grotesque so even and unfussy it nearly disappears — at a single weight of 400, with labels, nav, and section markers pushed to **uppercase with positive letter-spacing** (`{typography.nav-label}` at 0.8px, hero display at 1.6px). The tracking is the entire personality: it spaces the type out into a calm, editorial cadence that feels more like a fashion lookbook than an e-commerce funnel. Weight 700 appears only for emphasis links; the system almost never raises its voice with bold.

What fills all that restraint is photography. The page is built as oversized, full-bleed product and lifestyle imagery on white, with type sitting quietly beside or beneath it. Whitespace is generous and the grid is rigorous. The effect is premium-by-omission: no gradients, no shadows you'd notice, no rounded friendliness, no second color competing for attention. The product, shot beautifully, is the only ornament — and the sharp-cornered chrome around it signals that everything here was considered and nothing was softened to make you comfortable.

**Key Characteristics:**
- **Zero border-radius everywhere** (`{rounded.none}`) — buttons, cards, inputs, image frames all square-cornered; the signature geometric move
- Pure white canvas (`{colors.background}`) with whisper-gray section bands (`{colors.surface}`) — light-first, no dark marketing theme
- **No chromatic brand color** — near-black `{colors.ink}` (`#121212`) is the workhorse accent; the CTA is black, hover deepens to pure `#000000`
- Single typeface, **Maison Neue Book**, at a single weight of 400 — quiet neo-grotesque that gets out of the way
- **Uppercase + positive letter-spacing** on labels, nav, and display (`{typography.nav-label}` 0.8px → hero 1.6px) — the entire personality lives in the tracking
- Weight 700 reserved for emphasis links only (`{typography.body-bold}`) — the system rarely goes bold
- Oversized full-bleed product photography on white does the visual work; chrome stays minimal
- Hairline borders (`{colors.border}` `#ebebea`) do the structural separation, not boxes or fills
- Solid near-black CTA (`{button-primary}`) with generous `15px 32px` padding, no radius, no shadow
- Outlined and text-link button variants share the same squared-off, single-weight discipline
- Focus and hover dim to muted gray (`{colors.ink-muted}` `#737373`) rather than introducing color
- 8px-based spacing scale with airy section rhythm (`{spacing.6xl}` = 96px between major bands)

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. The overwhelming majority of the site sits on pure white.
- **Whisper Gray** (`{colors.surface}`): Muted section bands and light input fills — a barely-there shift from white.
- **Soft Gray** (`{colors.surface-soft}`): Alternate filled-input background and faint chips.
- **Near-Black Surface** (`{colors.surface-dark}`): Dark sections and the fill of the primary CTA.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings, body copy, and the CTA fill. `#121212` — a hair off true black.
- **Pure Black** (`{colors.ink-strong}`): The top nav, emphasis links, and max-contrast type.
- **Graphite** (`{colors.ink-secondary}`): Supporting copy and secondary links.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, and the dimmed hover/focus state.

### Accent
- **Black-as-Accent** (`{colors.accent}`): Everlane has no chromatic brand color. Near-black does the signaling that a brand hue normally would — CTAs, active states, emphasis. Hover deepens to `{colors.accent-hover}` (pure black).

### Status / Semantic
- **Error Red** (`{colors.negative}`): Form-validation error text only.
- **Success Green** (`{colors.positive}`): Confirmation text only.
- **Focus Tint** (`{colors.focus-ring}`): The faint blue of the browser-assist focus outline.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers — the primary structural device.
- **Strong Border** (`{colors.border-strong}`): Outlined-button and active-input borders (near-black).
- **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the rare modal shadow (the originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Maison Neue Book`, with fallbacks `Maison Neue, Arial, Helvetica Neue, Helvetica, sans-serif`. A quiet neo-grotesque carrying every word on the site — display, body, nav, and labels alike.
- **Weight strategy**: effectively a single weight (400). 700 appears only for emphasis links.
- **Transform / tracking**: labels, nav, eyebrows, and large display are **uppercase** with positive letter-spacing (0.8px on labels, scaling to 1.6px at hero size). Body stays sentence-case with a faint 0.32px track.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 40px / 400 / uppercase / 1.6px — the marquee headline |
| `display` | 32px / 400 / uppercase / 1.28px — section titles |
| `heading` | 24px / 400 / uppercase / 0.96px — feature headings |
| `heading-sub` | 20px / 400 / uppercase / 0.8px — sub-section headings |
| `body-large` | 20px / 400 / uppercase / 0.6px — large supporting lines |
| `body` | 16px / 400 / 0.32px — standard sentence-case body |
| `body-bold` | 16px / 700 — emphasis links, the one bold moment |
| `button` | 14px / 400 / uppercase / 0.8px — CTA and button text |
| `nav-label` | 12px / 400 / uppercase / 0.8px — nav items and eyebrows |
| `caption` | 12px / 400 / 0.6px — metadata, helper text |

### Principles
- **Tracking is the voice**: uppercase + positive letter-spacing on every label and headline is what makes the system feel editorial rather than commercial.
- **One weight, one face**: Maison Neue Book at 400 carries the whole site; bold is an exception, not a tier.
- **Calm cadence over contrast**: hierarchy comes from size and case, not from weight jumps or color.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Generous vertical rhythm (`{spacing.6xl}` = 96px) separates major sections; component internals stay measured (`{spacing.md}`–`{spacing.2xl}`).

### Grid & Container
- Max content width: ~1280px, centered, with full-bleed photography breaking the container
- Common pattern: a rigorous product grid (2-4 columns) of squared-off image cards with quiet type beneath
- Hero is typically a full-bleed image with a quiet uppercase headline and a single black CTA

### Whitespace Philosophy
- **White is the design**: the canvas does the work; whitespace and hairline borders separate, not boxes or fills
- **Photography-forward**: oversized imagery carries the page; chrome recedes
- **Rigor over softness**: a tight grid and squared corners read as discipline, not friendliness

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | The default — nearly the entire site |
| Hairline (Level 1) | `1px solid {colors.border}` | Card edges, dividers, section separation |
| Modal (Level 2) | `0 4px 20px` at ~15% black (`{colors.shadow-ambient}`) | The rare promo modal / overlay |
| Drop (Level 3) | `0 20px 16px` at ~10% black (`{colors.shadow-soft}`) | Dropdown / flyout menus |

**Shadow Philosophy**: Everlane is essentially flat. Separation is done with whitespace and hairline borders, not elevation. The only shadows that appear are on transient overlays (modals, dropdowns), and even those are soft and restrained. There is no resting card shadow, no hover lift — the page reads as paper-flat, which reinforces the squared, editorial discipline.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` / `sm` / `md` / `lg` | 0px | **Everything** — buttons, cards, inputs, image frames. The defining geometric move. |
| `pill` | 9999px | Reserved exclusively for circular icon close-buttons and avatars |

The system is radically square. Apart from a few circular utility buttons (modal close, avatar), **no element has a rounded corner.** Radius is not a scale here — it's a near-binary: 0px for structure, full-circle for the rare icon button.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Near-black (`{colors.ink}`) fill, white text, **0px radius**, `15px 32px` padding. The main CTA. Hover deepens to pure black (`{colors.accent-hover}`).
- **`button-outline`** — White fill, near-black text, `{colors.border-strong}` 1px outline, 0px radius. Hover fills `{colors.surface}`.
- **`button-text`** — Bare inline link styled bold (`{typography.body-bold}`), no fill, no radius. Hover dims to `{colors.ink-muted}`.

### Cards
- **`card`** — White surface, hairline `{colors.border}` edge (or none), **0px radius**, no resting shadow. Product cards are squared-off image frames with quiet type beneath.

### Inputs
- **`input`** — White fill, near-black border, **0px radius**, generous `15px` vertical padding. **`input-focus`** keeps the square frame and dims the assist outline to gray. **`input-filled`** uses a `{colors.surface-soft}` gray fill variant.

### Navigation
- **`nav-bar`** — White, pure-black uppercase labels (`{typography.nav-label}`), hairline bottom border. Calm, evenly tracked, no heavy chrome.

### Links & Eyebrows
- **`link`** — Pure-black bold text, no underline until hover; hover dims to `{colors.ink-muted}`.
- **`eyebrow`** — Uppercase, tracked Maison Neue Book label — the section-marker pattern.

## Do's and Don'ts

### Do
- Square every corner — buttons, cards, inputs, images all use `{rounded.none}` (0px). This is the brand.
- Keep the canvas pure white (`{colors.background}`) and let oversized photography do the visual work
- Set labels, nav, and headlines in **uppercase Maison Neue Book** with positive letter-spacing (`{typography.nav-label}` at 0.8px)
- Use near-black `{colors.ink}` (`#121212`) for the CTA — black is the only accent
- Separate with whitespace and hairline borders (`{colors.border}`) before reaching for any shadow
- Hold a single weight (400); use 700 (`{typography.body-bold}`) only for emphasis links
- Dim hover and focus to muted gray (`{colors.ink-muted}`) rather than introducing a color
- Give the CTA generous padding (`15px 32px`) so the squared block reads as deliberate

### Don't
- Don't round any corner of a button, card, input, or image — rounded corners break the entire language
- Don't introduce a chromatic brand color — there isn't one; black does the accent job
- Don't add gradients, drop shadows on cards, or hover lifts — the page is committedly flat
- Don't mix in a second typeface or a display weight — one face, one weight
- Don't set labels in sentence case or drop the letter-spacing — the tracking is the personality
- Don't add a dark marketing theme — Everlane's site is committedly light
- Don't crowd the photography — whitespace is non-negotiable

---

## Responsive Behavior

### Breakpoints
*(Many breakpoints surfaced in extraction; the table below summarizes the meaningful stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column product grid; hero photography goes full-bleed; nav collapses to a menu; type scales down but keeps uppercase tracking |
| Tablet | 640–1023px | Two-column product grid; hero copy sits over or beside imagery |
| Desktop | 1024–1279px | Full 3–4 column grid; multi-column lifestyle layouts |
| Large | ≥1280px | Max ~1280px container, centered; full-bleed imagery breaks the container edges |

### Touch Targets
- Buttons run tall with `15px 32px` padding — comfortable squared tap targets
- Uppercase nav labels stay legible at 12px; product cards carry generous tap area

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the black CTA persists
- **Grid**: product grid steps from 4 → 2 → 1 column
- **Type**: display scales down while preserving proportional uppercase letter-spacing
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- Photography is the hero — full-bleed on mobile, gridded on desktop, always square-cornered, always on white

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: **Black** (`{colors.accent}`) — there is no chromatic brand color
- Secondary text: Graphite (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA: Near-Black (`{colors.ink}`), hover pure black

### Example Component Prompts

- "Create a hero: full-bleed product photo on white (`{colors.background}`), a 40px uppercase near-black (`{colors.ink}`) headline in Maison Neue Book at weight 400 with letter-spacing 1.6px, and a single near-black CTA below with `15px 32px` padding and **0px border-radius**"
- "Build a primary button: near-black (`{colors.ink}`) fill, white text, **0px radius**, `15px 32px` padding, 14px uppercase Maison Neue Book at 0.8px tracking; hover deepens to pure black (`{colors.accent-hover}`)"
- "Build an outlined button: white fill, near-black text, 1px `{colors.border-strong}` border, **0px radius**, `15px 32px` padding; hover fills `{colors.surface}`"
- "Create a product card: white (`{colors.background}`) surface, **0px radius**, no shadow, a squared-off full-width image on top and a quiet uppercase 12px label (`{colors.ink}`, 0.8px tracking) beneath"
- "Design an email input: white fill, 1px near-black border, **0px radius**, `15px` vertical padding; on focus keep the square frame and dim the assist outline to gray (`{colors.ink-muted}`) — never round it"

### Iteration Guide

1. Start on pure white (`{colors.background}`). If you reached for a tinted or dark background, stop — Everlane is flat white.
2. **Square every corner.** If any button, card, input, or image has a border-radius, set it to 0px. This is the single most important rule.
3. There is no brand color. If you reached for a hue, recolor it near-black (`{colors.ink}`).
4. Set labels, nav, and headlines in uppercase Maison Neue Book with positive letter-spacing — sentence-case unstyled labels break the voice.
5. Hold one weight (400); only emphasis links go to 700.
6. Separate with whitespace and hairline borders (`{colors.border}`) — no card shadows, no hover lifts.
7. Let oversized photography carry the page; keep chrome minimal and the grid rigorous.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Everlane. Brand names and trademarks belong to their respective owners.