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

# Everlane · Design System

> Modern essentials, framed with quiet editorial clarity

**Theme:** light · **Industry:** fashion · **Source:** https://www.everlane.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._

Everlane’s homepage pairs restrained monochrome navigation and product grids with immersive fashion and lifestyle photography. A measured neutral palette lets imagery lead, while concise uppercase labels keep shopping paths clear.

## North star

Keep the interface quiet and precise so full-bleed fashion photography and clearly organized products do the talking.

## Overview

The visual system is anchored by Gallery White (#ffffff), which carries the header, open content areas, and footer, with Ink (#000000) providing crisp navigation and copy. Soft Stone (#f8f6f5) appears behind product cards, while Oat Paper (#f4edd9) is reserved for a warm promotional band and hairline borders. The homepage alternates clean, light shopping sections with broad, edge-to-edge lifestyle photography; the imagery supplies most of the page’s changing colour and emotional tone. Maison Neue Book is the dominant voice: compact uppercase navigation and captions contrast with more spacious, centered hero messaging. Product displays use orderly columns and minimal framing, preserving attention on garments. Generous white intervals separate dense product rows from large campaign imagery. Buttons and links remain understated rather than looking like heavy UI controls, supporting an editorial storefront that feels calm, direct, and image-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary page canvas, header, open content areas, footer, and light text over dark campaign photography. |
| Ink | `#000000` | `--color-ink` | neutral | Main navigation, headings, body copy, footer text, and understated link labels. |
| Smoke Trace | `#7d7d7d` | `--color-smoke-trace` | semantic | Measured only in a gradient artifact; not a defining interface colour in the screenshots. |
| Oat Paper | `#f4edd9` | `--color-oat-paper` | surface | Warm promotional section band and subtle borders or separators. |
| Soft Stone | `#f8f6f5` | `--color-soft-stone` | surface | Pale backing for product cards and softly tinted content surfaces. |
| Quiet Silver | `#ececec` | `--color-quiet-silver` | semantic | Faint footer hairlines; secondary divider detail rather than a broad page surface. |
| Muted Graphite | `#737373` | `--color-muted-graphite` | neutral | Secondary copy and subdued footer or supporting text. |
| Deep Ash | `#4c4c4c` | `--color-deep-ash` | neutral | Occasional darker secondary footer or button text; not a prominent brand surface. |
| Olive Ink | `#161912` | `--color-olive-ink` | neutral | Selected shopping links and text accents, including shop-arrival calls to action. |
| Slate Blue | `#27456e` | `--color-slate-blue` | accent | Slim announcement strip at the top of the page; use sparingly as a promotional accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f6f5` (Soft Stone) · `--color-surface-2` → `#f4edd9` (Oat Paper) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#737373` (Muted Graphite) · `--color-border` → `#f4edd9` (Oat Paper) · `--color-accent` → `#27456e` (Slate Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f6f5` | 19.49:1 | AAA |
| `#000000` | `#f4edd9` | 17.96:1 | AAA |
| `#ffffff` | `#f8f6f5` | 1.08:1 | fail |
| `#ffffff` | `#f4edd9` | 1.17:1 | fail |
| `#737373` | `#ffffff` | 4.74:1 | AA |
| `#737373` | `#f8f6f5` | 4.4:1 | AA-large |
| `#737373` | `#f4edd9` | 4.06:1 | AA-large |
| `#27456e` | `#ffffff` | 9.71:1 | AAA |
| `#27456e` | `#f8f6f5` | 9.01:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.51))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Maison Neue Book | `--font-body` | webfont | 400, 700, 500 | Primary family for navigation, headlines, product labels, body copy, and buttons. | Inter |
| Maison Neue | `--font-maison-neue` | webfont | 400 | Supporting Maison Neue webfont family, measured as a smaller share of page typography. | Inter |
| Maison Neue Demi | `--font-maison-neue-demi` | webfont | 600 | Limited semibold emphasis within the broader Maison Neue family. | Inter |

- **Maison Neue Book:** Mostly regular weight; use uppercase for navigation, captions, and buttons, with tracked display and section headings.
- **Maison Neue:** Keep it visually consistent with the Book face; restrained sans-serif forms and moderate tracking.
- **Maison Neue Demi:** Use sparingly for emphasis; the page overall favors regular weights over bold typographic contrast.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 0.67 | 0.04em | uppercase | Maison Neue Book | Large uppercase campaign headline layered over the hero image. |
| h1 | 24px | 400 | 0.96 | 0.019em | — | Maison Neue Book | Primary page or campaign title, set plainly with modest tracking. |
| h2 | 23px | 400 | 1.39 | 0.04em | uppercase | Maison Neue Book | Uppercase section headings introducing editorial or shopping content. |
| h3 | 21px | 400 | 1.52 | 0.04em | capitalize | Maison Neue Book | Subsection headings and product-feature titles with light emphasis. |
| h4 | 20px | 400 | 1.2 | 0.03em | — | Maison Neue Book | Compact supporting headings within content sections. |
| body | 14px | 400 | 1.33 | 0.02em | — | Maison Neue Book | Short descriptive copy, product information, and supporting text. |
| caption | 12px | 400 | 1.33 | 0.02em | uppercase | Maison Neue Book | Uppercase product captions and compact image labels. |
| button | 10px | 400 | 1.6 | 0.024em | uppercase | Maison Neue Book | Small uppercase shopping actions and utility calls to action. |
| nav | 12px | 400 | 1.3 | 0.02em | uppercase | Maison Neue Book | Uppercase category navigation and top-bar utility links. |
| link | 14px | 400 | 1.43 | 0.02em | — | Maison Neue Book | Inline shopping, editorial, and footer links. |
| eyebrow | 12px | 400 | 1.33 | 0.04em | uppercase | Maison Neue Book | Small uppercase context label above campaign or section headings. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 6, 8, 12, 15, 16, 20, 24, 36, 40, 84 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

