# Koox

> Koox — Style Reference

## Prompt Content

```
# Koox — Style Reference
> Phòng thí nghiệm ép lạnh phong cách Brutalist — gạch men trắng, in sticker, giọng điệu stencil.

**Theme:** light

Koox là một phòng thí nghiệm ép lạnh phong cách Brutalist, nơi gạch subway trắng kết hợp với ảnh sản phẩm và typography stencil mạnh mẽ. Thương hiệu sử dụng headline in hoa tự tin, tracking rộng ngang trang, viền màu cam như vữa gạch bao quanh mọi bề mặt như một bức tường ốp gạch, và bảng màu apothecary xanh đậm được neo bởi một bóng đổ burgundy lệch cứng duy nhất, khiến mọi nút bấm trông như một sticker in lụa. Các trang luôn sáng và sạch sẽ — canvas trắng, chữ gần đen, đường kẻ mảnh — với màu sắc chỉ dành cho các điểm nhấn chức năng: khung cam, CTA xanh đậm, bóng đổ burgundy. Kết quả là ồn ào nhưng có kỷ luật, giống như một quán nước ép do một nhà in thiết kế.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Tile Grout | `#d25a24` | `--color-tile-grout` | Viền thương hiệu và link accent — nét vẽ màu cam như vữa gạch bao quanh card, link và cạnh section, mang hơi ấm của gốm nung lên canvas trắng sạch sẽ |
| Cold-Press Green | `#113722` | `--color-cold-press-green` | Màu nền action chính — xanh thực vật đậm cho nút CTA dạng filled, footer band và nền nút danh mục, báo hiệu sản phẩm bên trong mà không cần dùng đến tông xanh của ảnh đồ ăn |
| Sticker Crimson | `#6b1229` | `--color-sticker-crimson` | Bóng đổ lệch cứng — burgundy đậm tạo bóng đổ 5px không blur dưới sticker và nút được nhấn mạnh, biến các element phẳng thành các lớp in lụa dán lên trang |
| Noir | `#000000` | `--color-noir` | Navigation, body text và màu viền mặc định — màu đen cứng rắn cho mọi đoạn văn, icon stroke và card hairline |
| Glacial White | `#ffffff` | `--color-glacial-white` | Canvas trang, bề mặt card và chữ đảo màu trên nav tối và CTA xanh — gạch men trắng của toàn bộ hệ thống |
| Ash | `#efefef` | `--color-ash` | Viền card nhẹ và nền mờ — vữa xám giữa các bề mặt trắng, dùng cho hairline divider và khung card lõm |
| Char | `#232323` | `--color-char` | Màu heading và accent bề mặt đậm — tông gần đen cho display text nặng nhất và các band tối không thường xuyên |
| Concrete | `#cccccc` | `--color-concrete` | Viền utility xám trung tính và body text mờ — divider nhẹ hơn khi màu đen quá ồn |
| Fog | `#d7d7d7` | `--color-fog` | Viền input field — đường viền trạng thái nghỉ trung tính cho form field |
| Slate | `#646464` | `--color-slate` | Input text và icon fill — xám phụ đảm bảo độ rõ cho form label và chi tiết icon nhỏ |
| Pewter | `#808080` | `--color-pewter` | Viền và text trang trí ít nhấn mạnh — hiếm khi dùng, xuất hiện trên UI mark cấp ba |

## Tokens — Typography

