# Aesop

> NGLORA — Style Reference

## Prompt Content

```
# NGLORA — Style Reference
> NGLORA — Formulary của Apothecary. Một không gian được tổ chức tỉ mỉ, nơi typography và ảnh sản phẩm được xử lý với độ chính xác khoa học.

**Theme:** light

Thiết kế gợi lên một formulary apothecary học thuật, nơi mọi yếu tố đều được trình bày với độ chính xác tỉ mỉ. Nó vận hành trên một bảng màu hạn chế rõ rệt gồm kem ấm và than chì, tạo ra một môi trường tương phản cao, ưu tiên chữ. Bố cục kiến trúc cứng nhắc với góc 0px sắc nét chiếm ưu thế, củng cố cảm giác trật tự và chất lượng lâm sàng. Điểm nhấn của hệ thống là sự căng thẳng typographic giữa serif nhân văn 'Zapf-Humanist' cho headline biểu cảm và sans-serif trung tính 'SuisseIntl' cho toàn bộ văn bản chức năng, mang lại vẻ cổ điển cho giao diện kỹ thuật số hiện đại.

## Tokens — Màu sắc

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Parchment | `#fffef2` | `--color-parchment` | Nền trang chính, bề mặt sáng. |
| Charcoal | `#333333` | `--color-charcoal` | Văn bản chính, icon UI, nút chính, đường viền. |
| Ink Black | `#000000` | `--color-ink-black` | Văn bản hero section, yếu tố văn bản có độ nhấn mạnh cao. |
| Carbon | `#252525` | `--color-carbon` | Nền footer, bề mặt tối phụ. |
| Stone | `#666666` | `--color-stone` | Văn bản body phụ. |
| Slate | `#d6d5cc` | `--color-slate` | Track thanh cuộn carousel. |
| Alabaster | `#ffffff` | `--color-alabaster` | Văn bản trên nền tối, bề mặt highlight hiếm. |
| Umber | `#945c26` | `--color-umber` | Văn bản nhấn trên badge cụ thể; tạo điểm nhấn màu đất hiếm. |

## Tokens — Typography

### SuisseIntl — Font chữ chủ lực cho tất cả văn bản UI, body copy, navigation, tiêu đề sản phẩm và nút bấm. Tính trung tính của nó tạo nền tảng ổn định, dễ đọc cho serif biểu cảm hơn. · `--font-suisseintl`
- **Thay thế:** Inter, Helvetica Neue
- **Weight:** 400, 700
- **Cỡ chữ:** 11px, 12px, 14px, 16px, 18px, 30px
- **Line height:** 1.20-2.86
- **Vai trò:** Font chữ chủ lực cho tất cả văn bản UI, body copy, navigation, tiêu đề sản phẩm và nút bấm. Tính trung tính của nó tạo nền tảng ổn định, dễ đọc cho serif biểu cảm hơn.

### Zapf-Humanist — Dành riêng cho headline lớn, giàu cảm xúc. Dạng serif nhân văn của nó tương phản với sans-serif lâm sàng, thêm chất biên tập, cổ điển. · `--font-zapf-humanist`
- **Thay thế:** Optima, Palatino
- **Weight:** 400
- **Cỡ chữ:** 31px
- **Line height:** 1.33
- **Vai trò:** Dành riêng cho headline lớn, giàu cảm xúc. Dạng serif nhân văn của nó tương phản với sans-serif lâm sàng, thêm chất biên tập, cổ điển.

### Thang đo Type

| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.7 | — | `--text-caption` |
| body | 14px | 1.6 | — | `--text-body` |
| heading-sm | 18px | 1.33 | — | `--text-heading-sm` |
| heading | 30px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Hình dạng

**Đơn vị cơ bản:** 4px

**Mật độ:** thoải mái

### Thang đo Spacing

| 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` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 100 | 100px | `--spacing-100` |
| 180 | 180px | `--spacing-180` |

### Border Radius

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

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(51, 51, 51, 0.2) 0px 0px 4px 0px` | `--shadow-sm` |

### Layout

- **Page max-width:** 1600px
- **Section gap:** 96-128px
- **Card padding:** 24px
- **Element gap:** 8-16px

## Components

### Dark Action Button
**Vai trò:** Primary call-to-action, ví dụ 'Add to Cart'.

