# Nike.com

> Nike.com — Style Reference

## Prompt Content

```
# Nike.com — Style Reference
> monochrome gallery of athletic performance — tường trắng, sản phẩm như tác phẩm nghệ thuật, chrome tan vào nền.

**Theme:** mixed

Nike.com vận hành như một gallery đơn sắc lấy sản phẩm làm trung tâm: UI gần như vô hình để ảnh sản phẩm dẫn dắt mọi màn hình. Toàn bộ giao diện được xây dựng từ đen, trắng và ba sắc thái xám — không có màu nhấn, không gradient trang trí, không brand chrome ấm áp. Bản sắc Nike sống trong swoosh và ảnh chụp, không bao giờ xuất hiện trong UI. Typography gọn nhẹ và thực dụng, dựa trên custom Helvetica Now family ở 12-20px với một khoảnh khắc Nike Futura ND cỡ lớn 76px cho hero headlines. Các component tối giản: pill-shaped buttons với radius 30px, flat product cards, hairline borders, gần như không có elevation. Trang web xen kẽ giữa bề mặt sản phẩm trắng tinh và các editorial hero section tối full-bleed, tạo nhịp điệu qua tương phản thay vì trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Obsidian | `#111111` | `--color-obsidian` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |
| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, text button trên nền tối, icon strokes — canvas mặc định cho product grids và category sections |
| Concrete Gray | `#e5e5e5` | `--color-concrete-gray` | Borders, dividers, hairline separators giữa các grid section, input outlines nhẹ |
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | Nền tint nhẹ cho secondary surfaces, nav search field fill, tag backgrounds |
| Steel | `#707072` | `--color-steel` | Secondary text, muted helper copy, icon outlines ở kích thước nhỏ, breadcrumb labels, footer link separators |
| Faint Gray | `#9e9ea0` | `--color-faint-gray` | Disabled icon strokes, tertiary UI affordances, border ít ưu tiên nhất |

## Tokens — Typography

### Helvetica Now Text Medium — Helvetica Now Text Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-helvetica-now-text-medium`
- **Weights:** 500
- **Sizes:** 12px, 14px, 16px
- **Line height:** 1.5, 1.75, 1.86
- **Vai trò:** Helvetica Now Text Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Helvetica Now Text — Primary UI body và interface text — nav links, button labels, card titles, product names, footer lists, tất cả running copy · `--font-helvetica-now-text`
- **Thay thế:** Inter hoặc Helvetica Neue
- **Weights:** 400, 500
- **Sizes:** 16px, 20px
- **Line height:** 1.50, 1.75, 1.86
- **Letter spacing:** normal
- **Vai trò:** Primary UI body và interface text — nav links, button labels, card titles, product names, footer lists, tất cả running copy

### Helvetica Now Display Medium — Section headings, card category labels, medium-scale titles — medium weight ở 20-24px là signature của non-hero headings của Nike: không bao giờ bold, luôn điềm tĩnh · `--font-helvetica-now-display-medium`
- **Thay thế:** Inter Medium hoặc Helvetica Neue Medium
- **Weights:** 500
- **Sizes:** 20px, 24px
- **Line height:** 1.20, 1.50
- **Vai trò:** Section headings, card category labels, medium-scale titles — medium weight ở 20-24px là signature của non-hero headings của Nike: không bao giờ bold, luôn điềm tĩnh

### Nike Futura ND — Hero-scale editorial headlines — dùng ở full display size với line-height cố định 1.0 để tối đa tác động; khoảnh khắc duy nhất Nike dùng custom display face thay vì Helvetica Now · `--font-nike-futura-nd`
- **Thay thế:** Futura PT Medium
- **Weights:** 500
- **Sizes:** 76px
- **Line height:** 1.00
- **Vai trò:** Hero-scale editorial headlines — dùng ở full display size với line-height cố định 1.0 để tối đa tác động; khoảnh khắc duy nhất Nike dùng custom display face thay vì Helvetica Now

### 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, 700
- **Sizes:** 16px
- **Line height:** 1.75
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Helvetica Neue — Helvetica Neue — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-helvetica-neue`
- **Weights:** 400, 500
- **Sizes:** 16px
- **Line height:** 1
- **Vai trò:** Helvetica Neue — đượ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 | 12px | 1.5 | — | `--text-caption` |
| body-sm | 14px | 1.75 | — | `--text-body-sm` |
| body | 16px | 1.75 | — | `--text-body` |
| subheading | 20px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |
| display | 76px | 1 | — | `--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ị |
|---------|-------|
| nav | 24px |
| tags | 30px |
| cards | 0px |
| inputs | 0px |
| buttons | 30px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 48px
- **Card padding:** 12px
- **Element gap:** 8px

