# Everlane

> # Everlane — Style Reference

## Prompt Content

```
# Everlane — Style Reference
> Minimalist atelier trên nền vải linen thô. Tường trắng, kiến trúc trần trụi, một dải ánh sáng xanh sage duy nhất.

**Theme:** light

Everlane hoạt động như một catalogue thời trang biên tập tối giản: bảng màu gần như hoàn toàn achromatic, một điểm nhấn sage mềm duy nhất dành cho thông điệp khuyến mãi, và Maison Neue được đặt gần như hoàn toàn ở dạng uppercase với tracking rộng. Nhiếp ảnh gánh gần như toàn bộ trọng lượng thị giác — ảnh editorial full-bleed và ảnh sản phẩm crop sát đặt trên nền trắng, không trang trí, không đổ bóng, không chrome. Typography là vật trang trí duy nhất: heading uppercase có tracking nổi trên hình ảnh, body text tối giản và lặng lẽ. Các component được lược bỏ đến mức tối thiểu — text link mảnh, product tile góc sắc, không button, không card, không panel. Kết quả đọc giống một cuốn lookbook in ấn được chuyển lên màn hình hơn là một cửa hàng trực tuyến.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Onyx | `#000000` | `--color-onyx` | Primary text, icon, hairline border, nav typography, footer text — mực chủ đạo trên mọi bề mặt |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nền product card, hero text overlay, input fill |
| Soot | `#121212` | `--color-soot` | Dark feature section, inverted text trên bề mặt sáng, khối tương phản cao |
| Ink | `#161912` | `--color-ink` | Biến thể body text gần đen, deep border — gần như không phân biệt được với Onyx nhưng mang một chút ấm nhẹ |
| Graphite | `#4c4c4c` | `--color-graphite` | Secondary body text, mô tả muted, helper copy bên dưới headline |
| Slate | `#737373` | `--color-slate` | Tertiary text, caption, nhãn giá, disabled link |
| Ash | `#9b9b9b` | `--color-ash` | Border nhẹ, divider giữa các product tile, separator ít quan trọng |
| Linen | `#c8c0b8` | `--color-linen` | Bề mặt taupe ấm cho editorial band, nền section mềm — neutral chromatic duy nhất |
| Pistachio Wash | `#d9e9bb` | `--color-pistachio-wash` | Promotional bar fill, điểm nhấn sự kiện theo mùa — nốt màu duy nhất trong toàn bộ hệ thống, dùng tiết kiệm cho tính cấp bách có thời hạn |

## Tokens — Typography

### Maison Neue Book — Workhorse chính cho nav, body, label, giá và hầu hết UI — dùng weight 400 cho body, 700 cho inline text nhấn mạnh và section anchor · `--font-maison-neue-book`
- **Thay thế:** Inter, Helvetica Neue, Neue Haas Grotesk
- **Weights:** 400, 700
- **Kích thước:** 10px, 12px, 14px, 15px, 16px, 20px, 24px, 32px
- **Line height:** 1.00–2.25
- **Letter spacing:** Từ 0.020em ở 12px đến 0.067em ở 32px — tracking mở rộng khi kích thước tăng, phản ánh quy ước headline uppercase
- **Vai trò:** Workhorse chính cho nav, body, label, giá và hầu hết UI — dùng weight 400 cho body, 700 cho inline text nhấn mạnh và section anchor

### Maison Neue Demi — Nhấn mạnh mid-weight hiếm cho sub-header và category label — nửa bước giữa Book và Book Bold · `--font-maison-neue-demi`
- **Thay thế:** Inter Semi Bold, Helvetica Neue Medium
- **Weights:** 600
- **Kích thước:** 12px
- **Line height:** 1.33
- **Letter spacing:** 0.0200em
- **Vai trò:** Nhấn mạnh mid-weight hiếm cho sub-header và category label — nửa bước giữa Book và Book Bold

