# Tesla

> # Tesla — Style Reference

## Prompt Content

```
# Tesla — Style Reference
> Automotive Showroom trên màn hình. Visual sản phẩm độ phân giải cao chiếm ưu thế, được đóng khung bởi giao diện tối giản, chức năng — không làm lu mờ nội dung chính.

**Theme:** light

Thiết kế vận hành như một showroom ô tô cao cấp được chuyển thể lên màn hình. Mỗi section là một bức ảnh sản phẩm điện ảnh full-bleed, với các UI element đóng vai trò như những tấm biển chức năng tối giản. Bảng màu hoàn toàn không màu (achromatic), ngoại trừ một màu Tesla Blue (#3e6ae1) điện tử duy nhất — chỉ dành riêng cho các primary call-to-action, hoạt động như một nút khởi động. Typography mang tính trung tính và kỹ thuật, truyền tải thông tin mà không khẳng định cá tính riêng. Sự phụ thuộc có hệ thống của UI vào hình ảnh đảm bảo sản phẩm — chiếc xe, tấm pin mặt trời — luôn là hero không bị gián đoạn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Tesla Blue | `#3e6ae1` | `--color-tesla-blue` | Primary CTA ('Order Now') — một điểm màu bão hòa duy nhất, tập trung trong môi trường grayscale, tạo ra lời kêu gọi hành động không thể bỏ qua. |
| Pure White | `#ffffff` | `--color-pure-white` | Nền trang chính, bề mặt card, chữ trên nền tối/nút xanh. |
| Off-White | `#eeeeee` | `--color-off-white` | Card nội dung phụ, đường phân cách nhẹ giữa các section trắng. |
| Parchment | `#e5e3df` | `--color-parchment` | Màu nền thay thế hiếm khi dùng cho một số section cụ thể. |
| Light Border | `#cccccc` | `--color-light-border` | Viền UI element không hoạt động, đường phân cách nhẹ. |
| Subtle Gray | `#8e8e8` | `--color-subtle-gray` | Placeholder text, chi tiết UI cấp ba. |
| Steel | `#5c5e62` | `--color-steel` | Secondary text, footer links, icon fills. |
| Charcoal | `#393c41` | `--color-charcoal` | Primary body text, chữ trên nút sáng, header navigation. |
| Onyx | `#171a20` | `--color-onyx` | Primary heading text, nền nút tối. |
| Carbon | `#000000` | `--color-carbon` | SVG icon fills, text overlay trên ảnh sáng. |

## Tokens — Typography

### Universal Sans Display — Dùng cho tất cả heading chính và product title. Dạng hình học sạch sẽ, mang lại giọng nói kỹ thuật và tự tin — cảm giác như được thiết kế (engineered), không phải trang trí. · `--font-universal-sans-display`
- **Thay thế:** Inter, Manrope
- **Weights:** 400, 500
- **Kích thước:** 12px, 20px, 28px, 34px, 40px, 48px
- **Line height:** 1.17-1.41
- **Vai trò:** Dùng cho tất cả heading chính và product title. Dạng hình học sạch sẽ, mang lại giọng nói kỹ thuật và tự tin — cảm giác như được thiết kế (engineered), không phải trang trí.

### Universal Sans Text — Font chủ lực cho body copy, button, navigation và tất cả UI text. Được chọn vì khả năng đọc siêu tốt và tính trung tính, truyền tải thông tin hiệu quả mà không làm xao nhãng khỏi visual sản phẩm. · `--font-universal-sans-text`
- **Thay thế:** Inter, SF Pro Text
- **Weights:** 400, 500
- **Kích thước:** 12px, 14px, 17px
- **Line height:** 1.00-1.67
- **Vai trò:** Font chủ lực cho body copy, button, navigation và tất cả UI text. Được chọn vì khả năng đọc siêu tốt và tính trung tính, truyền tải thông tin hiệu quả mà không làm xao nhãng khỏi visual sản phẩm.

### Roboto — Dành riêng cho fine print, legal disclaimer và các text có hierarchy thấp khác — nơi tính tiện dụng là mối quan tâm duy nhất. · `--font-roboto`
- **Thay thế:** Roboto, system-ui
- **Weights:** 400, 500
- **Kích thước:** 11px
- **Line height:** 1.20
- **Vai trò:** Dành riêng cho fine print, legal disclaimer và các text có hierarchy thấp khác — nơi tính tiện dụng là mối quan tâm duy nhất.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.2 | — | `--text-caption` |
| body | 14px | 1.43 | — | `--text-body` |
| heading-sm | 20px | 1.4 | — | `--text-heading-sm` |
| heading | 28px | 1.29 | — | `--text-heading` |
| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |
| display | 48px | 1.17 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 8px |
| inputs | 4px |
| modals | 8px |
| buttons | 4px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| sm | `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px` | `--shadow-sm` |
| subtle | `rgb(255, 255, 255) 0px 2px 0px -1px` | `--shadow-subtle` |

