# Arc

> Arc — Style Reference

## Prompt Content

```
# Arc — Style Reference
> Sân chơi editorial với đường cắt hình vỏ sò

**Theme:** light

Trang web của Arc mang phong cách một spread editorial ấm áp, được cắt bằng dao giấy thủ công: nền canvas màu kem vanilla, các đường viền hình vỏ sò (scalloped edges) lượn sóng giữa mỗi dải màu, và một mảng tím violet rực rỡ tràn ngập các khối lớn như một trang sách nhuộm màu. Headline serif (Marlin) kết hợp với UI sans-serif sạch sẽ (Inter) tạo ra sự căng thẳng giữa editorial và product, trong khi chính trình duyệt — chứ không phải ảnh chụp — mới là nhân vật chính, được thể hiện dưới dạng mockup tương tác lớn với sidebar spaces, thư mục và inline chat. Bảng màu chủ yếu là giấy và mực; màu violet mang bầu không khí hơn là màu tương tác, và các đường chia lượn sóng đảm nhận phần lớn công việc tạo cá tính mà shadow và gradient thường làm trên các trang web khác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|-----|---------|-------|---------|
| Electric Iris | `#3139fb` | `--color-electric-iris` | Nền section full-bleed, bầu không khí thương hiệu, sidebar chrome bên trong browser mockup — một màu violet bão hòa cao tràn ngập toàn bộ dải màu, khiến trang đọc như color blocking kiểu editorial, không phải trạng thái UI |
| Deep Violet | `#2702c2` | `--color-deep-violet` | Lớp accent tối hơn bên trong các section violet, trạng thái pressed hoặc active trong màu thương hiệu, heading phụ trên nền violet — làm sâu thêm iris mà không chuyển sắc |
| Oat | `#fffadd` | `--color-oat` | Canvas trang chính và nền gradient hero — màu kem ấm đọc như giấy chứ không phải màn hình trắng, bề mặt mặc định cho mọi thứ khác |
| Linen | `#fffcec` | `--color-linen` | Bề mặt ấm thứ cấp cho card, nền nav và footer — ấm hơn Oat nửa bước, dùng khi một lớp cần nổi lên khỏi canvas mà không chuyển sang trắng |
| Paper White | `#ffffff` | `--color-paper-white` | Màu trắng tinh cho nội thất browser mockup card, chữ trên nền tối và các đường gờ scalloped divider ngăn cách các dải màu |
| Obsidian | `#000000` | `--color-obsidian` | Màu trung tính tối hỗ trợ cho chữ, icon và độ tương phản mạnh. Không nâng cấp nó thành màu CTA chính |
| Granite | `#696969` | `--color-granite` | Body copy nhẹ nhàng, mô tả phụ và helper text — xám trung bình lùi lại trước Oat mà không biến mất |
| Olive Stone | `#595853` | `--color-olive-stone` | Chữ phụ tinh tế và xám ấm cho chữ nhỏ — hơi ngả olive để hài hòa với canvas kem thay vì đối chọi |

## Tokens — Typography

### Marlin Soft SQ — Biến thể mềm hơn của Marlin dùng cho nav, subheading và cỡ display phụ (28–40px) — các đầu tròn tạo cảm giác thân thiện khi đặt cạnh các đường cắt display sắc nét của Marlin · `--font-marlin-soft-sq`
- **Thay thế:** GT Sectra Soft, Söhne Soft, hoặc Inter Display
- **Weights:** 500, 700
- **Cỡ chữ:** 14px, 16px, 28px, 40px, 46px
- **Line height:** 0.93, 0.98, 1.07, 1.10, 1.20
- **Letter spacing:** -0.05em, -0.04em, -0.02em
- **Vai trò:** Biến thể mềm hơn của Marlin dùng cho nav, subheading và cỡ display phụ (28–40px) — các đầu tròn tạo cảm giác thân thiện khi đặt cạnh các đường cắt display sắc nét của Marlin

### Marlin — Serif display chính cho hero headline và editorial pull-quote cỡ lớn ở 46px; weight 400 cho body 16px — sự tương phản giữa body serif mảnh và display serif đậm là chữ ký typographic của trang · `--font-marlin`
- **Thay thế:** GT Sectra, Tiempos Headline, hoặc DM Serif Display
- **Weights:** 400, 700, 800
- **Cỡ chữ:** 16px, 46px
- **Line height:** 0.93, 1.20
- **Letter spacing:** -0.04em
- **Vai trò:** Serif display chính cho hero headline và editorial pull-quote cỡ lớn ở 46px; weight 400 cho body 16px — sự tương phản giữa body serif mảnh và display serif đậm là chữ ký typographic của trang

