# Glossier

> # Glossier — Style Reference

## Prompt Content

```
# Glossier — Style Reference
> Sunlit beauty editorial — trắng giấy, đen mực, một tia vàng

**Theme:** light

Glossier hoạt động như một tạp chí làm đẹp kỹ thuật số: một canvas gần như đơn sắc với trắng giấy và đen mực, bị phá vỡ bởi một điểm nhấn vàng điện duy nhất — vừa là brand wordmark vừa là lời kêu gọi hành động duy nhất. Hệ thống mang tính editorial ở sự tiết chế — headline Apercu cỡ lớn, khoảng thở rộng rãi, ảnh lifestyle full-bleed đảm nhận phần lớn trọng lượng cảm xúc — và mang tính thực dụng trong thực thi, với flat product cards, đường viền mảnh (hairline borders), và hoàn toàn không có chi tiết trang trí. Màu vàng không phải là màu phụ của thương hiệu; nó CHÍNH LÀ thương hiệu, được sử dụng một cách dè xẻn để mỗi lần xuất hiện đều như một tia sáng lóe. Mọi thứ khác phải lùi lại: các màu trung tính là xám ấm với một chút hồng nhẹ (blush undertone), đường viền gần như vô hình, chữ thì chặt và nén. Kết quả là một storefront mang phong cách tự tin, tinh tế, và hiện đại không hề nao núng.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Glossier Yellow | `#fff116` | `--color-glossier-yellow` | Điểm nhấn vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |
| Ink | `#000000` | `--color-ink` | Văn bản chính, nav links, body copy, footer text, icon strokes, hairline borders; màu chủ đạo về typographic và cấu trúc |
| Paper | `#ffffff` | `--color-paper` | Bề mặt product card, input fills, elevated panels; mức bề mặt sáng nhất trong hệ thống phân cấp |
| Fog | `#f7f7f7` | `--color-fog` | Page canvas, nền section, chuyển tiếp ảnh sang trang; bề mặt nền mà toàn bộ trang web nằm trên đó |
| Blush | `#faf2f4` | `--color-blush` | Nền footer, các ngắt section ấm áp nhẹ nhàng; một màu trắng ngà pha hồng gần như không nhận thấy, tạo thêm hơi ấm cho cuối trang |
| Mist | `#f0f0f0` | `--color-mist` | Bề mặt hỗ trợ nhẹ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính |
| Ash | `#e8e8e8` | `--color-ash` | Đường viền input, nền badge, hairline dividers; màu viền cấu trúc cho card và form elements |
| Graphite | `#666666` | `--color-graphite` | Văn bản phụ, helper copy, muted labels, form placeholder text; màu xám trung duy nhất cho phân cấp typographic |
| Slate | `#464545` | `--color-slate` | Product list và card swatch fills; màu xám chức năng tối nhất cho catalog imagery placeholders |
| Cobalt Tag | `#0600ff` | `--color-cobalt-tag` | Điểm nhấn tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |

## Tokens — Typography

### Apercu — Kiểu chữ chính trên toàn bộ UI — body ở 16px/400, navigation và labels ở 12–14px/500, subheadings ở 20px/500, editorial headlines ở 32px/700. Cấu trúc geometric humanist của Apercu mang lại cho thương hiệu giọng nói nén, đương đại; letter-spacing gần như bằng 0 (0.002–0.003em) giữ cho chữ chặt và giống tạp chí thay vì thoáng hoặc thân thiện. Weight 700 chỉ dành cho các khoảnh khắc editorial display, không dùng cho UI chrome. · `--font-apercu`
- **Thay thế:** Inter, Suisse Int'l, hoặc Söhne
- **Weights:** 400, 500, 700
- **Kích thước:** 12, 14, 16, 20, 32
- **Line height:** 1.00–1.70
- **Letter spacing:** 0.0020em đến 0.0030em ở kích thước body; 0.0400em trên small caps/eyebrow labels
- **Vai trò:** Kiểu chữ chính trên toàn bộ UI — body ở 16px/400, navigation và labels ở 12–14px/500, subheadings ở 20px/500, editorial headlines ở 32px/700. Cấu trúc geometric humanist của Apercu mang lại cho thương hiệu giọng nói nén, đương đại; letter-spacing gần như bằng 0 (0.002–0.003em) giữ cho chữ chặt và giống tạp chí thay vì thoáng hoặc thân thiện. Weight 700 chỉ dành cho các khoảnh khắc editorial display, không dùng cho UI chrome.