### Layout

- **Card padding:** 24px
- **Element gap:** 8-16px

## Components

### Primary CTA Button
**Vai trò:** Nút hành động chính để đặt hàng hoặc tương tác.

Nền Tesla Blue (#3e6ae1) đặc với chữ Pure White (#ffffff). Border-radius 4px. Padding 4px trên/dưới, 24px trái/phải.

### Secondary Ghost Button
**Vai trò:** Hành động phụ như 'Learn More' hoặc 'Demo'.

Nền trong suốt với viền Onyx (#171a20) mỏng. Chữ cũng là Onyx (#171a20). Border-radius 4px. Padding 4px trên/dưới, 16px trái/phải.

### Modal Button (White)
**Vai trò:** Tùy chọn phụ trong modal hoặc pop-up.

Nền Off-White (#eeeeee) đặc với chữ Charcoal (#393c41). Border-radius 4px. Padding 4px trên/dưới, 24px trái/phải.

### Header Navigation Link
**Vai trò:** Navigation chính của site.

Text link không style với màu Charcoal (#393c41). Không nền hoặc viền.

### Footer Navigation Link
**Vai trò:** Link cấp ba trong footer của site.

Text link không style với màu Steel (#5c5e62). Xuất hiện nhỏ hơn header navigation.

### Product Hero Section
**Vai trò:** Container toàn màn hình trưng bày một sản phẩm duy nhất.

Ảnh nền full-bleed. Chứa một nhóm xếp chồng, căn giữa gồm Display heading (Onyx #171a20 hoặc White #ffffff tùy ảnh), Subheading text và một cặp Primary/Secondary CTA button.

## Do's and Don'ts

### Do
- Luôn mở đầu bằng ảnh sản phẩm chất lượng cao, full-bleed cho mọi section chính.
- Căn giữa text và CTA trên ảnh nền.
- Chỉ dùng Tesla Blue (#3e6ae1) cho các hành động primary, ưu tiên cao như 'Order Now'.
- Kết hợp primary CTA dạng đặc với secondary CTA dạng ghost hoặc trắng.
- Duy trì bảng màu achromatic nghiêm ngặt (trắng, xám, đen) cho tất cả UI ngoài primary CTA.
- Dùng base unit 4px cho mọi padding, margin và radii (ví dụ: 4px, 8px, 16px, 24px).
- Giữ UI chrome, như header và footer, tối giản về mặt thị giác và không phô trương.

### Don't
- Không dùng Tesla Blue (#3e6ae1) cho text, headline hoặc element trang trí.
- Không đưa bất kỳ màu bão hòa nào khác vào bảng màu UI.
- Không dùng component phức tạp; ưu tiên layout text và button xếp chồng đơn giản.
- Không dùng shadow lớn, gradient hoặc hiệu ứng thị giác nặng trên UI element.
- Không tạo layout nơi text lấn át hình ảnh.
- Không dùng border-radius lớn hơn 8px.
- Không dùng serif hoặc expressive display font; duy trì giọng nói typographic trung tính, kỹ thuật.

## Imagery

Ngôn ngữ thị giác được định nghĩa bởi ảnh sản phẩm điện ảnh, độ phân giải cao. Mọi ảnh đều được xử lý như hero shot, thường là full-bleed, chiếm toàn bộ viewport. Phong cách chụp ảnh sắc nét, sạch sẽ và thường mang tính khát vọng, cho thấy sản phẩm trong bối cảnh lý tưởng (xe trên đường mở, tấm pin mặt trời trên ngôi nhà hiện đại). Color grading tự nhiên và sống động để sản phẩm nổi bật trên nền UI trung tính. Mật độ là image-dominant; text và UI chỉ tồn tại để hỗ trợ câu chuyện thị giác do ảnh thiết lập.

## Layout

Cấu trúc trang là một chuỗi dọc các khối nội dung toàn màn hình, edge-to-edge, tạo ra trải nghiệm 'scrolling presentation'. Mẫu chủ đạo là một stack căn giữa: headline lớn, subtext hỗ trợ và action button được overlay trực tiếp lên ảnh nền full-bleed. Không có page container hiển thị; browser viewport là khung. Navigation được giới hạn trong một thanh header mỏng, không sticky ở trên cùng, giữ tối đa không gian màn hình cho visual sản phẩm. Chuyển tiếp giữa các section liền mạch, không có khoảng trống hoặc đường phân cách hiển thị.

## Agent Prompt Guide

### Quick Color Reference
- **Text (Heading):** `#171a20` (Onyx)
- **Text (Body):** `#393c41` (Charcoal)
- **Background:** `#ffffff` (Pure White)
- **CTA (Primary):** `#3e6ae1` (Tesla Blue)
- **CTA (Secondary):** Trong suốt với viền `#171a20` (Onyx)
- **Card Background:** `#eeeeee` (Off-White)

### Example Component Prompts
1.  **Product Hero Section:** "Tạo một hero section toàn màn hình với ảnh độ phân giải cao của một chiếc xe trên đường sa mạc. Overlay một headline căn giữa 'Model Y' dùng Universal Sans Display cỡ 40px, weight 500, màu #171a20. Bên dưới, thêm subheading 'Lease From $459/mo' bằng Universal Sans Text cỡ 17px, weight 400, màu #393c41. Thêm hai button bên dưới với gap 16px: một primary button với text 'Order Now', nền #3e6ae1, màu chữ #ffffff, radius 4px, padding 4px 24px; và một secondary ghost button với text 'Learn More', nền trong suốt, viền #171a20, màu chữ #171a20, radius 4px, padding 4px 24px."
2.  **Informational Card:** "Thiết kế một informational card với màu nền #eeeeee và border-radius 8px. Padding là 24px. Bên trong, đặt heading căn trái 'Current Offers' bằng Universal Sans Display cỡ 28px, weight 500, màu #171a20. Bên dưới, thêm body text dùng Universal Sans Text cỡ 14px, màu #393c41. Bên phải text, đặt một ảnh sản phẩm dạng vuông. Bên dưới text, thêm một secondary ghost button với text 'Learn More'."
3.  **Primary Button:** "Tạo một primary call-to-action button. Đặt nền là #3e6ae1, màu chữ là #ffffff. Font là Universal Sans Text, 14px, weight 500. Thêm border-radius 4px. Đặt padding 4px trên/dưới và 24px trái/phải."

## Similar Brands

- **Apple** — Cùng triết lý product-as-hero với ảnh full-bleed, UI tối giản và typography sans-serif sạch sẽ, kỹ thuật.
- **Rivian** — Đối thủ trực tiếp dùng layout full-screen, scroll-based storytelling tương tự với text căn giữa trên ảnh xe đầy khát vọng.
- **Sonos** — Chia sẻ cách dùng ảnh sản phẩm tinh khiết trên nền achromatic sạch sẽ với UI component tối giản, chức năng.
- **DJI** — Sử dụng thẩm mỹ cao cấp, công nghệ cao tương tự với visual sản phẩm điện ảnh và giao diện tối/sáng tối giản.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-tesla-blue: #3e6ae1;
  --color-pure-white: #ffffff;
  --color-off-white: #eeeeee;
  --color-parchment: #e5e3df;
  --color-light-border: #cccccc;
  --color-subtle-gray: #8e8e8;
  --color-steel: #5c5e62;
  --color-charcoal: #393c41;
  --color-onyx: #171a20;
  --color-carbon: #000000;

  /* Typography — Font Families */
  --font-universal-sans-display: 'Universal Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-universal-sans-text: 'Universal Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.43;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --text-heading: 28px;
  --leading-heading: 1.29;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --text-display: 48px;
  --leading-display: 1.17;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;

  /* Layout */
  --card-padding: 24px;
  --element-gap: 8-16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Named Radii */
  --radius-cards: 8px;
  --radius-inputs: 4px;
  --radius-modals: 8px;
  --radius-buttons: 4px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
  --shadow-subtle: rgb(255, 255, 255) 0px 2px 0px -1px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-tesla-blue: #3e6ae1;
  --color-pure-white: #ffffff;
  --color-off-white: #eeeeee;
  --color-parchment: #e5e3df;
  --color-light-border: #cccccc;
  --color-subtle-gray: #8e8e8;
  --color-steel: #5c5e62;
  --color-charcoal: #393c41;
  --color-onyx: #171a20;
  --color-carbon: #000000;

  /* Typography */
  --font-universal-sans-display: 'Universal Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-universal-sans-text: 'Universal Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.43;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;
  --text-heading: 28px;
  --leading-heading: 1.29;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --text-display: 48px;
  --leading-display: 1.17;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
  --shadow-subtle: rgb(255, 255, 255) 0px 2px 0px -1px;
}
```