### Helvetica — Tất cả UI và editorial text. Việc chọn Helvetica hệ thống là có chủ đích — nó đọc như stencil nhãn phòng thí nghiệm, không phải sự tinh tế của serif thời trang. Headline weight 900 hét to ở 40-48px in hoa với tracking dương, weight 400-500 đảm nhận body copy ở 14-18px. Không có display face tùy chỉnh: bản thân hệ thống đã là thương hiệu. · `--font-helvetica`
- **Thay thế:** Helvetica, Arial, Inter (dùng thay thế chức năng nếu không có Helvetica)
- **Weights:** 400, 500, 600, 700, 900
- **Cỡ chữ:** 14, 16, 18, 20, 24, 26, 30, 32, 40, 46, 48
- **Line height:** 0.70-2.50 (tight cho display, thoáng cho body)
- **Letter spacing:** 0.0080em, 0.0120em, 0.0160em, 0.0180em, 0.0200em, 0.0500em
- **Vai trò:** Tất cả UI và editorial text. Việc chọn Helvetica hệ thống là có chủ đích — nó đọc như stencil nhãn phòng thí nghiệm, không phải sự tinh tế của serif thời trang. Headline weight 900 hét to ở 40-48px in hoa với tracking dương, weight 400-500 đảm nhận body copy ở 14-18px. Không có display face tùy chỉnh: bản thân hệ thống đã là thương hiệu.

### Type Scale

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 14px | 1.38 | 0.7px | `--text-caption` |
| body-sm | 16px | 1.5 | 0.26px | `--text-body-sm` |
| body | 18px | 1.57 | 0.29px | `--text-body` |
| subheading | 24px | 1.44 | 0.48px | `--text-subheading` |
| heading-sm | 30px | 1.3 | 0.6px | `--text-heading-sm` |
| heading | 32px | 1.2 | 0.64px | `--text-heading` |
| heading-lg | 40px | 1.1 | 0.8px | `--text-heading-lg` |
| display | 48px | 1 | 0.96px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 100 | 100px | `--spacing-100` |
| 228 | 228px | `--spacing-228` |

### Border Radius

| Element | Giá trị |
|---------|--------|
| tags | 5px |
| cards | 5px |
| buttons | 5px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgb(107, 18, 41) 5px 5px 0px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-60px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Top Navigation Bar
**Vai trò:** Site navigation cố định

Nền #000000 solid, full bleed. Wordmark 'KOOX' màu trắng căn trái ở 26px weight 700 uppercase. Cụm nav items ở giữa (HOME, JUICE SHOP, CLEANSE, ABOUT US, CONTACT, BECOME A STOCKIST) ở 14px weight 600 uppercase, #ffffff, letter-spacing 0.7px. Icon giỏ hàng căn phải với badge đếm hình tròn màu trắng. Vertical padding 20px.

### Hero Image Section
**Vai trò:** Tuyên ngôn thương hiệu và sản phẩm ở màn hình đầu tiên

Ảnh sản phẩm full-bleed (chai nước ép xếp trên gạch subway trắng) với lớp phủ tối. Headline overlay in hoa căn giữa ở 48px weight 900 #ffffff, letter-spacing 0.96px, line-height 1.0, xếp ba dòng. Star rating '4.8★' ở 32px weight 700 bên dưới headline. Reviews caption ở 16px weight 400. Nút CTA neo bên dưới.

### Primary CTA Button (Filled Green)
**Vai trò:** Action chuyển đổi chính

Nền #113722 filled, 5px radius, 11px vertical và 15px horizontal padding. Text #ffffff, 14px weight 600 uppercase, letter-spacing 0.7px. Nằm phẳng trên bề mặt trắng, không có shadow mặc định.

### Sticker Button (Burgundy Shadow)
**Vai trò:** Action được nhấn mạnh với offset in lụa

Nền #113722 filled, 5px radius, 11px/15px padding, text trắng uppercase ở 14px weight 600. Bóng đổ lệch cứng đặc trưng: rgb(107, 18, 41) 5px 5px 0px 0px — không blur, tạo hiệu ứng sticker in. Dùng cho hero CTA và link ưu tiên cao.

### Ghost / Outline Button
**Vai trò:** Action phụ

Nền trong suốt hoặc #ffffff với viền 1px #000000 hoặc #d25a24, 5px radius. Text trắng hoặc đen uppercase ở 14px weight 600. Không shadow.

### Marquee Quality Bar
**Vai trò:** Băng chạy lặp lại các thuộc tính thương hiệu