### Apercu Mono — Typography micro-utility cho order metadata, tracking numbers, và code-adjacent labels; người anh em monospaced tạo ra kết cấu kỹ thuật đối lập với proportional body face · `--font-apercu-mono`
- **Thay thế:** JetBrains Mono hoặc IBM Plex Mono
- **Weights:** 400
- **Kích thước:** 12
- **Line height:** 1.40
- **Vai trò:** Typography micro-utility cho order metadata, tracking numbers, và code-adjacent labels; người anh em monospaced tạo ra kết cấu kỹ thuật đối lập với proportional body face

### 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
- **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 | 12px | 1.4 | 0.48px | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.3 | -0.06px | `--text-subheading` |
| heading | 32px | 1.2 | -0.1px | `--text-heading` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 11 | 11px | `--spacing-11` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 32 | 32px | `--spacing-32` |
| 34 | 34px | `--spacing-34` |
| 40 | 40px | `--spacing-40` |
| 41 | 41px | `--spacing-41` |

### Border Radius

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

### Layout

- **Page max-width:** 1440px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Yellow Primary Button
**Vai trò:** Kiểu call-to-action duy nhất trên toàn trang

Nền #fff116 đầy, chữ #000000 bằng Apercu 14px/500, uppercase tracking ở 0.04em, border-radius 0px, padding 12px 24px, không shadow. Nút này là thứ ồn ào nhất trên bất kỳ trang nào và phải được sử dụng dè xẻn — tối đa một nút trên mỗi viewport.

### Ghost Text Link
**Vai trò:** Inline và navigation links mặc định

Không nền, chữ #000000 bằng Apercu 14–16px/400, gạch chân chỉ xuất hiện khi hover. Kế thừa màu từ parent khi lồng trong các ngữ cảnh muted.

### Outlined Secondary Button
**Vai trò:** Các hành động phụ như 'Choose set' trên product cards

Nền trong suốt, viền 1px solid #000000, chữ #000000 bằng Apercu 14px/500, radius 0px, full-width trong card, padding 14px 16px. Nằm bên dưới product card như một action strip full-width.

### Product Card
**Vai trò:** Mục catalog trong grid views

Nền #ffffff, border-radius 0px, không shadow. Ảnh sản phẩm phủ kín phần trên card với tỷ lệ 1:1 hoặc 4:5. Bên dưới ảnh: tên sản phẩm bằng Apercu 16px/500 #000000, mô tả ngắn bằng 14px/400 #666666, giá bằng 16px/500 #000000. Không có card border — whitespace phân cách các card với nền trang #f7f7f7.

### NEW Badge
**Vai trò:** Thẻ sản phẩm editorial

Nền #0600ff đặc, chữ trắng bằng Apercu 12px/700 uppercase, radius 0px, padding 4px 8px. Đặt ở góc trên bên trái của ảnh sản phẩm.

### Utility Announcement Bar
**Vai trò:** Dải quảng cáo toàn trang

Nền #000000 full-bleed, chữ #ffffff bằng Apercu 12px/400, căn giữa, paddingTop và paddingBottom 1px. Chứa thông báo vận chuyển và copy quảng cáo.

### Top Navigation
**Vai trò:** Navigation chính của trang

Nền trắng, logo #000000 bằng Apercu bold (trái), các category links ngang bằng Apercu 12px/500 uppercase (giữa), utility icons và account links (phải). Sticky khi cuộn, radius 0px, viền dưới 1px solid #e8e8e8 khi cuộn.

### Hero Overlay Card
**Vai trò:** Product callout theo ngữ cảnh trên hero imagery

