# Ferrari

> Ferrari — Style Reference

## Prompt Content

```
# Ferrari — Style Reference
> Phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, để những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh.

**Theme:** mixed

Sự hiện diện kỹ thuật số của Ferrari là một phòng trưng bày đơn sắc dưới ánh đèn spotlight — một giao diện hoàn toàn không màu sắc, nơi những chiếc xe mang toàn bộ màu sắc qua nhiếp ảnh, còn bản thân UI giữ kỷ luật với các tông đen, trắng và xám thuần túy. Layout mang phong cách editorial: hero cinematic tối full-bleed với tiêu đề all-caps căn giữa, xen kẽ với các section nội dung trắng có khoảng thở rộng rãi và nhịp điệu text-trái/image-phải cứng nhắc. Ngôn ngữ thị giác kiềm chế và đầy tự tin — CTA mũi tên tròn mảnh, navigation uppercase letter-spacing rộng, border siêu mảnh, không có điểm nhấn màu sắc, và không có gradient trang trí. Mọi quyết định bề mặt đều nhường chỗ cho bức ảnh: giao diện không bao giờ được cạnh tranh với chiếc xe.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Pure White | `#ffffff` | `--color-pure-white` | Canvas trang, nền section sáng, bề mặt card, chữ trên nền tối |
| Pure Black | `#000000` | `--color-pure-black` | Hero và feature section tối full-bleed, thanh navigation sâu, chữ chính trên nền sáng |
| Carbon Black | `#181818` | `--color-carbon-black` | Bề mặt tối thứ cấp, card tối, nền footer — cao hơn pure black một bậc |
| Graphite | `#303030` | `--color-graphite` | Bề mặt tối nâng cao, border tối, cấu trúc dark-mode tinh tế — sáng hơn Carbon một bậc |
| Steel Gray | `#8f8f8f` | `--color-steel-gray` | Chữ phụ trợ muted, icon stroke thứ cấp, metadata nhẹ nhàng trên cả nền sáng và tối |

## Tokens — Typography

### Body-Font — Body-Font — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-body-font`
- **Weights:** 400
- **Sizes:** 9px, 11px, 12px, 13px
- **Line height:** 1.27, 1.5, 1.78, 2
- **Letter spacing:** 0.015, 0.022, 0.028, 0.083, 0.091
- **Vai trò:** Body-Font — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Ferrari custom sans-serif — Typeface một weight 400 dùng cho mọi thứ — navigation, headline, body, label. Headline và nav all-caps với tracking dương mạnh (0.083–0.091em) là signature move; body copy dùng tracking gần bằng 0 hoặc hơi dương (0.015–0.028em). Việc không có weight bold/light là một lựa chọn editorial có chủ đích: hierarchy được tạo ra bằng kích thước và tracking, không bao giờ dùng weight contrast. · `--font-ferrari-custom-sans-serif`
- **Thay thế:** Inter, Helvetica Neue, hoặc Neue Haas Grotesk — chọn font có dạng hình học sạch sẽ và phân bố weight đồng đều ở 400
- **Weights:** 400
- **Sizes:** 
- **Line height:** 1.27–2.00
- **Letter spacing:** 0.0150em đến 0.0910em — rộng nhất trên nav/label text uppercase nhỏ (0.083–0.091em), tight trên body copy
- **Vai trò:** Typeface một weight 400 dùng cho mọi thứ — navigation, headline, body, label. Headline và nav all-caps với tracking dương mạnh (0.083–0.091em) là signature move; body copy dùng tracking gần bằng 0 hoặc hơi dương (0.015–0.028em). Việc không có weight bold/light là một lựa chọn editorial có chủ đích: hierarchy được tạo ra bằng kích thước và tracking, không bao giờ dùng weight contrast.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.78 | — | `--text-caption` |
| body-sm | 12px | 1.78 | — | `--text-body-sm` |
| body | 13px | 1.78 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Density:** thoải mái

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 25 | 25px | `--spacing-25` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 44 | 44px | `--spacing-44` |
| 50 | 50px | `--spacing-50` |
| 54 | 54px | `--spacing-54` |
| 55 | 55px | `--spacing-55` |
| 60 | 60px | `--spacing-60` |
| 123 | 123px | `--spacing-123` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px — góc sắc, không bo tròn trên ảnh hoặc content cards |
| images | 0px — ảnh full-bleed không làm mềm góc |
| inputs | 0px |
| buttons | 9999px — pill/button tròn hoàn hảo |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 80-120px
- **Element gap:** 10-16px