Band #ffffff full-bleed, 20px vertical padding. Một dòng text uppercase ở 18px weight 700 #000000, các mục cách nhau bằng dấu '|'. Lặp lại theo chiều ngang. Ví dụ: '100% ORGANIC | 100% COLD-PRESSED | 100% RAW | 0% ADDITIVES | 0% PASTEURISATION | 0% HPP'.

### Category Tile Card
**Vai trò:** Điểm vào danh mục sản phẩm

Card ảnh sản phẩm hình vuông lấp đầy ô grid. Không padding — ảnh tràn ra mép. Nhãn danh mục lớn màu trắng uppercase overlay ở giữa dưới của ảnh, 32px weight 700, letter-spacing 0.64px. 5px radius. Các card được bao quanh bởi divider hairline 1px #000000 để tái tạo hiệu ứng vữa gạch.

### Star Rating Display
**Vai trò:** Component bằng chứng xã hội inline

Giá trị số lớn (ví dụ '4.8') ở 32px weight 700 #ffffff, kết hợp với glyph ngôi sao solid. Caption hỗ trợ bên dưới ở 14px weight 400 #ffffff. Nằm trên lớp phủ hero.

### Bordered Link
**Vai trò:** Link text inline hoặc nav có khung

Text hoặc block được bọc trong viền 1-2px #d25a24, 5px radius, 10px-15px padding. Link text #d25a24 weight 600 uppercase. Có thể thêm offset shadow với #6b1229 để nâng lên trạng thái sticker.

### Hairline Divider
**Vai trò:** Separator section và grid

Đường 1px solid #000000 hoặc #efefef trải dài toàn bộ chiều rộng hoặc một cột. Grid được xây dựng từ các đường này — chúng tạo thành viền gạch trực quan giữ toàn bộ hệ thống lại với nhau.

### Footer Band
**Vai trò:** Footer site với thông điệp quảng cáo

Band xanh đậm #113722 full-bleed, ~60px vertical padding. Thông điệp uppercase căn giữa ở 18-24px weight 700 #ffffff, letter-spacing 0.48-0.6px. Hoạt động như một CTA lặp lại gần cuối trang.

### Form Input
**Vai trò:** Input text cho form

Viền 1px #d7d7d7, 5px radius, 11px vertical và 15px horizontal padding. Text #646464 ở 14-16px weight 400. Không nền mặc định.

### Organic Certification Mark
**Vai trò:** Huy hiệu tin cậy

Huy hiệu hình tròn có viền #000000, text uppercase 14px bao quanh chu vi, icon trung tâm. Đặt ở góc dưới bên phải của footer hoặc nổi trên ảnh sản phẩm.

## Do's and Don'ts

### Nên làm
- Dùng Helvetica weight 900 cho mọi display headline ở 40-48px, tất cả uppercase, với letter-spacing dương từ 0.8px đến 0.96px
- Đóng khung card, link và category tile bằng viền 1-2px #d25a24 (Tile Grout) và 5px radius để củng cố ngôn ngữ gạch subway
- Chỉ áp dụng bóng đổ lệch #6b1229 (5px 5px 0px 0px, zero blur) cho sticker-style button và link được nhấn mạnh — không bao giờ dùng nó như elevation chung
- Giữ canvas trang ở #ffffff và dành #113722 cho CTA filled và footer band
- Đặt card padding là 20px và element gap là 20px để tạo nhịp điệu gạch nhất quán
- Dùng pattern marquee bar (uppercase, weight 700, pipe-separated) cho các tuyên bố thuộc tính thương hiệu lặp lại
- Chỉ dùng màu xanh #113722 làm nền cho action chính và footer; không dùng nó cho text hoặc icon

