# Mercury

> Mercury — Style Reference

## Prompt Content

```
# Mercury — Style Reference
> Mountain Top Command Center

**Theme:** dark

Thiết kế mang cảm giác của một trung tâm chỉ huy lúc hoàng hôn, vừa rộng lớn vừa tập trung. Bảng màu trung tính tối gần như đen (#1e1e2a, #171721) tạo nên một canvas điện ảnh sống động, nơi dòng chữ trắng nhẹ (#ededf3) mang lại độ rõ nét sắc sảo. Mọi năng lượng đều được dồn vào một điểm nhấn xanh tím duy nhất (#5266eb), được dành riêng cho các call-to-action chính, giống như đèn báo hiệu trên bảng điều khiển công nghệ cao. Typography là yếu tố định hình chính, với các custom font được sử dụng ở weight nhẹ cho headline, tạo nên giọng điệu vừa có thẩm quyền vừa dễ tiếp cận. Sự tương phản giữa hình ảnh hero rộng lớn, đầy không khí và giao diện text-driven bên dưới tạo ra một hành trình từ khát vọng đến hành động.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Mercury Blue | `#5266eb` | `--color-mercury-blue` | Nút CTA chính — điểm nhấn sống động duy nhất trong bảng màu trung tính, tập trung hành động của người dùng. |
| Ghost Blue | `#cdddff` | `--color-ghost-blue` | Nền nút phụ, hover states — màu xanh nhạt, hư ảo gợi ý tương tác. |
| Deep Space | `#171721` | `--color-deep-space` | Lớp nền trang ngoài cùng, tạo chiều sâu. |
| Midnight Slate | `#1e1e2a` | `--color-midnight-slate` | Nền chính của trang và các section. |
| Graphite | `#272735` | `--color-graphite` | Nền nút tinh tế và các bề mặt tương tác. |
| Lead | `#70707d` | `--color-lead` | Border, divider, điểm nhấn UI tinh tế. |
| Starlight | `#ededf3` | `--color-starlight` | Màu chữ chính cho headline, body text và navigation. |
| Silver | `#c3c3cc` | `--color-silver` | Chữ phụ, footer copy, disabled states. |
| Pure White | `#ffffff` | `--color-pure-white` | Chữ trên nút CTA chính (#5266eb). |

## Tokens — Typography

### arcadiaDisplay — Tất cả headline chính. Sử dụng weight 360 nhẹ ở kích thước lớn là lựa chọn đặc trưng, tạo uy quyền thông qua sự kiềm chế, không phải cường độ. · `--font-arcadiadisplay`
- **Font thay thế:** Inter, Manrope
- **Weights:** 360, 480, 530
- **Kích thước:** 21px, 24px, 28px, 32px, 42px, 49px, 65px
- **Line height:** 1.10-1.20
- **Letter spacing:** Tracking dương nhẹ (0.01-0.02em) để tạo cảm giác thoáng.
- **OpenType features:** `"ss01" on`
- **Vai trò:** Tất cả headline chính. Sử dụng weight 360 nhẹ ở kích thước lớn là lựa chọn đặc trưng, tạo uy quyền thông qua sự kiềm chế, không phải cường độ.

### arcadia — Body copy, UI labels, navigation, legal text và heading nhỏ hơn. Font chủ lực cho mọi nội dung và văn bản giao diện. · `--font-arcadia`
- **Font thay thế:** Inter, Manrope
- **Weights:** 360, 400, 420, 480
- **Kích thước:** 12px, 14px, 16px, 18px, 21px
- **Line height:** 1.20-1.50
- **Letter spacing:** Tracking dương nhẹ (0.005-0.02em) để dễ đọc.
- **OpenType features:** `"ss01" on`
- **Vai trò:** Body copy, UI labels, navigation, legal text và heading nhỏ hơn. Font chủ lực cho mọi nội dung và văn bản giao diện.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.24px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.28px | `--text-body-sm` |
| body | 16px | 1.5 | 0.16px | `--text-body` |
| subheading | 18px | 1.4 | — | `--text-subheading` |
| heading-sm | 21px | 1.35 | — | `--text-heading-sm` |
| heading | 32px | 1.2 | — | `--text-heading` |
| heading-lg | 49px | 1.15 | — | `--text-heading-lg` |
| display | 65px | 1.1 | 0.65px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** spacious

### Spacing Scale

| 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` |
| 56 | 56px | `--spacing-56` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 112 | 112px | `--spacing-112` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 0px |
| inputs | 32px |
| buttons | 32px, 40px |
| containers | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80-120px
- **Element gap:** 12-32px

## Components

### Primary Pill Button
**Vai trò:** Call-to-action chính trên trang.

Nền solid 'Mercury Blue' (#5266eb) với chữ 'Pure White' (#ffffff). Bo tròn hoàn toàn với radius 32px. Padding khoảng 16px dọc và 24px ngang. Sử dụng font 'arcadia'.

### Header Pill Button
**Vai trò:** Call-to-action phụ trong thanh navigation.

Nền trong suốt 'Ghost Blue' (#cdddff ở ~20%) với chữ 'Starlight' (#ededf3). Bo tròn hoàn toàn với radius 40px. Padding 8px 20px. Sử dụng font 'arcadia'.

### Ghost Nav Link
**Vai trò:** Các mục navigation và link không phải chính trong header.

Nền trong suốt với chữ 'Starlight' (#ededf3). Không có border nhìn thấy được. Vùng hit area rộng nhờ padding, về mặt thị giác chỉ hiển thị dưới dạng text. Sử dụng font 'arcadia'.

### Hero Email Input
**Vai trò:** Trường nhập email trong hero section.

Nền trong suốt với chữ và placeholder màu 'Starlight' (#ededf3). Phía trái bo tròn hoàn toàn (radius 32px), phía phải vuông (radius 0px) để ghép với nút. Một border mỏng màu 'Lead' (#70707d) được ngụ ý để định hình.

### Interactive Feature Link
**Vai trò:** Các mục có thể chọn trong danh sách tính năng.

Nền trong suốt với chữ 'Starlight' (#ededf3). Border dưới 1px màu 'Lead' (#70707d) để phân cách các mục. Không có radius. Sử dụng 'arcadiaDisplay' cho tiêu đề.

### Footer Link
**Vai trò:** Link cấp ba trong footer trang.

Nền trong suốt với chữ 'Silver' (#c3c3cc). Màu chữ nhạt hơn cho thấy mức độ ưu tiên thấp hơn. Sử dụng font 'arcadia'.

## Do's and Don'ts

### Nên làm
- Sử dụng 'arcadiaDisplay' ở weight nhẹ (360) cho tất cả headline chính để duy trì giọng điệu thanh thoát, tinh tế.
- Dành riêng điểm nhấn 'Mercury Blue' (#5266eb) cho các CTA chính, hướng đến hành động.
- Sử dụng bảng màu trung tính tối (#171721, #1e1e2a) cho mọi nền để tạo môi trường tập trung, sống động.
- Tận dụng corner radius cực lớn (32px, 40px) cho tất cả nút chính và phụ, tạo hình dạng 'pill' đặc trưng.
- Duy trì độ tương phản cao với chữ 'Starlight' (#ededf3) trên nền tối cho mọi nội dung chính.
- Sử dụng khoảng cách dọc rộng rãi (80px+) giữa các section nội dung.
- Phân biệt các mục danh sách tương tác bằng border dưới 1px màu 'Lead' (#70707d).

### Không nên làm
- Không sử dụng 'Mercury Blue' (#5266eb) cho chữ, nền hoặc các yếu tố trang trí.
- Không sử dụng font weight nặng (>530) cho bất kỳ typography nào.
- Không áp dụng shadow để tạo độ cao. Thay vào đó, sử dụng sự thay đổi màu sắc và độ mờ.
- Không thêm màu bão hòa mới. Bảng màu là đơn sắc cộng với một điểm nhấn xanh.
- Không sử dụng corner radius nhỏ cho nút. Chúng luôn phải là pill.
- Không sử dụng 'Pure White' (#ffffff) cho body text; dành nó cho chữ trên nút CTA xanh chính.
- Không tạo layout dày đặc, lộn xộn. Ưu tiên khoảng thở.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Abyss | `#171721` | Lớp nền trang ngoài cùng. |
| 1 | Surface | `#1e1e2a` | Nền section nội dung chính. |
| 2 | Interactive | `#272735` | Hover states hoặc các yếu tố tương tác có chứa nội dung. |

## Elevation

Elevation đạt được thông qua ánh sáng và màu sắc, không phải shadow. Các yếu tố tương tác sáng lên hoặc áp dụng màu accent thương hiệu khi hover hoặc focus, trông như thể 'phát sáng' từ bên trong giao diện tối. Các bề mặt phân lớp được phân biệt bằng sự thay đổi tinh tế trong bảng màu xám trung tính (ví dụ: Midnight Slate #1e1e2a trên Deep Space #171721).

## Imagery

Ngôn ngữ thị giác được phân đôi. Nó mở đầu bằng một bức ảnh full-bleed, đầy không khí về một chiếc bàn đơn độc trong cảnh quan thiên nhiên rộng lớn, thiết lập tâm trạng của tham vọng vô biên và sự tập trung tĩnh lặng. Hình ảnh này thuần túy mang tính không khí, không tập trung vào sản phẩm. Ngoài hero, trang web hoàn toàn text-dominant, không có thêm ảnh chụp hoặc minh họa. Sự tương phản này đặt 'vibe' của thương hiệu lên hàng đầu, sau đó chuyển sang trải nghiệm thuần chức năng, tập trung vào thông tin.

## Layout

Layout sử dụng hero full-bleed chiếm toàn bộ viewport, với headline và CTA căn giữa trên ảnh nền. Bên dưới hero, trang chuyển sang layout căn giữa max-width (khoảng 1200px) trên nền tối. Nội dung được tổ chức theo các cột đơn giản, một cột duy nhất với khoảng cách dọc rộng rãi, tạo luồng đọc tuyến tính, yên tĩnh. Navigation là thanh trên cùng tối giản, bán trong suốt và có thể trở nên sticky. Cấu trúc tổng thể rộng rãi và không bị lộn xộn.

## Agent Prompt Guide

### Quick Color Reference
- **Nền trang:** Midnight Slate (#1e1e2a)
- **Chữ chính:** Starlight (#ededf3)
- **Chữ phụ:** Silver (#c3c3cc)
- **CTA chính:** Mercury Blue (#5266eb)
- **Border/Divider:** Lead (#70707d)

### Example Component Prompts
1. `Tạo một hero section với ảnh nền full-bleed không khí về núi non. Căn giữa một display headline: 65px arcadiaDisplay weight 360, màu Starlight (#ededf3). Bên dưới, thêm sub-headline: 21px arcadia weight 400, màu Starlight. Cuối cùng, thêm một nhóm nút CTA: một email input với radius trái 32px ghép với một primary pill button radius 32px.`

2. `Xây dựng một primary action button với chữ 'Open account'. Nút có nền 'Mercury Blue' (#5266eb), chữ 'Pure White' (#ffffff), corner radius 32px, padding 16px 24px. Font là 16px arcadia weight 480.`

3. `Thiết kế một feature list section trên nền 'Midnight Slate' (#1e1e2a). Mỗi mục là một link với heading text 28px arcadiaDisplay weight 480 màu 'Starlight' (#ededf3), border dưới solid 1px màu 'Lead' (#70707d) với padding dưới 24px.`

## Similar Brands

- **Linear** — Cùng thẩm mỹ dark-mode sâu, typography chính xác và sử dụng một màu accent mạnh duy nhất cho CTA.
- **Stripe** — Giao diện dark UI chuyên nghiệp, tập trung vào công nghệ với màu accent riêng biệt và custom typography chất lượng cao.
- **Ramp** — Một thương hiệu fintech khác với theme tối tinh tế, typography sạch sẽ và chiến lược một màu accent duy nhất.
- **Vercel** — Cũng sử dụng nền đen sâu với chữ sáng, sắc nét và tập trung vào độ chính xác hình học trong UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-mercury-blue: #5266eb;
  --color-ghost-blue: #cdddff;
  --color-deep-space: #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite: #272735;
  --color-lead: #70707d;
  --color-starlight: #ededf3;
  --color-silver: #c3c3cc;
  --color-pure-white: #ffffff;

  /* Typography — Font Families */
  --font-arcadiadisplay: 'arcadiaDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arcadia: 'arcadia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.35;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-heading-lg: 49px;
  --leading-heading-lg: 1.15;
  --text-display: 65px;
  --leading-display: 1.1;
  --tracking-display: 0.65px;

  /* Typography — Weights */
  --font-weight-w360: 360;
  --font-weight-regular: 400;
  --font-weight-w420: 420;
  --font-weight-w480: 480;
  --font-weight-w530: 530;

  /* 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-56: 56px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80-120px;
  --element-gap: 12-32px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-inputs: 32px;
  --radius-buttons: 32px, 40px;
  --radius-containers: 4px;

  /* Surfaces */
  --surface-abyss: #171721;
  --surface-surface: #1e1e2a;
  --surface-interactive: #272735;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-mercury-blue: #5266eb;
  --color-ghost-blue: #cdddff;
  --color-deep-space: #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite: #272735;
  --color-lead: #70707d;
  --color-starlight: #ededf3;
  --color-silver: #c3c3cc;
  --color-pure-white: #ffffff;

  /* Typography */
  --font-arcadiadisplay: 'arcadiaDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arcadia: 'arcadia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.28px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.35;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --text-heading-lg: 49px;
  --leading-heading-lg: 1.15;
  --text-display: 65px;
  --leading-display: 1.1;
  --tracking-display: 0.65px;

  /* 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-56: 56px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-112: 112px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
}
```