### InterVariable — UI text, label và chú thích giao diện — sans-serif đa năng cho mọi thứ bên trong browser mockup và copy hỗ trợ xung quanh trang · `--font-intervariable`
- **Thay thế:** Inter, Söhne, hoặc General Sans
- **Weights:** 500, 600, 700
- **Cỡ chữ:** 12px, 17px
- **Line height:** 1.20, 1.50
- **Letter spacing:** 0.033em
- **Vai trò:** UI text, label và chú thích giao diện — sans-serif đa năng cho mọi thứ bên trong browser mockup và copy hỗ trợ xung quanh trang

### ABC Favorit Mono — Micro-label, tag và category marker ở 12px với tracking rộng (lên đến 0.15em) — nhịp điệu monospaced phá vỡ mẫu serif/sans và báo hiệu 'metadata' · `--font-abc-favorit-mono`
- **Thay thế:** JetBrains Mono, ABC Diatype Mono, hoặc IBM Plex Mono
- **Weights:** 400, 700
- **Cỡ chữ:** 12px
- **Line height:** 1.20
- **Letter spacing:** 0.033em, 0.05em, 0.15em
- **Vai trò:** Micro-label, tag và category marker ở 12px với tracking rộng (lên đến 0.15em) — nhịp điệu monospaced phá vỡ mẫu serif/sans và báo hiệu 'metadata'

### ABC Oracle — Serif body phụ ở 20–24px cho các đoạn mô tả dài hơn nằm giữa các Marlin display headline — cầu nối giữa display và UI mà không cần chuyển font family · `--font-abc-oracle`
- **Thay thế:** ABC Diatype, Source Serif, hoặc Tiempos Text
- **Weights:** 400
- **Cỡ chữ:** 20px, 24px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Vai trò:** Serif body phụ ở 20–24px cho các đoạn mô tả dài hơn nằm giữa các Marlin display headline — cầu nối giữa display và UI mà không cần chuyển font family

### Exposure VAR — Display headline dày ở 36px với line-height 1.0 — dùng có chọn lọc để nhấn mạnh khi cần một đường cắt nén hơn so với Marlin · `--font-exposure-var`
- **Thay thế:** ABC Diatype Display Tight, Druk, hoặc Söhne Breit
- **Weights:** 700
- **Cỡ chữ:** 36px
- **Line height:** 1.00
- **Letter spacing:** -0.02em
- **Vai trò:** Display headline dày ở 36px với line-height 1.0 — dùng có chọn lọc để nhấn mạnh khi cần một đường cắt nén hơn so với Marlin

### -apple-system — -apple-system — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-apple-system`
- **Weights:** 600
- **Cỡ chữ:** 14px
- **Line height:** 2.07
- **Letter spacing:** -0.01
- **Vai trò:** -apple-system — đượ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ò | Cỡ chữ | Line Height | Letter Spacing | Token |
|---------|--------|-------------|----------------|-------|
| caption | 12px | 1.2 | 0.4px | `--text-caption` |
| body-sm | 14px | 1.2 | -0.14px | `--text-body-sm` |
| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |
| heading | 28px | 1.1 | -0.56px | `--text-heading` |
| heading-lg | 40px | 1.07 | -1.6px | `--text-heading-lg` |
| display | 46px | 0.98 | -2.3px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Density:** comfortable

### 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` |
| 48 | 48px | `--spacing-48` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| nav | 8px |
| cards | 8px |
| links | 4px |
| pills | 22px |
| buttons | 8px |

### Shadows

| Tên | Giá trị | Token |
|-----|---------|-------|
| sm | `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` | `--shadow-sm` |
| sm-2 | `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px` | `--shadow-sm-2` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 48px
- **Card padding:** 24px
- **Element gap:** 24px

## Components

### Scalloped Section Divider
**Vai trò:** Ranh giới đặc trưng giữa mọi dải màu