## Components

### Pill Button (Primary)
**Vai trò:** Kiểu button tương tác duy nhất — dùng cho Comprar, Comprar todo và mọi call-to-action

Obsidian (#111111) fill, text trắng, Helvetica Now Text Medium 16px/1.5, border-radius 30px (full pill), padding 6px dọc / 8px ngang. Không border, không shadow, không hiệu ứng hover ngoài opacity.

### Category Hero Card
**Vai trò:** Ảnh sản phẩm full-bleed trong grid 2x2 bên dưới hero

Container không border, không radius, không shadow. Ảnh sản phẩm phủ kín cạnh (edge-to-edge). Text overlay nằm dưới cùng bên trái màu trắng: category label Helvetica Now Text 16px nhỏ phía trên headline Helvetica Now Display Medium 20-24px. Pill buttons (nền trắng, text đen) nằm dưới headline.

### Product Card
**Vai trò:** Ô sản phẩm riêng lẻ trong grid cuộn 3 cột

Nền trắng, không border, không radius, không shadow. Ảnh sản phẩm căn giữa phần trên. Product name label xuất hiện dưới dạng pill trắng nhỏ (Obsidian fill, text trắng, radius 30px, Helvetica Now Text Medium 12-16px) overlay trên hoặc dưới ảnh. Không có giá, mô tả hay CTA bên trong card.

### Top Navigation Bar
**Vai trò:** Header toàn trang với category access, search và account actions

Bố cục hai tầng: thanh utility bar mỏng phía trên (search, help, login) bằng Helvetica Now Text 12px Obsidian trên nền trắng, sau đó là main nav row với swoosh Nike bên trái, category links (Novedad, Hombre, Mujer, Niño/a, Deporte, NikeSKiMS) ở giữa bằng Helvetica Now Text Medium 16px, rồi search field + wishlist heart + bag icon bên phải. Search field màu #f5f5f5 với radius 24px. Không có background fill trên nav — nằm trực tiếp trên nền trắng.

### Editorial Hero Section
**Vai trò:** Dark hero full-viewport với một sản phẩm duy nhất và headline cỡ lớn

Nền gần đen hoặc gradient tối full-bleed. Sản phẩm được chụp lớn, căn giữa hoặc ba phần tư. Headline bằng Nike Futura ND 76px trắng, line-height 1.0, đặt dưới cùng bên trái. Sub-copy bằng Helvetica Now Text 16px trắng bên dưới. Một pill button trắng duy nhất (fill trắng, text đen) là CTA duy nhất. Không có yếu tố trang trí, không có carousel indicators.

### Footer Link Grid
**Vai trò:** Multi-column resource và help links ở cuối trang

Nền trắng. Bốn cột: Recursos, Ayuda, Empresa, Descuentos de la comunidad. Column headers bằng Helvetica Now Display Medium 16-20px Obsidian bold. Links bằng Helvetica Now Text 16px Steel (#707072) với row-gap 12px. Region selector (España) căn phải trong header row. Không dividers, không background fills.

### Search Field
**Vai trò:** Inline search input trong main nav

Nền #f5f5f5, border-radius 24px, không border, placeholder text Helvetica Now Text 16px Obsidian. Search icon màu Steel (#707072) căn trái. Padding compact 6px dọc / 8px ngang.

### Icon System
**Vai trò:** Utility icons cho wishlist, bag, search và account

Stroke-based outlined icons, stroke weight 1.5-2px, Obsidian (#111111) ở trạng thái mặc định, Steel (#707072) cho secondary actions. Không có filled variants, không có multicolor icons. Kích thước 16-20px.

## Do's and Don'ts

### Nên làm
- Chỉ dùng monochrome palette: Obsidian (#111111), Paper White (#ffffff), Concrete Gray (#e5e5e5), Soft Mist (#f5f5f5) và Steel (#707072). Không có màu nhấn trong UI — ảnh sản phẩm cung cấp mọi chromatic interest.
- Đặt tất cả interactive buttons với border-radius 30px để tạo hình pill; đây là button geometry duy nhất trong hệ thống.
- Dùng Helvetica Now Text Medium 16px làm mặc định cho nav links, button labels và product names; không bao giờ đặt body text trên 20px hoặc dưới 12px.
- Để ảnh sản phẩm phủ kín container edge-to-edge với zero border-radius và zero border — hình ảnh chính là thiết kế, không phải yếu tố đóng khung.
- Dùng Nike Futura ND 76px riêng cho hero headlines với line-height cố định 1.0; heading nhỏ hơn dùng Helvetica Now Display Medium 20-24px.
- Phân cách surface layers bằng Concrete Gray (#e5e5e5) hairline borders hoặc whitespace — không bao giờ dùng shadow hoặc background màu.
- Giữ nav trong suốt trên nền trắng: không background fill, không shadow, không sticky blur effect.

### Không nên làm
- Không đưa bất kỳ màu nhấn hoặc brand color nào vào UI — không có fill xanh, đỏ, xanh lá hay vàng trên buttons, links, badges hay icons. Màu sắc duy nhất trong giao diện đến từ ảnh sản phẩm.
- Không dùng bold hoặc semibold weights; type system của Nike chỉ gồm 400 và 500. Weight nặng hơn phá vỡ giọng điệu điềm tĩnh, kiềm chế.
- Không thêm box-shadows vào cards, buttons hoặc nav elements. Elevation trong hệ thống này được truyền tải qua sự xen kẽ section tối/sáng, không phải shadow.
- Không bo góc card corners. Product và category cards là các tile full-bleed cạnh sắc — yếu tố bo tròn duy nhất là buttons (30px), search field (24px) và top utility bar (24px).
- Không dùng nhiều hơn một CTA color treatment mỗi trang. Pill button luôn là Obsidian trên nền trắng hoặc trắng trên Obsidian — không bao giờ có biến thể thứ ba.
- Không thêm decorative gradients, patterns hoặc background imagery phía sau text. Mọi section hoặc là trắng tinh hoặc là ảnh sản phẩm full-bleed.
- Không dùng display typography dưới 20px hoặc trên 76px. Nike Futura ND chỉ sống ở hero scale; Helvetica Now Display xử lý mọi thứ ở giữa.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Paper White | `#ffffff` | Nền trang mặc định cho product grids, category sections và footer |
| 2 | Soft Mist | `#f5f5f5` | Search field fill, nền section tint nhẹ, tag pill backgrounds |
| 3 | Concrete Gray | `#e5e5e5` | Borders, dividers, separator lines giữa các grid section |

## Elevation

Design system của Nike cố tình tránh hoàn toàn box-shadows. Elevation được truyền tải qua ba cơ chế duy nhất: (1) sự xen kẽ rõ rệt giữa editorial hero section tối full-bleed và product grids trắng, (2) hairline Concrete Gray (#e5e5e5) borders giữa các section, và (3) whitespace rộng rãi. Thẩm mỹ phẳng giữ sự tập trung vào ảnh sản phẩm và củng cố ẩn dụ 'gallery' — không có gì trong UI đổ bóng lên sản phẩm.

## Imagery

Nhiếp ảnh là yếu tố thị giác chủ đạo và mang toàn bộ brand identity. Hệ thống dùng ảnh sản phẩm full-bleed độ phân giải cao: giày thể thao được chụp cô lập trên nền tối hoặc gradient, crop đủ chặt để lấp đầy khung hình mà không có bối cảnh lifestyle. Lifestyle imagery xuất hiện trong category tiles thể hiện chân và cẳng chân vận động viên đang chuyển động. Xử lý ảnh có độ tương phản cao và màu bão hòa — giày đỏ trên nền đen, neon accents trên đế trắng, ánh sáng ấm và lạnh để làm nổi bật chất liệu. Không có illustration, không abstract graphics, không 3D renders. Ảnh luôn có cạnh sắc (không bo góc trên photo containers), luôn full-bleed trong tile của chúng, và luôn đi kèm text overlay tối thiểu. Iconography hoàn toàn chức năng: outlined stroke icons cho search, wishlist, bag và account màu Obsidian hoặc Steel.

## Layout

Trang web theo nhịp editorial full-bleed: hero tối ấn tượng chiều cao viewport với một sản phẩm duy nhất và headline cỡ lớn, tiếp theo là grid 2x2 category tiles full-bleed, rồi product card grid cuộn ngang 3 cột, rồi footer multi-column dày đặc. Tất cả content blocks trải dài toàn bộ chiều rộng viewport không có max-width container; max-width 1440px chỉ áp dụng cho nav và footer link grid. Chuyển tiếp section rõ rệt: hero đen → category grid trắng → product grid trắng → footer trắng, với Concrete Gray hairline borders là đường nối thị giác duy nhất. Nav là thanh hai tầng tối giản (utility links trên, main categories giữa) không có sticky behavior, không background fill, không shadow. Content density compact trong product grids (card padding chặt) và rộng rãi trong hero (full viewport).

## Agent Prompt Guide

**Quick Color Reference**
- text: #111111 (Obsidian)
- background: #ffffff (Paper White)
- border: #e5e5e5 (Concrete Gray)
- accent: không có — không có UI accent color; mọi màu sắc đến từ ảnh sản phẩm
- secondary text: #707072 (Steel)
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**

1. Tạo một dark hero full-bleed: nền gần đen (#111111) lấp đầy viewport. Ảnh sản phẩm giày chạy bộ màu đỏ căn giữa, góc ba phần tư, chiếm 60% chiều rộng. Text overlay dưới cùng bên trái: Nike Futura ND weight 500 ở 76px, trắng, line-height 1.0, letter-spacing normal, text 'POTENCIA TOTAL'. Bên dưới là subhead Helvetica Now Text 16px trắng, sau đó pill button (fill trắng, text Obsidian, radius 30px, padding 6px dọc / 8px ngang).

2. Tạo grid category card 2x2 bên dưới hero: bốn tile full-bleed, không gap giữa các tile, không border-radius, không border. Mỗi tile lấp đầy 50% chiều rộng viewport và 50vh. Overlay dưới cùng bên trái trên mỗi tile: category label Helvetica Now Text 16px trắng phía trên headline Helvetica Now Display Medium 20px trắng. Hai pill buttons (fill trắng, text Obsidian, radius 30px) xếp chồng bên dưới headline.

3. Tạo product card row cuộn ngang 3 cột: nền trắng, ba card trong một hàng, mỗi card rộng 33%, không border, không radius, không shadow. Ảnh sản phẩm căn giữa trong card, nền trắng. Pill label nhỏ ở cuối mỗi ảnh: Obsidian fill, text trắng, Helvetica Now Text Medium 12px, radius 30px, padding 6px. Không có giá, không mô tả bên trong card.

4. Tạo top navigation bar: nền trắng, không fill, không shadow, không border. Bên trái: Nike swoosh SVG màu Obsidian. Giữa: sáu nav links bằng Helvetica Now Text Medium 16px Obsidian với gap 24px. Bên phải: search field Soft Mist (#f5f5f5) với radius 24px, padding 6px dọc / 8px ngang, placeholder Helvetica Now Text 16px Obsidian, search icon màu Steel (#707072), sau đó wishlist heart icon và bag icon màu Obsidian.

5. Tạo footer link grid: nền trắng, bốn cột bằng nhau. Column headers bằng Helvetica Now Display Medium 16-20px Obsidian. Links bằng Helvetica Now Text 16px Steel (#707072) với row-gap 12px. Region selector 'España' căn phải trong header row. Không dividers, không background fills, không social icons.

## Similar Brands

- **Apple** — Cả hai site đều dùng monochrome UI palette (chỉ đen/trắng/xám) với zero accent color, để ảnh sản phẩm full-bleed mang toàn bộ trọng lượng chromatic và cảm xúc
- **Allbirds** — Cùng thẩm mỹ card phẳng với ảnh sản phẩm full-bleed cạnh sắc và chrome tối giản — sản phẩm là hero, UI vô hình
- **Adidas** — Cấu trúc editorial giống hệt: dark hero full-bleed với headline cỡ lớn, tiếp theo grid tile category 2x2, rồi product card row 3 cột với pill labels
- **SSENSE** — Cùng cách tiếp cận editorial e-commerce tương phản cao với whitespace rộng rãi, navigation tối giản, và hình ảnh sản phẩm được xem như nghệ thuật trên tường gallery trắng

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #111111;
  --color-paper-white: #ffffff;
  --color-concrete-gray: #e5e5e5;
  --color-soft-mist: #f5f5f5;
  --color-steel: #707072;
  --color-faint-gray: #9e9ea0;

  /* Typography — Font Families */
  --font-helvetica-now-text-medium: 'Helvetica Now Text Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-now-display-medium: 'Helvetica Now Display Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-nike-futura-nd: 'Nike Futura ND', 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-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.75;
  --text-body: 16px;
  --leading-body: 1.75;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --text-display: 76px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --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 */
  --page-max-width: 1440px;
  --section-gap: 48px;
  --card-padding: 12px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-3xl: 24px;
  --radius-3xl-2: 30px;

  /* Named Radii */
  --radius-nav: 24px;
  --radius-tags: 30px;
  --radius-cards: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 30px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-soft-mist: #f5f5f5;
  --surface-concrete-gray: #e5e5e5;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #111111;
  --color-paper-white: #ffffff;
  --color-concrete-gray: #e5e5e5;
  --color-soft-mist: #f5f5f5;
  --color-steel: #707072;
  --color-faint-gray: #9e9ea0;

  /* Typography */
  --font-helvetica-now-text-medium: 'Helvetica Now Text Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helvetica-now-display-medium: 'Helvetica Now Display Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-nike-futura-nd: 'Nike Futura ND', 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-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.75;
  --text-body: 16px;
  --leading-body: 1.75;
  --text-subheading: 20px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --text-display: 76px;
  --leading-display: 1;

  /* 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;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-3xl: 24px;
  --radius-3xl-2: 30px;
}
```