Nền: Charcoal (#333333). Chữ: Parchment (#fffef2). Padding: 12px 24px. Radius: 0px. Không border. Font: SuisseIntl.

### Outline Navigation Button
**Vai trò:** Hành động phụ trên header như 'Email sign up' hoặc 'Search'.

Nền: transparent. Chữ: Charcoal (#333333). Border: 1px solid rgba(51, 51, 51, 0.2). Padding: ~8px 16px. Radius: 0px. Font: SuisseIntl.

### Text Link
**Vai trò:** Inline navigation hoặc hành động cấp ba.

Nền: transparent. Chữ: Charcoal (#333333). Không border hoặc padding. Gạch chân khi hover. Font: SuisseIntl.

### Hero Outline Button
**Vai trò:** CTA chính trong hero section.

Nền: transparent. Chữ: Alabaster (#FFFFFF) hoặc Ink Black (#000000) tùy theo hero video. Border: 1px solid matching text color. Padding: 12px 24px. Radius: 0px. Font: SuisseIntl.

### Text Input / Select
**Vai trò:** Trường form cho người dùng nhập hoặc chọn.

Nền: Parchment (#fffef2). Chữ: Charcoal (#333333). Border: 1px solid rgba(51, 51, 51, 0.2). Radius: 0px. Padding: ~12px 20px.

### Informational Badge
**Vai trò:** Nhãn văn bản nhỏ phía trên tiêu đề sản phẩm, ví dụ 'New addition'.

Nền: transparent. Chữ: Charcoal (#333333). Radius: 0px. Font: SuisseIntl, 11px, bold.

### Circular Arrow Button
**Vai trò:** Điều khiển navigation carousel.

Nền: transparent. Border: none. Radius: 9999px. Chứa icon mũi tên đơn giản màu Charcoal (#333333).

## Do's and Don'ts

### Nên làm
- Chỉ dùng Zapf-Humanist cho headline lớn, giàu cảm xúc; nếu không thì mặc định dùng SuisseIntl.
- Duy trì góc 0px sắc nét trên tất cả element UI hình chữ nhật như card, button và input.
- Dựa vào khoảng trắng rộng rãi (96px+ giữa các section) để phân cách, không dùng divider hay shadow.
- Căn giữa văn bản và hình ảnh trong product card và feature block.
- Dùng tổ hợp Parchment (#fffef2) và Charcoal (#333333) cho nội dung chính.
- Giữ layout đơn giản: centered stack hoặc multi-column grid cân bằng.
- Dùng Dark Action Button cho tất cả hành động mua hàng chính.

### Không nên làm
- Không dùng góc bo tròn trên bất kỳ element nào ngoại trừ nút icon hình tròn.
- Không dùng drop shadow hoặc bất kỳ hiệu ứng 3D nào để tạo chiều sâu.
- Không thêm màu mới; bảng màu được giới hạn có chủ đích.
- Không dùng gradient.
- Không đặt văn bản lên phần phức tạp của hình ảnh; đảm bảo độ tương phản cao.
- Không dùng ảnh lifestyle có người mẫu hoặc tay cầm sản phẩm.
- Không tạo layout phức tạp, chồng chéo hoặc bất đối xứng.

## Elevation

Hệ thống này chủ động tránh shadow để tạo chiều sâu. Chiều sâu và phân cấp đạt được thông qua thang đo typographic, độ tương phản màu sắc rõ rệt giữa Parchment (#fffef2) và Charcoal (#333333), cùng khoảng trắng rộng rãi, chứ không phải qua bề mặt phân lớp hay drop shadow. Điều này tạo ra thẩm mỹ phẳng, đồ họa, lấy cảm hứng từ in ấn.

## Imagery

Ngôn ngữ hình ảnh mang tính khô khan và giống hiện vật. Ảnh sản phẩm được chụp cô lập và đặt chính giữa trên nền Parchment (#fffef2), giống như mẫu vật trong phòng thí nghiệm hoặc vật trưng bày trong gallery. Cố tình không có bối cảnh lifestyle, người mẫu hay bàn tay. Trọng tâm hoàn toàn là hình dạng sản phẩm, thủy tinh hổ phách và nhãn typographic. Hero section có thể dùng video đầy tâm trạng, tập trung vào kết cấu và cảm giác (ví dụ: lông thú, nước) thay vì sử dụng sản phẩm trực tiếp, tạo điểm đối trọng cảm giác với ảnh sản phẩm lâm sàng.

## Layout

Trang tuân theo mô hình kiến trúc có cấu trúc cao với max-width rộng khoảng 1600px, trong đó nội dung được căn giữa gọn gàng. Cấu trúc là một stack dọc gồm các dải full-width, thường xen kẽ giữa nền Parchment và ảnh/video full-bleed trong hero. Nhịp điệu dọc được xác định bởi khoảng cách rộng (96px+) giữa các section. Nội dung được sắp xếp trong các centered stack đơn giản hoặc grid 3 cột cứng nhắc cho product carousel. Cách tiếp cận có phương pháp, rộng rãi và dựa trên grid này củng cố độ chính xác và sự tập trung của thương hiệu.

## Agent Prompt Guide

### Tham chiếu màu nhanh
- **Nền trang**: `Parchment` (#fffef2)
- **Văn bản chính**: `Charcoal` (#333333)
- **Nền CTA chính**: `Charcoal` (#333333)
- **Chữ CTA chính**: `Parchment` (#fffef2)
- **Đường viền**: `rgba(51, 51, 51, 0.2)`

### Ví dụ Prompt Component
1.  **Hero Section**: "Tạo một hero full-screen với nền video tối, đầy tâm trạng. Căn giữa văn bản. Headline là 'For discerning canines' bằng `Zapf-Humanist`, 31px, `Alabaster` (#FFFFFF). Bên dưới, thêm body text bằng `SuisseIntl`, 18px, `Alabaster`. Cuối cùng, thêm outline button với chữ 'Discover more ->', border 1px `Alabaster`, radius 0px, padding 12px 24px."
2.  **Product Carousel Section**: "Tạo product carousel trên nền `Parchment` (#fffef2). Section heading 'New and notable' là 30px `SuisseIntl`, màu `Charcoal` (#333333). Sắp xếp ba product card thành một hàng. Mỗi card có radius 0px, nền `Parchment`, nội dung căn giữa. Ảnh sản phẩm ở trên, sau đó tên sản phẩm 'Animal' bằng 18px `SuisseIntl` bold, rồi mô tả bằng 14px `SuisseIntl`. Bên dưới, thêm dark action button với chữ 'Loading...' dùng nền `Charcoal`, chữ `Parchment`, radius 0px, padding 12px 24px."
3.  **Text Input Field**: "Thiết kế trường nhập văn bản cho form. Nó có nền `Parchment` (#fffef2), radius 0px, border 1px solid `rgba(51, 51, 51, 0.2)`. Placeholder text là `SuisseIntl`, 14px, `Charcoal` (#333333). Padding của input khoảng 12px 20px."

## Similar Brands

- **Byredo** — Cùng ảnh sản phẩm tối giản, bảng màu đơn sắc và tập trung typographic cao cấp.
- **Le Labo** — Chia sẻ thẩm mỹ nhãn 'apothecary', dựa vào typography để xây dựng thương hiệu và trải nghiệm e-commerce tinh tế.
- **SSENSE** — Sử dụng layout grid chịu ảnh hưởng brutalist tương tự và một font sans-serif mạnh mẽ, duy nhất làm yếu tố nhận diện cốt lõi.
- **Vitra** — Tinh thần thiết kế Thụy Sĩ với trọng tâm là layout dạng grid, typography chất lượng cao (sans-serif) và trình bày sản phẩm sạch sẽ.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-parchment: #fffef2;
  --color-charcoal: #333333;
  --color-ink-black: #000000;
  --color-carbon: #252525;
  --color-stone: #666666;
  --color-slate: #d6d5cc;
  --color-alabaster: #ffffff;
  --color-umber: #945c26;

  /* Typography — Font Families */
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-zapf-humanist: 'Zapf-Humanist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.7;
  --text-body: 14px;
  --leading-body: 1.6;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.33;
  --text-heading: 30px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --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-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-100: 100px;
  --spacing-180: 180px;

  /* Layout */
  --page-max-width: 1600px;
  --section-gap: 96-128px;
  --card-padding: 24px;
  --element-gap: 8-16px;

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

  /* Shadows */
  --shadow-sm: rgba(51, 51, 51, 0.2) 0px 0px 4px 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-parchment: #fffef2;
  --color-charcoal: #333333;
  --color-ink-black: #000000;
  --color-carbon: #252525;
  --color-stone: #666666;
  --color-slate: #d6d5cc;
  --color-alabaster: #ffffff;
  --color-umber: #945c26;

  /* Typography */
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-zapf-humanist: 'Zapf-Humanist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.7;
  --text-body: 14px;
  --leading-body: 1.6;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.33;
  --text-heading: 30px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-100: 100px;
  --spacing-180: 180px;

  /* Shadows */
  --shadow-sm: rgba(51, 51, 51, 0.2) 0px 0px 4px 0px;
}
```