# Agence Foudre

> Agence Foudre — Style Reference

## Prompt Content

```
# Agence Foudre — Style Reference
> Trang splash theo phong cách tạp chí với tông hồng son môi.

**Theme:** light

Agence Foudre sử dụng ngôn ngữ editorial-magazine táo bạo: nền cream ấm áp, display type condensed cỡ lớn màu magenta rực rỡ, và một màu xanh rừng sâu bất ngờ vừa làm body text vừa làm điểm nhấn. Giao diện được cố tình để thưa thớt — phần lớn viewport là khoảng trống, và nội dung xuất hiện dưới dạng các cụm typography dày đặc thay vì card grid hay hình ảnh sản phẩm. Màu sắc được dùng như dấu câu cảm xúc: hồng nóng gào thét, hồng nhạt thì thầm, xanh đậm neo giữ, và kem ấm làm mềm mọi bề mặt. Các component tối thiểu — nút hồng tròn, badge hình pill, và chữ to khỏe là toàn bộ chrome. Đây là một portfolio/expression site, không phải product UI: tính cách thương hiệu CHÍNH LÀ typography và màu sắc, mọi thứ khác đều lùi lại phía sau.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Lipstick Magenta | `#db3c8a` | `--color-lipstick-magenta` | Display headlines, màu thương hiệu chính, icon buttons, heading accents — hồng rực mang 100% nhận diện thương hiệu |
| Forest Ink | `#00522d` | `--color-forest-ink` | Body text, links, iconography, footer — xanh đậm bão hòa trên nền cream tạo sự trang trọng editorial mà không màu trung tính nào có được |
| Blush Cream | `#fce5df` | `--color-blush-cream` | Nền mềm nhẹ, badge backgrounds, khối wash nhẹ, hover states — hồng kem ấm nằm giữa trang và điểm nhấn |
| Warm Chalk | `#fff8f6` | `--color-warm-chalk` | Nền hỗ trợ sáng cho background nhẹ và phân cách section. Không dùng làm màu CTA chính |
| Charcoal Black | `#000000` | `--color-charcoal-black` | Text tương phản cao, icon tối, line art, SVG fills — dùng tiết kiệm để tạo sức nổ tối đa |
| Lilac Mist | `#d1cfe4` | `--color-lilac-mist` | Tô màu trang trí cho type, divider nhẹ, outline stroke mờ — xám hoa cà lạnh cho những khoảnh khắc thị giác êm nhất |
| Bubblegum | `#f29ebd` | `--color-bubblegum` | Điểm nhấn phụ, wash hồng nhạt hơn, display type mờ, ghost button borders — hồng giảm từ brand magenta |
| Cotton Pink | `#e878b2` | `--color-cotton-pink` | Nền hồng trung cho elevated cards, tonal accent giữa magenta và bubblegum |

## Tokens — Typography

### Beni — Chỉ dùng cho display headlines — weight ultra-black với line-height 0.70 xếp chữ sít nhau, tạo khối typography dày đặc chiếm ưu thế trên viewport. Letter-spacing normal để weight nặng tự làm việc; không cần tracking adjustment ở scale này · `--font-beni`
- **Substitute:** Druk Wide Heavy, Tungsten Bold, Antonio Black
- **Weights:** 900
- **Sizes:** 46px, 80px, 94px, 130px, 230px
- **Line height:** 0.70
- **Vai trò:** Chỉ dùng cho display headlines — weight ultra-black với line-height 0.70 xếp chữ sít nhau, tạo khối typography dày đặc chiếm ưu thế trên viewport. Letter-spacing normal để weight nặng tự làm việc; không cần tracking adjustment ở scale này