Đường viền lượn sóng hình vỏ sò ngăn cách các section — được thể hiện dưới dạng một chuỗi các đường cắt hình bán nguyệt dọc theo đáy của mỗi dải màu, tạo hiệu ứng giấy thủ công hoặc tem cắt. Màu sắc là Paper White (#ffffff) khi nối một section violet, hoặc Oat (#fffadd) khi nối một section kem. Các scallop là hình tròn đều, đường kính khoảng 16–20px, tạo ra nhịp điệu lặp lại thay thế cho cạnh cứng tiêu chuẩn. Đây là yếu tố hình ảnh đặc biệt nhất trên trang.

### Dark CTA Button
**Vai trò:** Call-to-action chính — nút 'Try Dia'

Nền Obsidian (#000000) với chữ Paper White (#ffffff), border-radius 8px, shadow rgba(0,0,0,0.1) 0px 5px 5px 0px. Padding ngang 16px, padding dọc 10px. Bao gồm một icon cầu vồng Arc nhỏ bên trái label và mũi tên phải sau chữ. Font: Marlin Soft SQ 500 ở 14px. Nút tối trên nền canvas kem tạo độ tương phản mạnh mà không cần màu sắc.

### Top Navigation Bar
**Vai trò:** Header cố định trên tất cả các section

Nằm trên dải màu Electric Iris (#3139fb). Nền trong suốt hoặc Linen (#fffcec) không có viền nhìn thấy được. Bên trái: icon cầu vồng Arc. Giữa/phải: nav links (Max, Mobile, Developers, Students, Blog) màu Paper White, 14px, với icon mũi tên nhỏ. Padding ngang 32px. Nav duy trì cùng cạnh đáy scalloped xác định phần còn lại của trang.

### Browser Product Mockup
**Vai trò:** Hình ảnh hero — trình duyệt Arc được thể hiện như một phần tử tương tác lớn

Cửa sổ trình duyệt đầy đủ với các nút traffic-light (hình tròn đỏ/vàng/xanh lá), thanh URL hiển thị 'Dia — New Chat', và bố cục chia đôi: sidebar trái cho spaces/folders, khu vực nội dung bên phải. Cửa sổ có radius 8px, shadow nhẹ rgba(0,0,0,0.25) 0px 2px 8px 0px. Bề mặt bên trong dùng Paper White (#ffffff) trên sidebar Linen (#fffcec). Mockup này thay thế ảnh chụp sản phẩm làm hình ảnh chính.

### Browser Sidebar
**Vai trò:** Thanh điều hướng bên trái trong browser mockup

Nền Linen (#fffcec), radius 8px trên các mục tương tác. Chứa space tabs (icon nhỏ + label) và folder items. Space đang hoạt động có chữ Obsidian (#000000) và weight đậm; các mục không hoạt động dùng Granite (#696969). 12px Inter Variable 500 cho label. Padding dọc 8px giữa các mục. Sidebar đổi màu nền theo từng section — Linen trong section kem, Electric Iris trong section violet.

### Space Tab
**Vai trò:** Mục space hoặc folder riêng lẻ trong browser sidebar

Icon nhỏ (Gmail, Calendar, v.v.) + label. Radius 8px, padding ngang 10px, padding dọc 8px. Không hoạt động: chữ Granite, nền trong suốt. Hoạt động: chữ Obsidian, nền Paper White với viền nhẹ. Icon là hình thu nhỏ màu thương hiệu — một phiên bản bão hòa nhỏ của nhận diện thị giác dịch vụ.

### Chat Bubble — User
**Vai trò:** Tin nhắn do người dùng gõ trong giao diện AI chat

Nền Electric Iris (#3139fb) với chữ Paper White (#ffffff), border-radius 22px (hình pill). Font: Inter Variable 500 ở 16px, line-height 1.50. Căn phải. Padding 12px 20px. Màu violet rực rỡ trên nền trắng làm nổi bật tin nhắn của người dùng mà không cần avatar.

### Chat Bubble — AI Response
**Vai trò:** Phản hồi do AI tạo trong giao diện chat

Không có nền — nằm trực tiếp trên Paper White (#ffffff). Chữ Obsidian (#000000), 16px Marlin Soft SQ 500, line-height 1.20. Căn trái. Một meta-label nhỏ 'Thought for 5 seconds' màu Granite (#696969) ở 12px nằm phía trên. Nhấn mạnh inline đậm trên các cụm từ chính.

### Workspace Panel (Violet Section Sidebar)
**Vai trò:** Điều hướng bên trái bên trong section violet thương hiệu

Nền Electric Iris (#3139fb) đặc. Space icons màu Paper White kích thước 40×40px với radius 8px. Section headers ('Work', 'Personal') màu Paper White ở 12px, letter-spacing 0.033em. Folder items bên dưới màu Paper White ở 14px. Workspace đang hoạt động (ví dụ: 'onetwothree') có nền pill Paper White với chữ Electric Iris — tương phản đảo ngược.

### Testimonial Marquee Strip
**Vai trò:** Trích dẫn báo chí cuộn ngang ở cuối các section

Dải màu full-width trên nền Paper White (#ffffff). Chữ trích dẫn Obsidian (#000000) ở 17px Marlin Soft SQ 500. Ghi nguồn (Bloomberg, Inverse, Inc.) màu Granite (#696969) với dấu ngoặc kép đóng. Được phân cách bằng dấu chấm tròn. Dải tự động cuộn ngang và nằm giữa các scalloped divider.

### Category Micro-Label
**Vai trò:** Tag hoặc category marker monospaced

ABC Favorit Mono 400 ở 12px, letter-spacing 0.15em (tracking rộng), chữ hoa. Chữ Obsidian (#000000) hoặc Paper White (#ffffff) tùy theo nền. Không có nền — chỉ là chữ có tracking báo hiệu 'metadata' hoặc 'category'. Dùng có chọn lọc để gắn nhãn section mà không tạo trọng lượng thị giác.

### Hero Gradient Banner
**Vai trò:** Gradient kem sang hồng phía sau hero headline

Gradient ngang nhẹ từ Oat (#fffadd) bên trái qua một màu hồng/lavender rất nhạt đến một màu kem mát hơn bên phải. Được áp dụng làm nền section hero. Gradient rất tinh tế — sự chuyển đổi từ ấm sang mát được cảm nhận hơn là nhìn thấy. Bên dưới headline là Dark CTA Button được căn giữa.

## Do's and Don'ts

### Do
- Dùng scalloped divider làm ranh giới giữa mọi section màu — không bao giờ dùng đường kẻ ngang cứng hoặc viền mỏng
- Đặt display headline ở 46px Marlin 400/700/800 với letter-spacing -2.3px; tracking chặt trên serif là thứ tạo nên giọng editorial
- Chỉ dùng Electric Iris (#3139fb) cho nền section full-bleed — không bao giờ dùng cho chữ, icon hoặc phần tử UI nhỏ
- Kết hợp serif headline (Marlin) với sans-serif UI (Inter Variable) — sự tương phản typographic mang lại sự căng thẳng editorial-meets-product
- Mặc định dùng border-radius 8px cho card, button và nav items; chỉ dùng 22px cho chat bubble hình pill và tag thỉnh thoảng
- Dùng ABC Favorit Mono ở 12px với tracking 0.15em cho micro-label và category marker — tracking rộng trên mono phá vỡ mẫu serif/sans và báo hiệu metadata
- Giữ shadow tối thiểu: rgba(0,0,0,0.1) 0px 5px 5px 0px cho button, rgba(0,0,0,0.25) 0px 2px 8px 0px cho mockup nâng cao — để scalloped divider và color blocking làm công việc không gian

### Don't
- Không dùng Electric Iris (#3139fb) cho CTA button hoặc accent tương tác — nó mang bầu không khí, không phải tương tác; button giữ màu tối
- Không thêm gradient vào UI component — trang không có gradient nào được phát hiện; gradient duy nhất là hero cream-to-pink wash
- Không dùng border-radius 0px hoặc 4px cho card hoặc button — bán kính tối thiểu có thể nhìn thấy là 8px; góc nhọn phá vỡ cảm giác giấy thủ công
- Không kết hợp hai font serif trên cùng một dòng — Marlin và Marlin Soft SQ là serif duy nhất; kết hợp với ABC Oracle cho body thì được nhưng không bao giờ dùng hai display serif
- Không dùng trắng sáng (#ffffff) làm canvas trang — màu kem ấm Oat (#fffadd) là mặc định; trắng dành riêng cho nội thất mockup và scalloped ridges
- Không áp dụng drop shadow nặng cho chữ hoặc phần tử nhỏ — shadow chỉ xuất hiện trên button và cửa sổ browser mockup
- Không thay thế scalloped divider bằng SVG wave, đường cắt chéo hoặc đường thẳng — nhịp điệu hình bán nguyệt scallop là đặc điểm dễ nhận biết nhất của trang

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 0 | Oat Canvas | `#fffadd` | Nền trang mặc định; màu kem ấm đọc như giấy |
| 1 | Linen Card | `#fffcec` | Bề mặt thứ cấp nổi lên khỏi canvas với tông ấm hơn nửa bước |
| 2 | Paper White | `#ffffff` | Màu trắng tinh cho nội thất browser mockup card và scalloped divider ridges |
| 3 | Electric Iris Band | `#3139fb` | Nền section thương hiệu full-bleed — color blocking mang bầu không khí |
| 4 | Deep Violet Layer | `#2702c2` | Accent sâu hơn bên trong section violet để tạo phân cấp |

## Elevation

- **Dark CTA Button:** `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`
- **Browser Product Mockup:** `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px`

## Imagery

Browser product mockup CHÍNH LÀ hình ảnh. Không có ảnh chụp sản phẩm, không có ảnh phong cách sống, không có minh họa — trình duyệt Arc được thể hiện dưới dạng cửa sổ tương tác lớn (traffic lights, thanh URL, sidebar spaces, inline chat) là hình ảnh chính trên mọi section. Bên trong mockup, nội dung thực lấp đầy viewport: ảnh hoa trong MMMHome, bản vẽ kiến trúc trong section violet, thẻ lịch/sự kiện. Đây là các trạng thái UI được chụp màn hình, không phải ảnh dàn dựng. Mockup có chiều rộng full-width, nằm trên nền màu của section và đổ một shadow mềm duy nhất. Không có hệ thống icon nào hiển thị — bản thân sản phẩm CHÍNH LÀ icon.

## Layout

Các dải màu full-bleed xếp chồng theo chiều dọc với các chuyển tiếp scalloped giữa mỗi dải. Trang không phải là một canvas cuộn duy nhất với các section — nó là một chuỗi các mảng màu (cream → violet → cream → violet) mà mỗi mảng đều cảm thấy như một lần lật trang. Trong mỗi dải, nội dung có max-width ~1200px và được căn giữa. Hero là một cụm headline căn giữa (h1 + subtext + CTA) trên nền gradient kem với một browser mockup lớn bên dưới. Các section violet chia thành sidebar workspace bên trái (250–300px) và khu vực nội dung bên phải hiển thị toàn bộ browser viewport. Cạnh scalloped chạy toàn bộ chiều rộng ở đáy mỗi dải, tạo ra nhịp điệu lượn sóng liên tục xuống trang. Navigation là một thanh trên cùng tối giản tồn tại trên tất cả các section, nằm trên dải violet đầu tiên.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000 (Obsidian)
- background: #fffadd (Oat cream canvas)
- border: #bfbdb1 (đường kẻ mảnh ấm tinh tế) / #696969 (divider nhìn thấy được)
- accent: #3139fb (Electric Iris — section fill mang bầu không khí)
- secondary surface: #fffcec (Linen — card và nav)
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

Không có màu primary action riêng biệt nào được quan sát; dùng các xử lý button trung tính đã trích xuất thay vì tự tạo màu CTA đã tô.

2. **Violet Brand Section**: Nền full-bleed Electric Iris (#3139fb). Scalloped white divider ở cạnh trên. Sidebar trái: rộng 280px, nền #3139fb đặc, space icons (40×40px, Paper White, radius 8px), section headers màu Paper White 12px ABC Favorit Mono với tracking 0.15em. Workspace đang hoạt động có nền pill Paper White với chữ #3139fb. Khu vực bên phải: browser viewport hiển thị nội dung workspace — card trắng trên nền #fffadd, heading serif đậm ở 28px Marlin Soft SQ 700, body ở 16px ABC Oracle 400 màu Obsidian.

3. **Chat Interface Card**: Nền Paper White (#ffffff), radius 8px, padding 24px. Tin nhắn người dùng: căn phải, nền Electric Iris (#3139fb), chữ Paper White, pill radius 22px, padding 12px 20px, Inter Variable 500 ở 16px. AI response bên dưới: căn trái, không nền, chữ Obsidian, 16px Marlin Soft SQ 500. Meta-label phía trên AI response: 'Thought for 5 seconds' màu Granite (#696969) ở 12px Inter Variable 500 với tracking 0.033em.

4. **Testimonial Strip**: Dải full-width Paper White (#ffffff) giữa các scalloped divider. Hàng cuộn ngang. Mỗi trích dẫn: chữ Obsidian ở 17px Marlin Soft SQ 500, theo sau là tên nguồn màu Granite (#696969). Dấu phân cách: dấu chấm tròn. Padding dọc 32px, padding ngang 48px.

5. **Category Micro-Label**: Không nền. Chỉ chữ: ABC Favorit Mono 400 ở 12px, letter-spacing 0.15em, chữ hoa, Obsidian (#000000). Dùng phía trên tiêu đề section như một metadata tag. Khoảng cách dưới 4px đến headline bên dưới.

## Scalloped Divider System

Cạnh scalloped là yếu tố thiết kế dễ nhận biết nhất của trang và phải được coi là component hạng nhất, không phải vật trang trí phụ.

**Hình học**: Một mẫu lặp lại các đường cắt hình bán nguyệt dọc theo cạnh dưới của một dải màu. Mỗi scallop có đường kính khoảng 16–20px, cách đều nhau. Mẫu chạy toàn bộ chiều rộng của viewport.

**Quy tắc màu sắc**:
- Khi dải phía trên là Electric Iris (#3139fb), scallop được tô bằng Paper White (#ffffff) để tạo sóng sáng trên nền violet.
- Khi dải phía trên là Oat (#fffadd) hoặc Linen (#fffcec), scallop được tô bằng Electric Iris (#3139fb) để lặp lại section violet tiếp theo.
- Không bao giờ dùng cùng màu cho dải và scallop ridge của nó — scallop phải luôn tương phản với dải mẹ.

**Triển khai**: Dùng SVG mask hoặc CSS clip-path với mẫu repeating-radial-gradient. Các scallop phải là hình tròn hoàn hảo, không phải hình elip. Không thay đổi kích thước scallop trên toàn trang — tính đồng nhất là thứ tạo ra nhịp điệu.

**Khi KHÔNG dùng**: Bên trong browser mockup hoặc trên bất kỳ component UI nào. Scallop là yếu tố kiến trúc cấp trang, không phải xử lý card hay button.

## Similar Brands

- **Notion** — Cùng canvas kem ấm với bố cục editorial vui tươi, kết hợp typography serif-meets-sans, và sử dụng shadow tối thiểu
- **Figma** — Cùng cách tiếp cận product-as-hero nơi giao diện ứng dụng thay thế ảnh chụp, kết hợp với các khối section một màu đậm
- **Linear** — Cùng letter-spacing chặt trên display heading và cam kết với một màu accent sống động duy nhất cho chiều sâu bầu không khí
- **Gumroad** — Cùng độ ấm của giấy thủ công, ranh giới section bất thường vui tươi, và sẵn sàng phá vỡ quy ước clean-SaaS
- **Stripe** — Cùng kỷ luật typography editorial — serif display headline kết hợp với sans body sạch sẽ, độ tương phản cao, spacing rộng rãi

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-electric-iris: #3139fb;
  --color-deep-violet: #2702c2;
  --color-oat: #fffadd;
  --color-linen: #fffcec;
  --color-paper-white: #ffffff;
  --color-obsidian: #000000;
  --color-granite: #696969;
  --color-olive-stone: #595853;

  /* Typography — Font Families */
  --font-marlin-soft-sq: 'Marlin Soft SQ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-marlin: 'Marlin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-exposure-var: 'Exposure VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.4px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.14px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --text-heading: 28px;
  --leading-heading: 1.1;
  --tracking-heading: -0.56px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.07;
  --tracking-heading-lg: -1.6px;
  --text-display: 46px;
  --leading-display: 0.98;
  --tracking-display: -2.3px;

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

  /* 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-48: 48px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 24px;

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

  /* Named Radii */
  --radius-nav: 8px;
  --radius-cards: 8px;
  --radius-links: 4px;
  --radius-pills: 22px;
  --radius-buttons: 8px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;

  /* Surfaces */
  --surface-oat-canvas: #fffadd;
  --surface-linen-card: #fffcec;
  --surface-paper-white: #ffffff;
  --surface-electric-iris-band: #3139fb;
  --surface-deep-violet-layer: #2702c2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-electric-iris: #3139fb;
  --color-deep-violet: #2702c2;
  --color-oat: #fffadd;
  --color-linen: #fffcec;
  --color-paper-white: #ffffff;
  --color-obsidian: #000000;
  --color-granite: #696969;
  --color-olive-stone: #595853;

  /* Typography */
  --font-marlin-soft-sq: 'Marlin Soft SQ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-marlin: 'Marlin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abc-favorit-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-exposure-var: 'Exposure VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: 0.4px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.14px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --text-heading: 28px;
  --leading-heading: 1.1;
  --tracking-heading: -0.56px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.07;
  --tracking-heading-lg: -1.6px;
  --text-display: 46px;
  --leading-display: 0.98;
  --tracking-display: -2.3px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-128: 128px;

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

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;
}
```