## Components

### Dark Cinematic Hero
**Vai trò:** Section mở đầu full-bleed — thiết lập mood thương hiệu qua nhiếp ảnh

Nền: #000000. Ảnh xe hơi phủ kín viewport edge-to-edge, không border, không radius. Label uppercase nhỏ (Racing) ở ~11px, #ffffff, letter-spacing 0.091em, đặt phía trên headline. Display headline (SCUDERIA FERRARI) ở ~32-42px, weight 400, #ffffff, all caps, letter-spacing ~0.05em, căn giữa. Bên dưới headline: ghost text link với nút mũi tên tròn. Không padding — nội dung nằm trên ảnh, không có container hay surface treatment.

### Navigation Bar
**Vai trò:** Navigation chính của site

Nền: #181818. Chiều cao ~60px. Logo ngựa chồm Ferrari ở ngoài cùng bên trái. Nav items: RACING, SPORTS CARS, COLECCIONES, EXPERIENCIAS, ABOUT US — tất cả ở ~11px, weight 400, #ffffff, uppercase, letter-spacing 0.091em, khoảng cách rộng giữa các item. Không dropdown, không background, không border — text nổi trên thanh tối.

### Circular Arrow CTA
**Vai trò:** Nút call-to-action chính và phụ

Border: 1px solid #ffffff, tròn hoàn toàn (border-radius: 9999px). Đường kính ~40px. Chứa icon mũi tên mảnh hướng phải ở giữa. Không background fill — kiểu ghost/outlined. Đi kèm với uppercase text link (DESCUBRIR, LEER MÁS) ở #ffffff hoặc #000000, ~11px, letter-spacing 0.091em, đặt bên trái vòng tròn. Text và vòng tròn căn chỉnh theo chiều ngang, baseline-matched.

### Light Content Section
**Vai trờ:** Khối nội dung bài viết hoặc tin tức trên canvas trắng

Nền: #ffffff. Layout chia đôi: cột trái ~45% chứa text, cột phải ~55% chứa ảnh. Heading all caps, weight 400, ~24-32px, #000000, letter-spacing tight. Body text ở ~13px, weight 400, #181818, line-height rộng 2.0. Ảnh bên phải: edge-to-edge, không radius, không border, không shadow. Căn giữa theo chiều dọc giữa text và ảnh. Section padding: ~80-100px trên và dưới.

### Text-Only Ghost Link
**Vai trò:** Navigation phụ hoặc inline action

Không background, không border, không underline. Uppercase text ở ~11-12px, #000000 hoặc #181818, letter-spacing 0.083-0.091em. Có thể đi kèm với circular arrow CTA. Dùng cho các hành động VER TODAS LAS NOTICIAS, LEER MÁS, DESCUBRIR.

### Carousel Pagination Dots
**Vai trò:** Chỉ báo vị trí slide

Hàng ngang các chấm tròn nhỏ (~8px đường kính). Chấm active: filled #d40000 hoặc #000000 (màu đỏ Ferrari có thể xuất hiện ở đây như ngoại lệ màu sắc duy nhất). Chấm inactive: hollow hoặc low-opacity #8f8f8f. Các chấm cách nhau ~10px, căn giữa bên dưới nội dung. Không số, không progress bar.

### Full-Bleed Editorial Image
**Vai trò:** Trưng bày nội dung nhiếp ảnh

