# Everlane · Design system migration spec

> Source: https://www.everlane.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for how a highly restrained, monochromatic UI can effectively showcase a premium product line through typography and photography.

## 1. Identity DNA

Everlane's design system operates like a curated gallery of essential garments, where the architecture of the interface is intentionally restrained to direct focus toward the product. Every component, from the neutral palette to the uppercase typography, serves to create a clean, minimal framework that lets high-quality photography and radical transparency speak for themselves.

**One-liner:** Clean, minimal aesthetic focused on high-quality photography and typography with a neutral palette.
**Keywords:** transparency · radical transparency · minimal · essential · timeless
**Analogy:** A curated gallery of essential garments

## 2. Color

The color system is a strict neutral palette of white, off-white, and near-black, with muted grays providing functional differentiation. This deliberate absence of chromatic color in the UI creates a quiet canvas where product photography provides the primary visual interest and emotional tone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F6F5` | card background |
| `--bg-quiet` | `#EFEFEF` | quiet area |
| `--ink` | `#121212` | body text |
| `--ink-soft` | `#4C4C4C` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgba(18, 18, 18, 0.1)` | divider |

**Color principle:** Neutral palette with photography providing the primary visual interest.

The principle is clear: the interface should recede, allowing the product's own materiality and color to dominate the viewer's attention.

## 3. Typography

Typography functions as the primary voice of the interface, with a clean geometric grotesque sans-serif used almost exclusively in uppercase with generous letter-spacing. This typographic treatment establishes a confident, direct tone while ensuring consistent hierarchy across hero headlines, section headings, navigation, and utility text.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Hero headlines |
| heading | 24px | 1.2 | 400 | 0.6px | Section headings and product names |
| body | 16px | 1.8 | 400 | 0.48px | General body text and descriptions |
| small | 12px | 1.33 | 400 | 0.6px | Navigation, metadata, and utility text |

**Type rules:**
- All primary text is uppercase with generous letter-spacing.

## 4. Spacing

Spacing follows a consistent 4px base unit, creating a predictable rhythm that supports the layout's generous white space and grid-based structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of a 4px base unit for spacing.

## 5. Surfaces

Surface treatment is deliberately minimal, employing subtle, functional shadows and thin borders for separation rather than decorative effect. The visual depth is shallow, keeping the focus on content layers and the interplay between clean typography and photographic elements.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.15) 0px 4px 20px 0px
- **Borders:** Minimal, mostly 1px solid borders for subtle separation.

## 6. Layout

The layout skeleton is a clean, centered grid that begins with a full-width photographic hero followed by a structured product grid. This grid-based framework, combined with generous white space, creates a sense of order and premium restraint that allows each element to breathe.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Grid-based layout with generous white space.

## 7. Motion & Interaction

Motion philosophy prioritizes subtle, functional transitions that acknowledge state changes without drawing attention to the interface itself. Opacity shifts on hover and smooth font-size transitions for interactive elements provide feedback while maintaining the system's restrained character.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.37, 0.01, 0, 0.98)`
- **Patterns:**
  - Subtle opacity transitions for hover states
  - Font-size transitions for interactive elements

- **Hover:** Subtle opacity reduction on text and image elements.
- **Click:** Standard pointer cursor on interactive elements.
- **Transition:** Smooth transitions for color and opacity changes.
- **Keyboard:** Standard keyboard navigation support.

## 8. Voice & Don'ts

The editorial voice is confident, minimal, and direct, manifesting in short, punchy all-caps statements and action-oriented CTAs. This tone reinforces the brand's emphasis on essentialism and transparency, communicating with the same restraint that defines the visual system.

- **Tone:** Confident, minimal, and direct.
- **Headline style:** Short, punchy, all-caps statements.
- **CTA style:** Action-oriented, uppercase text.
- **Avoid:** Avoid overly decorative fonts. / Avoid bright, saturated colors in the UI. / Avoid cluttered layouts or excessive visual elements.

### Don'ts
- ❌ Don't use decorative or script fonts — screenshot shows a clean, geometric grotesque sans-serif.
- ❌ Don't use rounded corners on cards or containers — screenshot shows sharp, rectangular edges.
- ❌ Don't use bright, saturated accent colors — screenshot uses a strict neutral palette of black, white, and grays.
- ❌ Don't use heavy drop shadows or complex 3D effects — screenshot shows minimal, subtle shadows.
- ❌ Don't use center-aligned text for body copy — screenshot shows left-aligned or centered only for headlines.
- ❌ Don't use lowercase for navigation and section headers — screenshot shows all-uppercase text with wide letter-spacing.

The system deliberately excludes decorative fonts, bright saturated accent colors, rounded corners, and cluttered layouts, enforcing a disciplined minimalism that is the core of its identity.

## System Prompt (paste into AI tool)

```
This is a premium, minimal e-commerce site for a modern clothing brand. The design DNA is built on a strict neutral palette of white (#FFFFFF), off-white (#F8F6F5), and near-black (#121212). Typography is a clean grotesque sans-serif, used almost exclusively in uppercase with wide letter-spacing for navigation and headings. Layout is grid-based with generous white space, allowing high-quality photography to dominate. Key critical donts: do not use bright accent colors, do not use decorative fonts, and do not use rounded corners on major components. The overall feel is restrained, premium, and focused on product photography.
```