Card nền trắng, không viền, không radius, nổi ở góc trên bên trái trên một bức ảnh lifestyle full-bleed. Chứa eyebrow label (Apercu 12px/500 uppercase), headline (20–32px/700), body copy (14px/400 #666666), và yellow CTA button. Tạo năng lượng bìa tạp chí editorial.

### Text Input
**Vai trò:** Form fields cho email, search, checkout

Nền #ffffff, viền 1px solid #e8e8e8, radius 0px, padding 12px 16px, chữ Apercu 14px/400 #000000. Placeholder bằng #666666. Trạng thái focus dày viền lên 2px solid #000000.

### Full-Bleed Image Section
**Vai trò:** Các khối ảnh lifestyle và atmospheric

Ảnh edge-to-edge, không padding, không viền. Glossier wordmark bằng #fff116 Apercu 700 phủ lên ở tỷ lệ khổng lồ (200px+), thường tràn ra ngoài mép màn hình để tạo kịch tính editorial.

### Two-Column Image Split
**Vai trò:** Các khối navigation category song song

Hai panel 50/50, mỗi panel là một bức ảnh full-bleed với một thẻ chữ trắng căn giữa: eyebrow label bằng Apercu 12px/500 uppercase, CTA bằng 14px/500. Phân cách skincare với makeup categories không có viền nhìn thấy — chỉ có đường nối ảnh.

### Footer
**Vai trò:** Footer trang với navigation, newsletter, legal

Nền #faf2f4 ấm áp (blush), radius 0px, padding trên 64px rộng rãi. Danh sách link Apercu 14px/400 #000000 trong grid 4 cột, newsletter signup inline, copyright bằng 12px/400 #666666.

## Do's and Don'ts

### Nên làm
- Chỉ sử dụng #fff116 cho primary action button và brand wordmark — không bao giờ dùng làm nền, viền, hoặc màu chữ ở nơi khác
- Duy trì border-radius 0px trên tất cả components — cards, buttons, badges, và inputs phải giữ góc sắc
- Đặt body text ở 16px/400 bằng Apercu với letter-spacing 0.002–0.003em; chỉ dành 32px/700 cho editorial display headlines
- Sử dụng ảnh lifestyle full-bleed làm yếu tố hình ảnh chính; nền trang #f7f7f7 chỉ nên hiển thị ở mép section và xung quanh card grids
- Giữ product cards trên nền #ffffff thuần khiết, không viền, không shadow — để whitespace và canvas #f7f7f7 tạo sự phân cách
- Viết hoa (uppercase) Apercu 12px/500 với tracking 0.04em cho tất cả eyebrow labels, category names, và nav items
- Sử dụng #0600ff Cobalt chỉ cho NEW hoặc status badges — không bao giờ dùng làm CTA, link, hoặc điểm nhấn trang trí

### Không nên làm
- Không thêm rounded corners, drop shadows, hoặc gradients — hệ thống cố tình phẳng và sắc
- Không sử dụng #fff116 làm hover state, border, hoặc nền cho các element không phải nút — điều đó làm loãng sức mạnh của primary action
- Không sử dụng màu sắc để tạo phân cấp typographic — dựa vào Apercu weight (400/500/700) và các bước kích thước
- Không thêm borders hoặc backgrounds vào product cards; bề mặt #ffffff trên canvas #f7f7f7 cung cấp đủ sự phân cách
- Không sử dụng #666666 cho văn bản chính; chỉ dành nó cho helper copy, metadata, và placeholders
- Không căn giữa body copy hoặc product descriptions — căn trái mọi thứ ngoại trừ hero display type và section intros
- Không sử dụng nhiều hơn một yellow element trên mỗi viewport; sức mạnh của điểm nhấn phụ thuộc vào sự khan hiếm của nó

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Page Canvas | `#f7f7f7` | Nền cơ bản cho toàn bộ trang web; hiển thị phía sau product grids, giữa các section, và là màu body mặc định |
| 1 | Product Card | `#ffffff` | Bề mặt nâng cao cho catalog items và content blocks; nằm một bước trên canvas mà không có borders hoặc shadows |
| 2 | Footer | `#faf2f4` | Bề mặt ấm áp pha hồng (blush) cho footer; tạo sự thay đổi nhiệt độ màu tinh tế ở cuối trang |
| 3 | Accent | `#fff116` | Bề mặt tín hiệu thương hiệu — chỉ xuất hiện dưới dạng CTA button fill và wordmark, không bao giờ là nền kéo dài |

## Imagery

Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo. Ảnh lifestyle và chân dung full-bleed lấp đầy viewport — ánh sáng ngược giờ vàng ấm áp, cận cảnh làn da mềm mại, bàn tay cầm chai sản phẩm trước tia nắng mặt trời. Bảng màu trong nhiếp ảnh là ấm áp và bão hòa thấp: bầu trời màu đào, tông màu da terracotta, xanh dương đại dương sâu thẳm. Ảnh luôn edge-to-edge, không rounded corners, không borders, và không overlays ngoại trừ thẻ chữ trắng hoặc yellow wordmark. Ảnh sản phẩm trên catalog cards được chụp trên nền trắng thuần khiết (seamless) với ánh sáng phẳng, đều. Tỷ lệ ảnh so với chữ xấp xỉ 70/30 — ảnh mang cảm xúc, chữ mang chức năng. Không có illustrations, không có abstract graphics, không có 3D renders.

## Layout

Trang là một chuỗi các section full-bleed xếp chồng theo chiều dọc, mỗi section được thiết kế như một editorial spread độc lập. Hero là một bức ảnh full-viewport với một white overlay card nổi (góc trên bên trái) và một yellow wordmark khổng lồ tràn ra mép dưới. Bên dưới hero, các section xen kẽ giữa full-bleed imagery và contained card grids. Một two-column 50/50 image split phân cách các category zones (skincare/makeup) không có viền nhìn thấy — chỉ có đường nối ảnh phân chia chúng. Product catalog sử dụng grid 4 cột gồm các card vuông trên canvas #f7f7f7. Navigation là một top bar tối giản với một utility announcement strip phía trên. Section gaps rộng rãi (64px) nhưng chuyển tiếp giữa các section liền mạch — không có dividers, không có màu nền xen kẽ ngoại trừ footer ấm áp. Nhịp điệu tổng thể là: ảnh, chữ, ảnh, grid, ảnh — giống như lật một tạp chí thời trang.

## Agent Prompt Guide

## Quick Color Reference
- Text: #000000 (Ink)
- Background: #f7f7f7 (Fog)
- Border: #e8e8e8 (Ash)
- Accent: #fff116 (Glossier Yellow)
- Surface: #ffffff (Paper)
- Muted text: #666666 (Graphite)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì tự tạo ra màu CTA đầy.

2. **Product Card**: Bề mặt trắng #ffffff, không border hoặc shadow, radius 0px. Ảnh sản phẩm phủ kín phần trên với tỷ lệ 4:5. Tên sản phẩm bằng Apercu 16px weight 500 #000000, mô tả bằng 14px weight 400 #666666, giá bằng 16px weight 500 #000000. Bên dưới card, một outlined button full-width: nền trong suốt, viền 1px solid #000000, radius 0px, Apercu 14px weight 500, padding 14px 16px.

4. **Utility Bar**: Nền #000000 full-bleed, chữ #ffffff bằng Apercu 12px weight 400, căn giữa, padding dọc 4px.

5. **NEW Badge**: Nền #0600ff đặc, chữ trắng bằng Apercu 12px weight 700 uppercase, radius 0px, padding 4px 8px, đặt ở góc trên bên trái của ảnh sản phẩm.

## Similar Brands

- **Aesop** — Cùng sự tiết chế editorial với bảng màu trung tính ấm, typography sans-serif gần serif, và nhiếp ảnh chiếm toàn bộ viewport
- **Goop** — Thẩm mỹ DTC beauty tương tự với ảnh lifestyle full-bleed, whitespace rộng rãi, và một màu nhấn duy nhất neo thương hiệu
- **Mejuri** — Bố cục product grid sạch sẽ với card trắng trên canvas xám ấm, chrome tối giản, và ảnh đen trắng tương phản cao
- **Aesop / Mansur Gavriel / & Other Stories** — Cùng ngôn ngữ component phẳng, radius 0px và triết lý thiết kế nơi sự tiết chế và whitespace mang nhiều trọng lượng hơn trang trí

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-glossier-yellow: #fff116;
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-fog: #f7f7f7;
  --color-blush: #faf2f4;
  --color-mist: #f0f0f0;
  --color-ash: #e8e8e8;
  --color-graphite: #666666;
  --color-slate: #464545;
  --color-cobalt-tag: #0600ff;

  /* Typography — Font Families */
  --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.48px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.06px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.1px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-41: 41px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

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

  /* Surfaces */
  --surface-page-canvas: #f7f7f7;
  --surface-product-card: #ffffff;
  --surface-footer: #faf2f4;
  --surface-accent: #fff116;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-glossier-yellow: #fff116;
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-fog: #f7f7f7;
  --color-blush: #faf2f4;
  --color-mist: #f0f0f0;
  --color-ash: #e8e8e8;
  --color-graphite: #666666;
  --color-slate: #464545;
  --color-cobalt-tag: #0600ff;

  /* Typography */
  --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apercu-mono: 'Apercu Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.4;
  --tracking-caption: 0.48px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.06px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.1px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;
  --spacing-34: 34px;
  --spacing-40: 40px;
  --spacing-41: 41px;
}
```