### Clash Grotesk — Body text, labels, navigation, buttons, badges, links, tất cả UI chrome — geometric grotesk đảm nhận chức năng trong khi Beni trình diễn. Các weight tạo hierarchy rõ ràng: 400 cho body, 500 cho emphasized, 700 cho buttons và active states · `--font-clash-grotesk`
- **Substitute:** Inter, Satoshi, General Sans
- **Weights:** 400, 500, 700
- **Sizes:** 10px, 12px, 13px, 14px, 16px, 20px, 24px, 30px
- **Line height:** 1.20
- **Vai trò:** Body text, labels, navigation, buttons, badges, links, tất cả UI chrome — geometric grotesk đảm nhận chức năng trong khi Beni trình diễn. Các weight tạo hierarchy rõ ràng: 400 cho body, 500 cho emphasized, 700 cho buttons và active states

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro | 10px | 12 | — | `--text-micro` |
| label | 12px | 14 | — | `--text-label` |
| caption | 14px | 17 | — | `--text-caption` |
| body-sm | 16px | 19 | — | `--text-body-sm` |
| body | 20px | 24 | — | `--text-body` |
| subheading | 46px | 32 | — | `--text-subheading` |
| heading-sm | 80px | 56 | — | `--text-heading-sm` |
| heading | 94px | 66 | — | `--text-heading` |
| heading-lg | 130px | 91 | — | `--text-heading-lg` |
| display | 230px | 161 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 60 | 60px | `--spacing-60` |
| 120 | 120px | `--spacing-120` |
| 140 | 140px | `--spacing-140` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 20px |
| badges | 10px |
| buttons | 10px |
| elevated | 25px |
| iconButtons | 9999px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 120px
- **Card padding:** 30px
- **Element gap:** 15-20px

## Components

### Circular Menu Trigger
**Vai trò:** Trình khởi chạy navigation chính