Use a full-width canvas with a slim announcement strip above a clean, horizontal navigation bar. The hero and editorial campaign panels span the viewport, while category and product areas resolve into orderly multi-column rows. Alternate image-led bands with white or softly tinted shopping sections, keeping text aligned to the relevant image or grid. Spacing feels comfortable, with clear separation between major sections and compact product labels. A fixed maximum page width was not measured; preserve the screenshot’s broad, fluid composition rather than imposing an invented value.

## Shape & elevation

- Radius: button `50%`
- Shadow `hairline` (button): `rgba(18, 18, 18, 0) 0px 0px 0px 2px`
- Motion: standard transition `0.5s cubic-bezier(0.37, 0.01, 0, 0.98)` on interactive elements.

The interface is largely flat, with no meaningful card shadows or raised panels. Product cards use a pale surface and minimal framing, while fine borders and separators provide quiet structure. The hero’s translucent dark gradient helps white copy remain readable over photography; maintain clear layering without adding heavy drop shadows.

## Imagery

Fashion and lifestyle photography is the defining visual content: full-bleed campaign portraits, garment close-ups, store scenes, and product-on-model imagery. Use naturalistic colour and soft, realistic lighting; crop generously so people and materials fill the frame. Hero copy sits directly over photography, while product imagery remains neatly tiled. Avoid decorative illustration or 3D elements that would compete with the photography.

## Components

### Announcement strip

A narrow Slate Blue (#27456e) top band with centered, compact uppercase promotional copy and shopping links.

### Primary navigation

White horizontal header with category links at left, centered wordmark, and search, account, and bag utilities at right.

### Campaign hero

Full-width lifestyle photograph with centered white campaign text and small shopping links; use a dark image overlay only as needed for legibility.

### Editorial image panels

Large adjacent lifestyle or material-led panels with short uppercase titles and low-key text links over the image.

### Product card grid

Evenly arranged product imagery on white or Soft Stone (#f8f6f5), with concise uppercase or compact product labels below.

### Footer

Light, multi-column link area with small uppercase group labels, subdued supporting text, and a newsletter signup field.

### Measured component styles

- **Primary button** (“Skip to content”): background #121212 · text #ffffff · radius 0px · padding 0px · 400 15px Maison Neue Book
- **Secondary button** (“<”): transparent background · text #000000 · border 1px solid #000000 · radius 999px · padding 0px · 400 16px Maison Neue Book
- **Link** (“NATURAL ISN’T OUR NEW DIRECTION. IT’S OU”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Maison Neue Book
- **Input**: transparent background · text #121212 · radius 0px · padding 15px 50px 15px 15px · 400 12px Maison Neue Book
- **Card**: background #f8f6f5 · text #000000 · radius 0px · padding 0px · 400 16px Maison Neue Book
- **Navigation item** (“WOMEN”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Maison Neue Book · uppercase

## Do

- Let campaign photography dominate broad sections.
- Keep navigation and shopping labels compact and uppercase.
- Use Gallery White (#ffffff) as the primary canvas.
- Reserve Slate Blue (#27456e) for a restrained promotional strip.
- Use Soft Stone (#f8f6f5) behind product cards.
- Separate editorial imagery and product grids with comfortable whitespace.

## Don't

- Do not add heavy shadows or raised card treatments.
- Do not use saturated interface colours beyond measured accents.
- Do not clutter image-led sections with long copy.
- Do not add rounded card corners; keep framing square and simple.
- Do not let product labels overwhelm the product photography.
- Do not invent page-width or spacing values beyond the measured system.

## Agent prompt

Build a new Everlane-style fashion storefront page with a restrained, editorial rhythm. Use Gallery White (#ffffff) as the canvas, Ink (#000000) for navigation and copy, Soft Stone (#f8f6f5) for product-card backing, and Oat Paper (#f4edd9) only for a warm promotional band or subtle separators. Keep Slate Blue (#27456e) limited to a slim announcement area. Use Maison Neue Book or a close sans-serif substitute, with compact uppercase navigation and captions, and regular-weight headlines. Pair full-width lifestyle photography with orderly product grids, short shopping links, and generous breathing room. Keep cards flat, edges square, and borders faint. Avoid decorative interface elements, loud colour, and excessive copy; the photography and garments should remain the strongest visual focus.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Light footer arranged in four link columns, with a newsletter signup area and a compact legal row. | grouped utility links, newsletter email signup, legal links | white background, small uppercase labels, subtle dividers, multi-column layout |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 18,18,18;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 18,18,18;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 18,18,18;
--color-link: 18,18,18;
--color-badge-foreground: 18,18,18;
--color-badge-background: 255,255,255;
--color-badge-border: 18,18,18;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: Assistant, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: Assistant, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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