What is Everlane's primary brand color?

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.

What typography does Everlane use, and what should I use if Maison Neue is unavailable?

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.

Why does Everlane use 0px corners on the primary CTA?

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.

When should I use the sky-blue focus accent?

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.

Can I use this DESIGN.md to build my own React apparel storefront?

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.

What's missing from this DESIGN.md spec?

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.

Everlane Design System

Everlane's design system as a DESIGN.md file.

About Everlane DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source everlane.com

E-commerce & Retail

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.

What makes it distinct

Zero-radius CTA geometryprimary button sits at `0px` corners with `#121212` fill and white text, 47px height with no visible padding inset
Uppercase nav typographyMaison Neue Book 12px with `0.24px` tracking carries every top-nav link, every category cap, and every footer column header
Single chromatic momentsky `#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`

Live at everlane.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

everlane.com

Explore Everlane

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Everlane design system FAQ

Common questions about Everlane's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Everlane — official site

The Everlane storefront this DESIGN.md was extracted from on 2026-05-13.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Everlane in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→