Vòng tròn hồng đường kính 50px (#db3c8a), full radius. Chứa glyph hamburger ba dòng màu tối hoặc trắng. Fixed position góc trên bên trái. Không border, không shadow. Vòng tròn hồng là element UI duy nhất phá vỡ nền cream

### Circular Brand Mark
**Vai trò:** Logo / brand icon button

Vòng tròn đường kính 50px khớp với menu trigger. Chứa mark của agency (biến thể tia sét). Fixed góc trên bên phải. Cùng màu hồng (#db3c8a), cùng weight như menu — sự đối xứng thị giác xác định đây là hai chấm tương tác duy nhất trên màn hình

### Display Headline Block
**Vai trò:** Tuyên bố typography hero

Beni weight 900, kích thước 94-230px, line-height 0.70. Màu luân phiên giữa #db3c8a (full intensity), #f29ebd (hồng trung), và #fce5df (wash mờ) để tạo nhịp điệu thị giác giữa các section. Căn trái, neo dưới đáy viewport. Không margin — bản thân type chính là layout

### Faded Echo Headline
**Vai trò:** Lặp lại / đối âm display type

Cùng xử lý Beni 900 như main headline nhưng màu #fce5df hoặc #f29ebd — xuất hiện như phiên bản ghost của một tuyên bố mà phiên bản full-color vừa đưa ra. Tạo đối thoại giữa các section. Cùng scale lớn (80-130px)

### Section Label
**Vai trò:** Thẻ phân loại micro-typography

Clash Grotesk 400-500, 12-14px, uppercase hoặc sentence case. Màu: #00522d hoặc #db3c8a mờ. Đặt trực tiếp phía trên display headline mà nó mô tả. Tight tracking, không trang trí — chỉ là một label thì thầm

### Pill Badge / Tag
**Vai trò:** Chip phân loại hoặc filter

Clash Grotesk 500, 12-14px, text #00522d trên nền #fce5df. Radius 9999px (bo tròn hoàn toàn). Padding 7px 15px. Không border. Xuất hiện tiết kiệm để gắn thẻ nội dung mà không cạnh tranh với display type

### Body Paragraph
**Vai trò:** Text editorial dễ đọc

Clash Grotesk 400, 16-20px, line-height 1.20, màu #00522d. Max width ~60ch. Khoảng cách dọc rộng rãi (30-60px giữa các khối). Xanh đậm trên cream ấm là trải nghiệm đọc chính

### Text Link
**Vai trò:** Link điều hướng hoặc editorial nội dòng

Clash Grotesk 500, kế thừa kích thước body, màu #00522d với điểm nhấn #db3c8a. Không underline mặc định; underline xuất hiện khi hover màu #db3c8a. Tối giản, tự tin — link nên cảm giác như một cử chỉ định hướng, không phải nút bấm

### Icon Button Ghost
**Vai trò:** Bề mặt tương tác tối giản

Không background, không border. Chỉ icon màu #000000 hoặc #00522d, 20-24px. Hover state: icon chuyển sang #db3c8a. Dùng cho các hành động phụ khi nút hồng tròn quá ồn ào

## Do's and Don'ts

### Do
- Dùng Beni weight 900 với line-height 0.70 cho tất cả display type — tight leading là thứ làm cho headline có cảm giác kiến trúc, không chỉ là to
- Mặc định #fff8f6 làm canvas; để #fce5df chỉ xuất hiện như bề mặt nhấn 5-10%, không bao giờ làm nền toàn trang
- Ghép #db3c8a (ồn ào) với #fce5df (thì thầm) cùng tông để tạo đối thoại giữa các section — màu đầy đủ đưa ra tuyên bố, màu mờ vọng lại nó
- Dùng #00522d cho tất cả body text và links — xanh đậm là lựa chọn đặc trưng mà không màu trung tính nào thay thế được
- Để whitespace làm công việc cấu trúc: section gap 60-120px, và để các khối display riêng lẻ chiếm toàn bộ chiều cao viewport
- Đặt tất cả interactive circles (menu, brand) đường kính 50px với full radius và fill #db3c8a — đây là hai chấm duy nhất trên trang
- Giới hạn chiều rộng body text ở 60ch bất kể viewport — readability hơn impact

### Don't
- Không bao giờ dùng #000000 cho body text — #00522d là giọng nói editorial; màu đen chỉ dành cho icons và graphic elements
- Không đặt Beni ở kích thước body (dưới 30px) — nó được thiết kế chỉ cho display; dùng Clash Grotesk cho mọi thứ chức năng
- Tránh layout nặng về card — hệ thống này thở qua type và không gian, không qua mật độ thông tin
- Không bao giờ áp #db3c8a cho vùng body lớn — hồng là dấu chấm than, không phải hình nền
- Không thêm shadows, gradients, hoặc glass effects — hệ thống cố tình flat; chiều sâu đến từ tương phản màu sắc và scale typography
- Tránh pha trộn hơn hai type families — Beni cho display, Clash Grotesk cho mọi thứ khác; không serif, không monospace, không decorative fonts
- Không dùng layout centered đối xứng — mọi thứ căn trái hoặc dùng vị trí asymmetric có chủ đích; type nên có cảm giác editorial, không phải nghi lễ

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Warm Chalk | `#fff8f6` | Page canvas — nền mọi thứ đặt lên |
| 2 | Blush Cream | `#fce5df` | Bề mặt tông nhẹ cho badges, tags, và khối màu nhẹ nhàng |
| 3 | Cotton Pink | `#e878b2` | Bề mặt nhấn elevated, dùng hiếm cho khoảnh khắc card nổi bật |

## Imagery

Hầu như không có hình ảnh truyền thống. Site là một showcase typography nơi display type Beni cỡ lớn CHÍNH LÀ nội dung thị giác. Ở nơi hình ảnh xuất hiện (portfolio pieces, team, hoặc case studies), chúng được xử lý như crop editorial full-bleed không bo góc, không shadow, không decorative frames — ảnh thô được trình bày trong các tấm hình chữ nhật. Bất kỳ illustrations hoặc graphic elements nào cũng dùng brand palette: hình dạng hồng nóng, line work xanh đậm, điểm nhấn lilac. Icons là glyph line-art tối giản màu đen hoặc xanh, không bao giờ filled hoặc nhiều màu. Mật độ thị giác bị đảo ngược: 95% typography, 5% hình ảnh.

## Layout

Full-bleed single-column layout với khoảng trắng dọc cực lớn. Mỗi section thường chiếm toàn bộ chiều cao viewport, neo bởi display type khổng lồ ở góc dưới-bên trái hoặc trên-bên trái. Navigation được rút gọn thành hai vòng tròn hồng ở các góc tuyệt đối — không nav bar, không mega-menu, không breadcrumbs. Nội dung cuộn như một chuỗi các tuyên bố typography thay vì các section truyền thống: mỗi vị trí cuộn đưa ra một thông điệp táo bạo, sau đó là khoảng trắng mênh mông, rồi đến thông điệp tiếp theo. Không card grids, không multi-column layouts, không sidebar. Trang đọc như một tuyên ngôn typography: một ý tưởng mỗi màn hình, mỗi ý được render ở scale tối đa. Responsive behavior thu nhỏ display type theo tỷ lệ nhưng giữ nguyên khoảng cách rộng rãi và navigation góc tròn.

## Agent Prompt Guide

**Quick Color Reference**
- text: #00522d
- background: #fff8f6
- border / divider: #fce5df
- accent: #db3c8a
- secondary accent: #f29ebd
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. Tạo một hero display block: background #fff8f6, căn trái Beni weight 900 ở 130px với line-height 0.70, màu #db3c8a. Thêm label Clash Grotesk 500 14px phía trên màu #00522d ghi tên section category.
2. Tạo một ghost navigation link: không background, không border, Clash Grotesk 500 ở 16px màu #00522d, hover underline màu #db3c8a. Nội dòng trong body text, max-width 60ch.
3. Tạo một circular brand button: đường kính 50px, border-radius 9999px, background #db3c8a, chứa glyph tia sét màu đen căn giữa. Fixed vị trí góc trên bên phải.
4. Tạo một faded echo headline: Beni weight 900 ở 80px, line-height 0.70, màu #fce5df. Đặt trong một section mới để vọng lại một tuyên bố #db3c8a trước đó với cường độ giảm.
5. Tạo một pill category tag: Clash Grotesk 500 ở 12px, màu #00522d, background #fce5df, border-radius 9999px, padding 7px 15px. Không border, không shadow.

## Similar Brands

- **Pentagram** — Cùng cách tiếp cận editorial-magazine nơi display typography cỡ lớn thay thế hình ảnh sản phẩm và layout cực kỳ tối giản
- **Locomotive (studio)** — Chung cam kết với display type táo bạo tùy chỉnh và khoảng trắng rộng rãi làm hệ thống cấu trúc chính
- **Resn** — Thẩm mỹ agency thử nghiệm với navigation độc đáo (circular triggers) và nhịp điệu trang typography-first
- **Buck (studio)** — Ngôn ngữ portfolio agency sáng tạo dùng display type làm hero content với UI chrome hạn chế

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-lipstick-magenta: #db3c8a;
  --color-forest-ink: #00522d;
  --color-blush-cream: #fce5df;
  --color-warm-chalk: #fff8f6;
  --color-charcoal-black: #000000;
  --color-lilac-mist: #d1cfe4;
  --color-bubblegum: #f29ebd;
  --color-cotton-pink: #e878b2;

  /* Typography — Font Families */
  --font-beni: 'Beni', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-clash-grotesk: 'Clash Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 12;
  --text-label: 12px;
  --leading-label: 14;
  --text-caption: 14px;
  --leading-caption: 17;
  --text-body-sm: 16px;
  --leading-body-sm: 19;
  --text-body: 20px;
  --leading-body: 24;
  --text-subheading: 46px;
  --leading-subheading: 32;
  --text-heading-sm: 80px;
  --leading-heading-sm: 56;
  --text-heading: 94px;
  --leading-heading: 66;
  --text-heading-lg: 130px;
  --leading-heading-lg: 91;
  --text-display: 230px;
  --leading-display: 161;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 120px;
  --card-padding: 30px;
  --element-gap: 15-20px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 25px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 20px;
  --radius-badges: 10px;
  --radius-buttons: 10px;
  --radius-elevated: 25px;
  --radius-iconbuttons: 9999px;

  /* Surfaces */
  --surface-warm-chalk: #fff8f6;
  --surface-blush-cream: #fce5df;
  --surface-cotton-pink: #e878b2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-lipstick-magenta: #db3c8a;
  --color-forest-ink: #00522d;
  --color-blush-cream: #fce5df;
  --color-warm-chalk: #fff8f6;
  --color-charcoal-black: #000000;
  --color-lilac-mist: #d1cfe4;
  --color-bubblegum: #f29ebd;
  --color-cotton-pink: #e878b2;

  /* Typography */
  --font-beni: 'Beni', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-clash-grotesk: 'Clash Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro: 10px;
  --leading-micro: 12;
  --text-label: 12px;
  --leading-label: 14;
  --text-caption: 14px;
  --leading-caption: 17;
  --text-body-sm: 16px;
  --leading-body-sm: 19;
  --text-body: 20px;
  --leading-body: 24;
  --text-subheading: 46px;
  --leading-subheading: 32;
  --text-heading-sm: 80px;
  --leading-heading-sm: 56;
  --text-heading: 94px;
  --leading-heading: 66;
  --text-heading-lg: 130px;
  --leading-heading-lg: 91;
  --text-display: 230px;
  --leading-display: 161;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-140: 140px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 25px;
}
```