Đặt edge-to-edge với 0px border-radius. Không shadow, không border, không caption overlay. Ảnh luôn tối, có bầu không khí, và độ tương phản cao — được chụp trong studio hoặc môi trường điện ảnh. Ảnh chính là bề mặt; giao diện không cung cấp khung.

### Two-Column Split Section
**Vai trò:** Layout nội dung tiêu chuẩn ghép text và ảnh

Chia 50/50 hoặc 45/55. Bên trái: khối text với headline + body + CTA, bên phải: ảnh. Gutter rộng ~40-60px giữa các cột. Trên mobile, xếp chồng theo chiều dọc với ảnh bên dưới text. Không thay đổi màu nền giữa các section — dòng chảy seamless trắng sang trắng, nhịp điệu được tạo ra chỉ bằng spacing.

### Footer Navigation Block
**Vai trò:** Link toàn site và thông tin pháp lý

Nền: #181818 hoặc #000000. Link text ở ~9-11px, #ffffff hoặc #8f8f8f, uppercase, letter-spacing rộng 0.091em. Link được sắp xếp theo cột hoặc nhóm ngang. Hairline 1px border-top ở #303030 để phân cách với nội dung. Social/legal text ở scale caption 9px.

### Slide Navigation Arrows
**Vai trò:** Điều khiển trái/phải carousel

Chevron arrows tối giản (‹ ›) đặt ở giữa chiều dọc trên cạnh trái và phải của vùng carousel. Không background, không hình dạng nút. Màu: #000000 trên section sáng, #ffffff trên section tối. Kích thước ~20px, stroke mảnh. Vô hình cho đến khi hover.

## Do's and Don'ts

### Do
- Chỉ dùng màu achromatic — đen, trắng và xám — trên toàn bộ giao diện. Để nhiếp ảnh cung cấp toàn bộ năng lượng màu sắc.
- Đặt tất cả navigation, label và headline ở dạng ALL CAPS với letter-spacing từ 0.083em đến 0.091em — tracking rộng này là signature chính của hệ thống.
- Chỉ dùng một typeface ở weight 400. Tạo hierarchy thông qua kích thước và tracking, không bao giờ dùng weight contrast bold/light.
- Dùng nút mũi tên outlined tròn (9999px radius) cho tất cả CTA — vòng tròn border 1px với icon mũi tên mảnh bên trong, không bao giờ dùng hình chữ nhật filled.
- Để ảnh tràn ra mép với 0px border-radius. Không frame, không shadow, không bo góc trên ảnh.
- Duy trì vertical rhythm rộng rãi: 80-120px giữa các section, 10-16px giữa các element liên quan, 15-20px horizontal padding trong khối text.
- Dùng #000000 cho dark stage full-bleed và #181818 cho lớp bề mặt tối lùi một bậc — tạo chiều sâu qua grayscale, không qua shadow.

### Don't
- Không bao giờ đưa màu UI chromatic — không nút đỏ, không link xanh, không badge màu. Hệ thống cố tình 0% màu sắc.
- Không bao giờ dùng weight bold hoặc semibold. Weight 400 là weight duy nhất trong hệ thống; hierarchy đến từ kích thước.
- Không bao giờ thêm border-radius vào ảnh, card hoặc bề mặt nội dung. Tất cả cạnh đều là góc sắc 0px.
- Không bao giờ dùng nút hình chữ nhật filled. Tất cả CTA đều là ghost circular arrow buttons hoặc plain text links.
- Không bao giờ thêm drop shadows hoặc box-shadows. Chiều sâu được truyền tải qua grayscale layering, không bao giờ dùng hiệu ứng elevation.
- Không bao giờ dùng gradient trang trí. Hệ thống flat — không chuyển màu, không glow, không hiệu ứng blur.
- Không bao giờ làm layout chật chội. Tín hiệu xa xỉ của Ferrari là khoảng thở — nếu một section cảm thấy dày đặc, hãy thêm 30% không gian.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Canvas White | `#ffffff` | Nền trang chủ đạo cho content sections |
| 1 | Pure Black Stage | `#000000` | Hero và feature section cinematic full-bleed — ảnh xe hơi sống ở đây |
| 2 | Carbon Surface | `#181818` | Navigation bar, dark cards, chiều sâu footer |
| 3 | Graphite Surface | `#303030` | Element tối nâng cao, cấu trúc tinh tế trong dark sections |