### Không nên làm
- Không dùng negative letter-spacing — giọng điệu thương hiệu phụ thuộc vào tracking dương giúp text có không gian để hét to
- Không áp dụng soft drop shadow, blur hoặc multi-layer elevation stack; elevation chỉ một màu và một offset
- Không thêm các sắc thái thương hiệu khác ngoài Tile Grout cam, Cold-Press xanh và Sticker crimson
- Không dùng border radius 6px+ hoặc nút hình pill — 5px là độ mềm tối đa trong hệ thống này
- Không đặt body text bằng bất kỳ thứ gì ngoài Helvetica weight 400-500; weight 700+ chỉ dành cho display, navigation và marquee
- Không đặt text sáng trên nền trắng hoặc text tối trên band xanh đậm mà không kiểm tra độ tương phản AAA
- Không dùng #6b1229 crimson làm nền — nó là lớp shadow, không phải màu thương hiệu

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang chính và hầu hết bề mặt card — gạch subway trắng |
| 1 | Recessed | `#efefef` | Bề mặt phụ nhẹ cho card có viền và section divider |
| 2 | Ink | `#000000` | Top navigation bar và các band tối không thường xuyên |
| 3 | Apothecary Green | `#113722` | Nút CTA chính và footer band |
| 4 | Crimson Plate | `#6b1229` | Lớp shadow lệch cứng bên dưới element được nhấn mạnh |

## Elevation

- **Sticker Button / Emphasis Link:** `rgb(107, 18, 41) 5px 5px 0px 0px`

## Imagery

Ảnh sản phẩm là loại hình ảnh duy nhất. Chai được chụp từ trên xuống, sắp xếp theo grid chặt chẽ trên gạch subway trắng với các đường vữa tối có thể nhìn thấy — bề mặt gạch và vữa là một phần của bố cục. Xử lý phẳng, high-key, không có bối cảnh lối sống, không người, không đạo cụ ngoài chính các chai. Ảnh được phủ một lớp scrim tối trong hero để headline trắng uppercase có thể đặt lên trên với độ mờ đục tối đa. Category tile tái sử dụng cùng thẩm mỹ grid từ trên xuống ở full bleed, với một nhãn trắng uppercase duy nhất nổi trên ảnh. Không có illustration, không 3D, không icon ngoài badge có viền đơn giản.

## Layout

Trang full-bleed không có max-width căn giữa trên hero, marquee hoặc footer — các section đó kéo dài đến viewport. Các khối nội dung bên dưới hero nằm trong container max-width 1200px. Hero là ảnh full-bleed với text overlay căn giữa. Bên dưới là một marquee bar ngang duy nhất trải dài trang. Sau đó là grid 3 cột đều nhau của category tile card với divider hairline giữa các ô, mỗi tile lấp đầy cột của nó. Footer là band xanh đậm full-bleed. Navigation là thanh trên cùng cố định màu đen với layout 3 vùng (logo trái, link giữa, cart phải). Density comfortable — khoảng trống thoáng giữa marquee, grid và footer, với section gap 40-60px.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #ffffff
- border (mặc định): #000000
- border (khung thương hiệu): #d25a24 (Tile Grout)
- accent: #6b1229 (Sticker Crimson — chỉ shadow)
- primary action: #6b1229 (filled action)

## Example Component Prompts
1. **Top Navigation**: Thanh #000000 full-bleed, 20px vertical padding. Trái: wordmark 'KOOX' ở 26px Helvetica weight 700 #ffffff uppercase, letter-spacing 0.52px. Giữa: nav items ở 14px weight 600 #ffffff uppercase, letter-spacing 0.7px, gap 15px. Phải: icon giỏ hàng với badge đếm #ffffff.
2. **Hero Headline Block**: Trên ảnh sản phẩm full-bleed có overlay tối. Headline ở 48px Helvetica weight 900 #ffffff uppercase, letter-spacing 0.96px, line-height 1.0, ba dòng căn giữa. Star rating '4.8★' ở 32px weight 700 #ffffff bên dưới, với caption 14px weight 400.
3. Tạo Primary Action Button: Nền #6b1229, text #ffffff, radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính.
4. **Category Tile Card**: Ảnh sản phẩm full-bleed, 5px radius, không padding, nhãn danh mục trắng uppercase overlay ở 32px weight 700 letter-spacing 0.64px. Hairline 1px #000000 giữa các ô grid.
5. **Marquee Quality Bar**: Band #ffffff full-bleed, 20px vertical padding. Một dòng text 18px weight 700 #ffffff uppercase, các mục cách nhau bằng '|', ví dụ '100% ORGANIC | 100% COLD-PRESSED | 100% RAW'.
6. **Footer Band**: #113722 full-bleed, 60px vertical padding. Thông điệp căn giữa ở 24px weight 700 #ffffff uppercase, letter-spacing 0.48px.