### Maison Neue — Biến thể body thứ hai cho đoạn mô tả dài hơn trong editorial section · `--font-maison-neue`
- **Thay thế:** Inter, Helvetica Neue
- **Weights:** 400
- **Kích thước:** 12px, 16px, 24px
- **Line height:** 1.33–1.50
- **Letter spacing:** 0.0200em, 0.0400em
- **Vai trò:** Biến thể body thứ hai cho đoạn mô tả dài hơn trong editorial section

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Kích thước:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### GTStandard-M — GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-gtstandard-m`
- **Weights:** 400
- **Kích thước:** 16px
- **Line height:** 1.5
- **Letter spacing:** 0.038
- **Vai trò:** GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 10px | 1.2 | 0.4px | `--text-caption` |
| heading | 20px | 1.25 | 0.8px | `--text-heading` |
| heading-lg | 24px | 1.2 | 1.2px | `--text-heading-lg` |
| display | 32px | 1.2 | 1.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 36 | 36px | `--spacing-36` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 0px |
| cards | 0px |
| images | 0px |
| inputs | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 64-80px
- **Element gap:** 8px

## Components

### Promo Bar
**Vai trò:** Dải thông báo giảm giá theo mùa

Band full-width màu #d9e9bb (Pistachio Wash), cao 40-48px, text uppercase căn giữa màu Onyx ở 12px weight 400 với tracking 0.033em. Các mục cách nhau 24-32px. Không border, không radius. Element màu duy nhất trong hệ thống — thay thế hoặc loại bỏ trong giai đoạn không khuyến mãi.

### Primary Navigation
**Vai trò:** Điều hướng đầu trang toàn site

Nền trắng, bố cục ba vùng: nav link căn trái (WOMEN, MEN, SUSTAINABILITY, EVERWORLD) ở 12px uppercase với tracking 0.020em màu Onyx, wordmark căn giữa màu Onyx ở ~20px với tracking rộng, utility link căn phải (SEARCH, ACCOUNT, BAG) cùng style. Cao ~56px. Nav item active có underline Onyx mảnh.

### Hero Overlay
**Vai trò:** Hero editorial full-bleed ở trang chủ

Ảnh edge-to-edge, cao tối thiểu 600px. Headline màu trắng uppercase 24-32px, weight 400, tracking 0.050-0.067em, đặt ở góc dưới bên trái phủ lên ảnh. Subhead màu trắng ở 14-15px, weight 400, một hoặc hai dòng. CTA là text link màu trắng với underline mảnh, 12px uppercase, tracking 0.040em — không button chrome. Không dark gradient overlay; text đặt trực tiếp lên ảnh dựa vào vùng tương phản.

### Editorial Split Section
**Vai trò:** Khối kể chuyện thương hiệu

Chia 50/50: ảnh lớn bên trái, khối text bên phải trên nền trắng. Headline Onyx uppercase ở 20-24px với tracking 0.043-0.060em. Body paragraph màu Graphite ở 14-15px, weight 400, line-height rộng (1.6-1.8). Khối text căn giữa theo chiều dọc, max-width ~480px. Theo sau là text-link CTA với underline Onyx mảnh.

### Product Card
**Vai trò:** Tile sản phẩm riêng lẻ trong grid

Hình chữ nhật góc sắc, zero radius. Ảnh sản phẩm full-width không border, không padding. Bên dưới ảnh: tên sản phẩm ở 12px uppercase Onyx với tracking 0.033em, sau đó giá ở 12px Onyx ngay bên dưới. Không card background, không shadow, không hover state ngoài hiệu ứng opacity ảnh nhẹ. Khoảng cách dọc ~16px giữa ảnh và text.

### Product Grid
**Vai trò:** Danh sách sản phẩm 4 cột

4 cột bằng nhau trên desktop, 2 cột trên tablet, 1 cột trên mobile. Column gap 0px (các mục chỉ cách nhau bằng hairline border). Tiêu đề section phía trên grid ở 12px uppercase Onyx với tracking 0.033em, căn trái, không trang trí. Divider Ash 1px tùy chọn bên dưới nhãn section.

