Pistachio Wash
#d9e9bbPromotional bar fill, seasonal event accent — the single chromatic note in the entire system, used sparingly for time-bound urgency
Everlane
everlane.com
Website preview
The design language
Everlane operates as a minimalist editorial fashion catalogue: near-total achromatic palette, one soft sage accent reserved for promotional urgency, and Maison Neue set almost entirely in uppercase with wide tracking. Photography carries nearly all visual weight — full-bleed editorial shots and tightly cropped product images sit on white canvases with zero decoration, zero shadows, and zero chrome. Type is the only ornament: tracked uppercase headings float over imagery, body copy stays minimal and quiet. Components are stripped to their essentials — thin text links, sharp-edged product tiles, no buttons, no cards, no panels. The result reads less like a storefront and more like a printed lookbook translated to screen.
Color palette
accent
neutral
Onyx
#000000Primary text, icons, hairline borders, nav typography, footer text — the dominant ink across every surface
Paper White
#ffffffPage canvas, product card backgrounds, hero text overlays, input fills
Soot
#121212Dark feature sections, inverted text on light surfaces, high-contrast blocks
Ink
#161912Near-black body text variant, deep borders — virtually indistinguishable from Onyx but carries a barely-warm cast
Graphite
#4c4c4cSecondary body text, muted descriptions, helper copy beneath headlines
Slate
#737373Tertiary text, captions, price labels, disabled links
Ash
#9b9b9bSubtle borders, dividers between product tiles, low-emphasis separators
Linen
#c8c0b8Warm taupe surface for editorial bands, soft section backgrounds — the only chromatic neutral
Typography
Type scale
Major Second (1.125) · 16px basedisplay
32px · 400 · 1.2 · 1.6px trackingThe quick brown fox jumps
heading-lg
24px · 400 · 1.2 · 1.2px trackingThe quick brown fox jumps
heading
20px · 400 · 1.25 · 0.8px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.8The quick brown fox jumps
text-15
15px · 400 · 1.2The quick brown fox jumps
text-14
14px · 400 · 1.8The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
text-12
12px · 400 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Maison Neue Book
- Weights
- 400, 700
- Sizes
- 10px, 12px, 14px, 15px, 16px, 20px, 24px, 32px
- Line height
- 1.00–2.25
- Letter spacing
- Ranges from 0.020em at 12px to 0.067em at 32px — tracking widens as size increases, reflecting the uppercase headline convention
- Fallback
- Inter, Helvetica Neue, Neue Haas Grotesk
Primary workhorse for nav, body, labels, prices, and most UI — used at 400 for body, 700 for emphasized inline text and section anchors
Additional typeface
Maison Neue Demi
- Weights
- 600
- Sizes
- 12px
- Line height
- 1.33
- Letter spacing
- 0.0200em
- Fallback
- Inter Semi Bold, Helvetica Neue Medium
Rare mid-weight emphasis for sub-headers and category labels — the half-step between Book and Book Bold
Additional typeface
Maison Neue
- Weights
- 400
- Sizes
- 12px, 16px, 24px
- Line height
- 1.33–1.50
- Letter spacing
- 0.0200em, 0.0400em
- Fallback
- Inter, Helvetica Neue
Secondary body variant for longer-form descriptive paragraphs in editorial sections
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
- Letter spacing
- 0.038
GTStandard-M — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Section gap
- 64-80px
- Element gap
- 8px
Border radius
tags
0pxcards
0pximages
0pxinputs
0pxbuttons
0pxSpacing scale
0px1px2px3px4px5px6px8px10px12px15px16px20px24px30px34px36px48px71px83px113px149pxGuidelines
Do
- Set all UI text in Maison Neue Book (or Inter substitute) at 400 — weight 700 is reserved for inline emphasis, never for standalone headlines
- Use uppercase with tracking 0.033-0.067em for every label, nav item, product name, and headline — this is the system's signature
- Use Pistachio Wash (#d9e9bb) exclusively for the top promo bar; never apply it to buttons, cards, or section backgrounds
- Use Text Link CTA pattern (underlined uppercase 12px) as the only interactive component — no filled buttons, no outlined buttons
- Keep all corners sharp: 0px radius on cards, buttons, images, inputs, and tags — rounding would break the editorial print aesthetic
- Let photography fill the full viewport width for hero and editorial sections — no max-width container, no gutters around imagery
- Use #c8c0b8 (Linen) as the only warm surface for editorial brand-story bands; everything else stays white or achromatic
Don’t
- Do not introduce colored buttons, badges, or filled CTAs — the system has no primary action color and never should
- Do not add drop shadows, box-shadows, or any elevation to cards, images, or product tiles — surfaces are flat and flush
- Do not use rounded corners on any element — 0px radius is non-negotiable across the entire system
- Do not set body text in anything other than 400 weight — bolding body copy breaks the restrained editorial voice
- Do not use color to create hierarchy — rely on size, tracking, and uppercase/lowercase contrast instead
- Do not add decorative dividers, ornamental rules, or graphic flourishes between sections — rely on whitespace and Linen surface shifts
- Do not use Pistachio Wash as a hover state, focus ring, or link color — it is strictly a promotional surface treatment
Components
Promo Bar
Seasonal sale announcement stripFull-width band at #d9e9bb (Pistachio Wash), 40-48px tall, centered uppercase text in Onyx at 12px weight 400 with 0.033em tracking. Items separated by 24-32px gaps. No borders, no radius. Single chromatic element in the system — replace or remove for non-promotional periods.
Primary Navigation
Site-wide top navigationWhite background, three-zone layout: left-aligned nav links (WOMEN, MEN, SUSTAINABILITY, EVERWORLD) at 12px uppercase with 0.020em tracking in Onyx, centered wordmark in Onyx at ~20px with wide tracking, right-aligned utility links (SEARCH, ACCOUNT, BAG) in same style. ~56px tall. Active nav item gets a thin Onyx underline.
Hero Overlay
Full-bleed editorial homepage heroEdge-to-edge photograph, minimum 600px tall. Headline in white uppercase 24-32px, weight 400, tracking 0.050-0.067em, positioned lower-left over the image. Subhead in white at 14-15px, weight 400, one or two lines. CTA is a text link in white with thin underline, 12px uppercase, 0.040em tracking — no button chrome. No dark gradient overlay; text sits directly on the photograph relying on contrast zones.
Editorial Split Section
Brand storytelling block50/50 split: large photograph left, text block right on white. Headline in Onyx uppercase at 20-24px with 0.043-0.060em tracking. Body paragraphs in Graphite at 14-15px, weight 400, generous line-height (1.6-1.8). Text block vertically centered, max-width ~480px. Followed by a text-link CTA with thin Onyx underline.
Product Card
Individual product tile in gridSharp-edged rectangle, zero radius. Full-width product photograph with no border or padding. Below image: product name at 12px uppercase Onyx with 0.033em tracking, then price at 12px Onyx directly beneath. No card background, no shadow, no hover state beyond subtle image opacity shift. ~16px vertical gap between image and text.
Product Grid
4-column product listing4 equal-width columns on desktop, 2 on tablet, 1 on mobile. Column gap 0px (items separated only by hairline borders). Section title above grid in 12px uppercase Onyx with 0.033em tracking, left-aligned with no decoration. Optional 1px Ash divider beneath the section label.
Text Link CTA
Primary call-to-action elementNo button — the system uses underlined text links. 12px uppercase Onyx with 0.040em tracking, 1px solid Onyx underline offset 4px below baseline. Hover darkens to #4c4c4c (Graphite). No fill, no border, no padding, no radius. This is the only interactive component pattern.
Section Heading
Category or collection labelUppercase Onyx at 12-14px, weight 400, tracking 0.033-0.040em. Left-aligned. No decorative lines, no spacing flourishes. Sits directly above content with 16-24px margin-bottom.
Price Label
Product price displayOnyx at 12px weight 400, no tracking adjustment from body. Positioned directly below product name with 4px gap. Currency symbol (€, $, etc.) inherits same size. No strikethrough for sale prices in primary data — keep minimal.
Footer
Site-wide footerWhite or very light gray background, multi-column link grid. Column headers in 12px uppercase Onyx with 0.033em tracking. Links below in 12-14px Onyx weight 400, stacked with 8px vertical gap. Hairline 1px Ash divider above footer zone. Generous 48-64px top padding.
Surfaces & elevation
Level 0
Canvas
#ffffffBase page background, dominant surface across most screens
Level 1
Promo Bar
#d9e9bbTop announcement strip for sales and events
Level 2
Editorial Band
#c8c0b8Warm taupe section backgrounds for brand-story content
Level 3
Dark Section
#121212Inverted feature blocks, footer, high-contrast editorial moments
Level 4
Deepest Surface
#000000Full-black closures, dramatic hero backgrounds
The system intentionally eliminates all shadows. Surfaces are defined by flat color shifts (white → Linen → dark) and generous whitespace rather than elevation. This is a deliberate editorial-print decision: no component floats, no card lifts off the page, no depth illusion exists. Hierarchy is built through scale, tracking, and photography scale alone.
Layout & imagery
Layout
Full-bleed layout with no max-width container on any section. Each section edge runs to the viewport edge. Vertical rhythm: promo bar (40-48px) → nav (56px) → full-bleed hero (600px+) → editorial split bands alternating image-left/text-right → product grids in 4 columns → footer. Section transitions are seamless — no horizontal rules, no cards, no boxed containers. Spacing between major sections is 64-80px. The text blocks within editorial splits are centered vertically and constrained to ~480px max-width. Navigation is a sticky top bar with the wordmark centered. No sidebar, no mega-menu panels — nav links route to destination pages directly.
Imagery
Photography dominates the visual system at roughly 70-80% of screen real estate on key pages. Treatment is editorial fashion editorial: full-bleed, sharp-edged, no masks or rounded crops. Models are shot in minimal architectural environments — concrete walls, beige plaster, natural light — to keep focus on garments. Color treatment is naturalistic with warm neutral grading (beiges, taupes, soft blacks). Product photography is shot on pure white/light gray seamless backgrounds with no lifestyle context — the garment IS the hero. No illustrations, no abstract graphics, no 3D renders, no icon-based imagery. Icon usage is limited to tiny utility icons (search, account, bag) rendered as 1px stroke outlines in Onyx.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 (Onyx) - background: #ffffff (Paper White) - border: #9b9b9b (Ash) for dividers, #000000 for active states - accent: #d9e9bb (Pistachio Wash) — promo bar only - secondary surface: #c8c0b8 (Linen) for editorial bands - primary action: no distinct CTA color Example Component Prompts: No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Create a product grid section: 4 equal columns, 0px column gap, no card backgrounds, no borders, no shadows. Section label 'SHOP CULT FAVORITES' in Onyx 12px uppercase letter-spacing 0.40px (0.033em) with 16px margin-bottom. Each product tile: full-bleed product photo (no padding), then 12px uppercase Onyx product name with 0.40px tracking, then 12px Onyx price directly below with 4px gap. 4. Create the promo bar: full-width #d9e9bb band, 44px tall, centered content. Items 'SPRING ESSENTIALS EVENT' and 'UP TO 40% OFF' and 'SHOP WOMEN' and 'SHOP MEN' in Onyx 12px weight 400, uppercase, letter-spacing 0.40px, separated by 32px gaps. No borders, no radius. 5. Create a text-link navigation: white background, 56px tall. Left zone: 'WOMEN MEN SUSTAINABILITY EVERWORLD' in Onyx 12px uppercase letter-spacing 0.24px. Center zone: 'EVERLANE' wordmark in Onyx 20px uppercase letter-spacing 0.80px. Right zone: 'SEARCH ACCOUNT BAG' in Onyx 12px uppercase letter-spacing 0.24px. Active item gets 1px Onyx underline at baseline.
Uppercase Tracking Convention
The signature typographic move is uppercase text with wide tracking across all sizes — from 10px nav labels to 32px hero headlines. Smaller text uses less absolute tracking but proportionally more (0.040em at 12px), while larger text uses more absolute pixels but similar em ratios. This is a print-editorial convention adapted to screen: every label, price, and heading reads as if typeset in a fashion magazine. Body paragraphs in mixed case are the quiet exception, not the rule. Never set headlines or UI labels in lowercase — the system would lose its entire voice.
Similar brands
Aesop
Same editorial restraint — full-bleed photography, uppercase tracked labels, near-zero color, no buttons or shadows, type-as-ornament approach
The Row
Identical minimalist fashion language — all-white canvas, sharp-edged product tiles, widely tracked uppercase labels, warm neutral photography on plaster backgrounds
Toteme
Shared monochrome Scandinavian fashion aesthetic — full-bleed editorial photography, no decorative chrome, uppercase wordmark, sharp 0px corners throughout
M.Gemi
Same tight grid product layouts with flush tiles, uppercase tracked product names, prices directly below — the fashion e-commerce minimalism pattern
COS
Editorial fashion brand using generous whitespace, uppercase tracking on all UI labels, full-bleed campaign imagery, and zero decorative shadows or borders
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