## Similar Brands

- **Joe & The Juice** — Cùng giọng điệu signage Helvetica bold uppercase trên ảnh sản phẩm phẳng, với cách tiếp cận CTA một accent tối cho thương hiệu nước ép hữu cơ
- **Pressed Juicery** — Dàn dựng sản phẩm trên gạch men trắng lâm sàng với ảnh chai full-bleed và màu xanh thực vật đậm làm màu action
- **Glossier** — Cấu trúc grid Brutalist nơi hairline và khung viền tổ chức trang như một bức tường ốp gạch, với type không chân hét to ở full weight
- **Sweetgreen** — Navigation tracking all-caps và pattern marquee trên ảnh sản phẩm sạch sẽ, với một màu xanh đậm duy nhất mang thương hiệu qua CTA và footer

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-tile-grout: #d25a24;
  --color-cold-press-green: #113722;
  --color-sticker-crimson: #6b1229;
  --color-noir: #000000;
  --color-glacial-white: #ffffff;
  --color-ash: #efefef;
  --color-char: #232323;
  --color-concrete: #cccccc;
  --color-fog: #d7d7d7;
  --color-slate: #646464;
  --color-pewter: #808080;

  /* Typography — Font Families */
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.38;
  --tracking-caption: 0.7px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.26px;
  --text-body: 18px;
  --leading-body: 1.57;
  --tracking-body: 0.29px;
  --text-subheading: 24px;
  --leading-subheading: 1.44;
  --tracking-subheading: 0.48px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 0.6px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: 0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: 0.8px;
  --text-display: 48px;
  --leading-display: 1;
  --tracking-display: 0.96px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-100: 100px;
  --spacing-228: 228px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-60px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-md: 5px;

  /* Named Radii */
  --radius-tags: 5px;
  --radius-cards: 5px;
  --radius-buttons: 5px;

  /* Shadows */
  --shadow-subtle: rgb(107, 18, 41) 5px 5px 0px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-recessed: #efefef;
  --surface-ink: #000000;
  --surface-apothecary-green: #113722;
  --surface-crimson-plate: #6b1229;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-tile-grout: #d25a24;
  --color-cold-press-green: #113722;
  --color-sticker-crimson: #6b1229;
  --color-noir: #000000;
  --color-glacial-white: #ffffff;
  --color-ash: #efefef;
  --color-char: #232323;
  --color-concrete: #cccccc;
  --color-fog: #d7d7d7;
  --color-slate: #646464;
  --color-pewter: #808080;

  /* Typography */
  --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.38;
  --tracking-caption: 0.7px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.26px;
  --text-body: 18px;
  --leading-body: 1.57;
  --tracking-body: 0.29px;
  --text-subheading: 24px;
  --leading-subheading: 1.44;
  --tracking-subheading: 0.48px;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 0.6px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: 0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: 0.8px;
  --text-display: 48px;
  --leading-display: 1;
  --tracking-display: 0.96px;

  /* Spacing */
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-100: 100px;
  --spacing-228: 228px;

  /* Border Radius */
  --radius-md: 5px;

  /* Shadows */
  --shadow-subtle: rgb(107, 18, 41) 5px 5px 0px 0px;
}
```