## Elevation

Hệ thống cố tình tránh hoàn toàn drop shadows và box-shadows. Chiều sâu được truyền tải qua grayscale surface layering: #000000 (sâu nhất) → #181818 (bề mặt tối) → #303030 (tối nâng cao) → #ffffff (canvas sáng). Cách tiếp cận flat này giữ toàn bộ sự chú ý vào nhiếp ảnh và củng cố cảm giác gallery editorial — shadow sẽ có vẻ trang trí hơn là cấu trúc trong hệ thống này.

## Imagery

Nhiếp ảnh là toàn bộ thương hiệu thị giác. Ảnh luôn tối, độ tương phản cao, cinematic — xe được chụp trong studio, đường hầm, đường đua và môi trường có bầu không khí với ánh sáng kịch tính. Treatment: full-bleed, edge-to-edge, 0px border-radius, không frame, không overlay, không duotone. Không có ảnh lifestyle hoặc con người chiếm ưu thế — chiếc xe LÀ chủ thể. Không có illustration, không icon ngoài mũi tên navigation stroke mảnh tối thiểu, không 3D render, không product mockup. Ảnh mang 80%+ trọng lượng thị giác trên hầu hết các trang; text là thứ yếu, hỗ trợ bức ảnh thay vì cạnh tranh với nó.

## Layout

Mô hình trang full-bleed không có max-width container hiển thị trên hero sections — chúng trải dài edge-to-edge. Content sections dùng max-width ~1280px căn giữa. Màn hình đầu tiên luôn là dark cinematic hero: ảnh xe hơi full-viewport với label nhỏ căn giữa → headline all-caps lớn → ghost arrow CTA. Các section tiếp theo xen kẽ: khối nội dung trắng với split text-trái/image-phải theo tỷ lệ 45/55, cách nhau bằng khoảng trống dọc rộng 80-120px. Carousel dùng full width với chevron arrows đặt ở mép và dot pagination căn giữa. Navigation là một thanh tối duy nhất (60px) với logo ngựa chồm bên trái và uppercase text links trải rộng. Nhịp điệu cố tình chậm và editorial — hai hoặc ba section mỗi scroll, không bao giờ dày đặc thông tin.

## Agent Prompt Guide

## Quick Color Reference
- Text: #000000 trên section sáng, #ffffff trên section tối
- Background: #ffffff (section sáng), #000000 (hero tối), #181818 (bề mặt tối)
- Border: #303030 trên tối, #000000 trên sáng
- Muted text/icons: #8f8f8f
- Accent: không — hệ thống hoàn toàn achromatic
- primary action: không có màu CTA riêng biệt

## 3-5 Example Component Prompts

1. **Dark Hero Section**: Nền #000000 full-bleed với ảnh xe hơi độ tương phản cao phủ kín viewport. Label uppercase nhỏ 'Racing' ở 11px, weight 400, #ffffff, letter-spacing 1px. Display headline 'SCUDERIA FERRARI' ở 42px, weight 400, #ffffff, all caps, letter-spacing 2px, căn giữa. Bên dưới: ghost text link 'DESCUBRIR' ở 11px, #ffffff, letter-spacing 1px, đi kèm với nút outlined tròn 40px (1px solid #ffffff, border-radius 9999px) chứa icon mũi tên phải.