### Text Link CTA
**Vai trò:** Element call-to-action chính

Không button — hệ thống dùng text link có gạch chân. 12px uppercase Onyx với tracking 0.040em, underline 1px solid Onyx cách baseline 4px. Hover chuyển sang #4c4c4c (Graphite). Không fill, không border, không padding, không radius. Đây là pattern interactive component duy nhất.

### Section Heading
**Vai trò:** Nhãn category hoặc collection

Uppercase Onyx ở 12-14px, weight 400, tracking 0.033-0.040em. Căn trái. Không đường kẻ trang trí, không spacing flourishes. Đặt trực tiếp phía trên nội dung với margin-bottom 16-24px.

### Price Label
**Vai trò:** Hiển thị giá sản phẩm

Onyx ở 12px weight 400, không điều chỉnh tracking so với body. Đặt trực tiếp bên dưới tên sản phẩm với gap 4px. Ký hiệu tiền tệ (€, $, v.v.) cùng kích thước. Không gạch ngang cho giá sale trong dữ liệu chính — giữ tối giản.

### Footer
**Vai trò:** Footer toàn site

Nền trắng hoặc xám rất nhạt, grid link nhiều cột. Column header ở 12px uppercase Onyx với tracking 0.033em. Link bên dưới ở 12-14px Onyx weight 400, xếp chồng với gap dọc 8px. Hairline divider Ash 1px phía trên footer zone. Padding trên rộng 48-64px.

## Do's and Don'ts

### Nên làm
- Đặt tất cả UI text ở Maison Neue Book (hoặc Inter thay thế) weight 400 — weight 700 chỉ dành cho inline emphasis, không bao giờ dùng cho headline độc lập
- Dùng uppercase với tracking 0.033-0.067em cho mọi label, nav item, tên sản phẩm và headline — đây là signature của hệ thống
- Dùng Pistachio Wash (#d9e9bb) độc quyền cho promo bar trên cùng; không bao giờ áp dụng cho button, card hoặc nền section
- Dùng Text Link CTA pattern (uppercase 12px có gạch chân) làm interactive component duy nhất — không filled button, không outlined button
- Giữ tất cả góc sắc: 0px radius trên card, button, ảnh, input và tag — bo góc sẽ phá vỡ thẩm mỹ editorial in ấn
- Để ảnh chiếm toàn bộ viewport width cho hero và editorial section — không max-width container, không gutter xung quanh ảnh
- Dùng #c8c0b8 (Linen) làm bề mặt ấm duy nhất cho editorial brand-story band; mọi thứ khác giữ trắng hoặc achromatic

### Không nên làm
- Không thêm button màu, badge hoặc filled CTA — hệ thống không có primary action color và không bao giờ nên có
- Không thêm drop shadow, box-shadow hoặc bất kỳ elevation nào cho card, ảnh hoặc product tile — bề mặt phẳng và flush
- Không dùng rounded corner trên bất kỳ element nào — 0px radius là bất khả thương lượng trên toàn bộ hệ thống
- Không đặt body text ở weight khác ngoài 400 — bolding body copy phá vỡ giọng văn editorial kiềm chế
- Không dùng màu để tạo hierarchy — dựa vào kích thước, tracking và tương phản uppercase/lowercase thay vào đó
- Không thêm decorative divider, ornamental rule hoặc graphic flourish giữa các section — dựa vào whitespace và chuyển đổi bề mặt Linen
- Không dùng Pistachio Wash làm hover state, focus ring hoặc link color — nó chỉ là surface treatment khuyến mãi

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|-----|---------|----------|
| 0 | Canvas | `#ffffff` | Nền trang cơ bản, bề mặt chủ đạo trên hầu hết màn hình |
| 1 | Promo Bar | `#d9e9bb` | Dải thông báo đầu trang cho sale và sự kiện |
| 2 | Editorial Band | `#c8c0b8` | Nền section taupe ấm cho nội dung kể chuyện thương hiệu |
| 3 | Dark Section | `#121212` | Khối feature inverted, footer, khoảnh khắc editorial tương phản cao |
| 4 | Deepest Surface | `#000000` | Closure đen hoàn toàn, hero background kịch tính |

## Elevation

Hệ thống cố tình loại bỏ tất cả shadow. Bề mặt được xác định bằng chuyển đổi màu phẳng (trắng → Linen → tối) và whitespace rộng thay vì elevation. Đây là quyết định editorial-print có chủ đích: không component nào nổi, không card nào nhấc lên khỏi trang, không ảo ảnh chiều sâu tồn tại. Hierarchy được xây dựng thông qua scale, tracking và quy mô ảnh.

## Imagery

Nhiếp ảnh chiếm ưu thế trong hệ thống thị giác với khoảng 70-80% diện tích màn hình trên các trang chính. Xử lý mang phong cách editorial thời trang: full-bleed, góc sắc, không mask hoặc crop bo tròn. Người mẫu được chụp trong môi trường kiến trúc tối giản — tường bê tông, thạch cao be, ánh sáng tự nhiên — để giữ sự tập trung vào trang phục. Xử lý màu tự nhiên với grading trung tính ấm (be, taupe, đen mềm). Ảnh sản phẩm được chụp trên nền seamless trắng/xám nhạt thuần khiết, không có bối cảnh lifestyle — sản phẩm chính là hero. Không illustration, không abstract graphic, không 3D render, không ảnh dựa trên icon. Icon chỉ giới hạn ở utility icon nhỏ (search, account, bag) được render dưới dạng 1px stroke outline màu Onyx.

## Layout

Layout full-bleed không có max-width container trên bất kỳ section nào. Mỗi cạnh section chạy đến cạnh viewport. Nhịp dọc: promo bar (40-48px) → nav (56px) → hero full-bleed (600px+) → editorial split band xen kẽ ảnh-trái/text-phải → product grid 4 cột → footer. Chuyển tiếp section liền mạch — không horizontal rule, không card, không boxed container. Khoảng cách giữa các section chính là 64-80px. Khối text trong editorial split được căn giữa theo chiều dọc và giới hạn ở ~480px max-width. Navigation là top bar sticky với wordmark căn giữa. Không sidebar, không mega-menu panel — nav link dẫn trực tiếp đến trang đích.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text: #000000 (Onyx)
- background: #ffffff (Paper White)
- border: #9b9b9b (Ash) cho divider, #000000 cho active state
- accent: #d9e9bb (Pistachio Wash) — chỉ promo bar
- secondary surface: #c8c0b8 (Linen) cho editorial band
- primary action: không có distinct CTA color

Ví dụ Component Prompt:

Không có distinct primary action color nào được quan sát; dùng neutral button treatment đã trích xuất thay vì tạo filled CTA color.

2. Tạo product grid section: 4 cột bằng nhau, column gap 0px, không card background, không border, không shadow. Section label 'SHOP CULT FAVORITES' ở Onyx 12px uppercase letter-spacing 0.40px (0.033em) với margin-bottom 16px. Mỗi product tile: ảnh sản phẩm full-bleed (không padding), sau đó tên sản phẩm Onyx 12px uppercase với tracking 0.40px, sau đó giá Onyx 12px ngay bên dưới với gap 4px.

4. Tạo promo bar: band full-width #d9e9bb, cao 44px, nội dung căn giữa. Các mục 'SPRING ESSENTIALS EVENT' và 'UP TO 40% OFF' và 'SHOP WOMEN' và 'SHOP MEN' ở Onyx 12px weight 400, uppercase, letter-spacing 0.40px, cách nhau 32px. Không border, không radius.

5. Tạo text-link navigation: nền trắng, cao 56px. Vùng trái: 'WOMEN MEN SUSTAINABILITY EVERWORLD' ở Onyx 12px uppercase letter-spacing 0.24px. Vùng giữa: wordmark 'EVERLANE' ở Onyx 20px uppercase letter-spacing 0.80px. Vùng phải: 'SEARCH ACCOUNT BAG' ở Onyx 12px uppercase letter-spacing 0.24px. Item active có underline Onyx 1px ở baseline.

## Uppercase Tracking Convention

Động tác typography signature là text uppercase với tracking rộng trên mọi kích thước — từ nav label 10px đến hero headline 32px. Text nhỏ hơn dùng absolute tracking ít hơn nhưng tỷ lệ nhiều hơn (0.040em ở 12px), trong khi text lớn hơn dùng nhiều pixel tuyệt đối hơn nhưng tỷ lệ em tương tự. Đây là quy ước print-editorial được chuyển thể lên màn hình: mọi label, giá và heading đọc như được typeset trong tạp chí thời trang. Body paragraph mixed case là ngoại lệ yên tĩnh, không phải quy tắc. Không bao giờ đặt headline hoặc UI label ở lowercase — hệ thống sẽ mất toàn bộ giọng nói.

## Similar Brands

- **Aesop** — Cùng sự kiềm chế editorial — ảnh full-bleed, label uppercase có tracking, gần như không màu, không button hoặc shadow, cách tiếp cận type-as-ornament
- **The Row** — Ngôn ngữ thời trang tối giản giống hệt — canvas toàn trắng, product tile góc sắc, label uppercase tracking rộng, ảnh trung tính ấm trên nền thạch cao
- **Toteme** — Thẩm mỹ thời trang Scandinavian đơn sắc chung — ảnh editorial full-bleed, không chrome trang trí, wordmark uppercase, góc 0px sắc trên toàn bộ
- **M.Gemi** — Cùng bố cục grid sản phẩm chặt chẽ với tile flush, tên sản phẩm uppercase có tracking, giá ngay bên dưới — pattern minimalism thương mại điện tử thời trang
- **COS** — Thương hiệu thời trang editorial dùng whitespace rộng, uppercase tracking trên tất cả UI label, ảnh campaign full-bleed, không shadow hoặc border trang trí

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-onyx: #000000;
  --color-paper-white: #ffffff;
  --color-soot: #121212;
  --color-ink: #161912;
  --color-graphite: #4c4c4c;
  --color-slate: #737373;
  --color-ash: #9b9b9b;
  --color-linen: #c8c0b8;
  --color-pistachio-wash: #d9e9bb;

  /* Typography — Font Families */
  --font-maison-neue-book: 'Maison Neue Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-maison-neue-demi: 'Maison Neue Demi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.4px;
  --text-heading: 20px;
  --leading-heading: 1.25;
  --tracking-heading: 0.8px;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 1.2px;
  --text-display: 32px;
  --leading-display: 1.2;
  --tracking-display: 1.6px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-48: 48px;

  /* Layout */
  --section-gap: 64-80px;
  --element-gap: 8px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-images: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-promo-bar: #d9e9bb;
  --surface-editorial-band: #c8c0b8;
  --surface-dark-section: #121212;
  --surface-deepest-surface: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-onyx: #000000;
  --color-paper-white: #ffffff;
  --color-soot: #121212;
  --color-ink: #161912;
  --color-graphite: #4c4c4c;
  --color-slate: #737373;
  --color-ash: #9b9b9b;
  --color-linen: #c8c0b8;
  --color-pistachio-wash: #d9e9bb;

  /* Typography */
  --font-maison-neue-book: 'Maison Neue Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-maison-neue-demi: 'Maison Neue Demi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 0.4px;
  --text-heading: 20px;
  --leading-heading: 1.25;
  --tracking-heading: 0.8px;
  --text-heading-lg: 24px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 1.2px;
  --text-display: 32px;
  --leading-display: 1.2;
  --tracking-display: 1.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-48: 48px;
}
```