2. **Navigation Bar**: Chiều cao 60px, nền #181818. Logo ngựa chồm Ferrari ở 24px ngoài cùng bên trái. Nav items (RACING, SPORTS CARS, COLECCIONES) ở 11px, weight 400, #ffffff, all caps, letter-spacing 1px, cách nhau 30px. Không background, không border, không dropdown.

3. **News Content Block**: Nền trắng (#ffffff), max-width 1280px căn giữa. Hai cột chia: trái 45% text, phải 55% ảnh. Heading 'FERRARI AT IMOLA' ở 28px, weight 400, #000000, all caps, letter-spacing 1.5px. Body text ở 13px, weight 400, #181818, line-height 2.0. Cột phải: ảnh tối full-bleed, 0px border-radius, không border hoặc shadow. Bên dưới text: ghost link 'LEER MÁS' ở 11px với nút mũi tên tròn 36px (1px solid #000000).

4. **Carousel Pagination**: Ba chấm nhỏ (8px đường kính) căn giữa theo chiều ngang. Chấm active: filled #000000. Chấm inactive: fill #8f8f8f. Khoảng cách 10px giữa các chấm. Không số, không progress bar.

5. **Footer Block**: Nền #181818, full-width. Link trong cột ở 9px, weight 400, #ffffff, all caps, letter-spacing 0.8px. Border-top 1px ở #303030. Icon social dạng line icon stroke mảnh ở #8f8f8f.

## Similar Brands

- **Aston Martin** — Cùng cách tiếp cận website xe hơi xa xỉ editorial — hero cinematic tối full-bleed, navigation all-caps, control outlined ghost, UI đơn sắc để ảnh xe hơi chiếm ưu thế
- **Porsche** — Cùng ngôn ngữ giao diện monochrome tối giản với khoảng trắng rộng rãi, uppercase tracked navigation và content blocks ưu tiên nhiếp ảnh
- **Lamborghini** — Cùng pattern hero tối + content section trắng, ảnh full-bleed góc sắc, bảng màu kiềm chế nhường chỗ cho màu sắc của chính chiếc xe
- **Bang & Olufsen** — Thương hiệu xa xỉ rút gọn giao diện xuống chỉ còn đen và trắng thuần túy, không có điểm nhấn màu sắc, dùng ảnh sản phẩm làm nguồn màu thị giác duy nhất

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pure-white: #ffffff;
  --color-pure-black: #000000;
  --color-carbon-black: #181818;
  --color-graphite: #303030;
  --color-steel-gray: #8f8f8f;

  /* Typography — Font Families */
  --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.78;
  --text-body-sm: 12px;
  --leading-body-sm: 1.78;
  --text-body: 13px;
  --leading-body: 1.78;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-44: 44px;
  --spacing-50: 50px;
  --spacing-54: 54px;
  --spacing-55: 55px;
  --spacing-60: 60px;
  --spacing-123: 123px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80-120px;
  --element-gap: 10-16px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px — góc sắc, không bo tròn trên ảnh hoặc content cards;
  --radius-images: 0px — ảnh full-bleed không làm mềm góc;
  --radius-inputs: 0px;
  --radius-buttons: 9999px — pill/button tròn hoàn hảo;

  /* Surfaces */
  --surface-canvas-white: #ffffff;
  --surface-pure-black-stage: #000000;
  --surface-carbon-surface: #181818;
  --surface-graphite-surface: #303030;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pure-white: #ffffff;
  --color-pure-black: #000000;
  --color-carbon-black: #181818;
  --color-graphite: #303030;
  --color-steel-gray: #8f8f8f;

  /* Typography */
  --font-body-font: 'Body-Font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ferrari-custom-sans-serif: 'Ferrari custom sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.78;
  --text-body-sm: 12px;
  --leading-body-sm: 1.78;
  --text-body: 13px;
  --leading-body: 1.78;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-25: 25px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-44: 44px;
  --spacing-50: 50px;
  --spacing-54: 54px;
  --spacing-55: 55px;
  --spacing-60: 60px;
  --spacing-123: 123px;
}
```