# Pitch

> Pitch — Style Reference

## Prompt Content

```
# Pitch — Style Reference
> Ánh sáng sân khấu màu tím trên nền trắng. Gradient tím đậm tràn ngập hero như ánh đèn sân khấu, sau đó trang web chuyển dần xuống một không gian làm việc sạch sẽ, phẳng, nơi một màu tím sáng duy nhất làm tất cả công việc.

**Theme:** light

Pitch là một nền tảng năng suất được chiếu sáng như sân khấu: hero tràn ngập gradient tím tươi sáng như ánh đèn sân khấu, phần còn lại của trang lắng xuống một không gian làm việc slate-and-white sạch sẽ, nơi màu sắc được phân bổ như dấu câu chức năng. Typography kết hợp một geometric sans có tracking rộng (Eina01) cho UI với một display sans nặng, tracking chặt (Mark Pro) cho headline — hai giọng nói tạo ra một hệ thống phân cấp rõ ràng giữa bề mặt sản phẩm và giọng marketing. Các bề mặt là flat white với bóng mờ, độ mờ thấp; màu tím (#6b53ff) mang mọi hành động và brand mark, một màu vàng ấm duy nhất (#ffd02c) thêm điểm nhấn năng lượng, và một màu than gần đen (#2b2a35) làm công việc nặng nhọc cho text. Các component nhỏ gọn và tự tin — pill buttons, bán kính nhỏ (6–20px), padding 20px chặt chẽ, và cố tình không có trang trí. Nhịp điệu trang xen kẽ giữa các dải full-bleed tím đậm và các phần nội dung sáng, tạo ra nhịp kịch từ cảnh tượng đến nội dung.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Signal Violet | `#6b53ff` | `--color-signal-violet` | Điểm nhấn tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Lighter Violet | `#8d49f7` | `--color-lighter-violet` | Điểm nhấn thương hiệu phụ, điểm dừng gradient highlight, icon fills, lớp phủ tím trang trí — một phiên bản sáng hơn dùng khi Signal Violet có vẻ quá nặng |
| Deep Indigo | `#371789` | `--color-deep-indigo` | Text thương hiệu tối, điểm dừng gradient tối, điểm nhấn footer/marketing trên phần trắng — mặt tối của họ tím |
| Solar Yellow | `linear-gradient(90deg, #ffd02c, #ff9e2c)` | `--color-solar-yellow` | Điểm nhấn năng lượng — slide preview highlights, decorative bursts, gradient start, illustration fills. Dùng tiết kiệm như dấu câu thị giác, không bao giờ là màu chức năng; Gradient ấm làm điểm nhấn — linear-gradient(90deg, #ffd02c, #ff9e2c) cho decorative bursts và illustration gradients |
| Ember Orange | `#ffa000` | `--color-ember-orange` | Điểm nhấn cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Slate Ink | `#2b2a35` | `--color-slate-ink` | Text chính, heading text, icon strokes, dark surface fill — màu achromatic chủ đạo làm tất cả công việc đọc (hơn 1.700 lần xuất hiện) |
| Carbon | `#1e1d28` | `--color-carbon` | Text tối phụ, card text trên bề mặt sáng — nhạt hơn Slate Ink một bậc cho bản sao cấp dưới |
| Steel | `#3f4250` | `--color-steel` | Body text nhẹ, secondary headings, dark-mode support text |
| Fog | `#6f7387` | `--color-fog` | Màu trung tính hỗ trợ cho secondary UI, dividers, và muted labels. |
| Ash | `#95959a` | `--color-ash` | Tertiary borders, subtle dividers, light-mode shadow tint ở độ mờ thấp |
| Mist | `#dddfe5` | `--color-mist` | Hairline borders, card outlines, button shadows — đường cấu trúc có thể nhìn thấy nhẹ nhất |
| Marble | `#f0eff4` | `--color-marble` | Nền canvas trang — hơi lạnh hơn trắng tinh khiết, tách biệt phần sản phẩm khỏi bề mặt card |
| Paper | `#ffffff` | `--color-paper` | Bề mặt hỗ trợ sáng cho nền tinh tế và phân cách phần. Không nâng lên thành màu CTA chính |
| Shadow Violet | `#0a0359` | `--color-shadow-violet` | Màu bóng đậm pha tím (rgba 0.3) — chỉ xuất hiện trong bóng môi trường lớn của hero card, tạo cảm giác nâng lên với tông lạnh mang thương hiệu |
| Hero Stage | `linear-gradient(90deg, rgb(83, 24, 235), rgb(171, 110, 249))` | `--color-hero-stage` | Điểm dừng gradient hero chính — linear gradient(90deg, #5718eb, #ab6ef9) lấp đầy toàn bộ màn hình đầu tiên phía sau headline |

## Tokens — Typography

### Eina01 — Font UI và body chính. Dùng cho navigation, buttons, body copy, list items, badges, và subheadings đến 28px. Đặc trưng là letter-spacing rộng +0.1em được áp dụng nhất quán — sự thoáng đãng này tạo cho UI một nhịp điệu đo lường, có chủ đích thay vì nén chặt kiểu SaaS. Thay thế: Inter hoặc Manrope (cả hai đều là geometric sans có x-height tương tự). · `--font-eina01`
- **Thay thế:** Inter
- **Weights:** 400, 600, 700, 800
- **Kích thước:** 13, 14, 15, 16, 18, 22, 24, 28
- **Line height:** 1.2–1.6
- **Letter spacing:** 0.1em
- **Vai trò:** Font UI và body chính. Dùng cho navigation, buttons, body copy, list items, badges, và subheadings đến 28px. Đặc trưng là letter-spacing rộng +0.1em được áp dụng nhất quán — sự thoáng đãng này tạo cho UI một nhịp điệu đo lường, có chủ đích thay vì nén chặt kiểu SaaS. Thay thế: Inter hoặc Manrope (cả hai đều là geometric sans có x-height tương tự).

### Mark Pro — Font display và headline. Chỉ dùng cho hero headlines (60–80px), section headings (42px), và small uppercase labels (13px). Các kích thước display mang tracking âm chặt (-0.02em ở 60–80px, -0.01em ở 27–28px) tương phản với sự thoáng đãng của Eina01 — hai font tạo ra một tính hai mặt chặt/rộng có chủ đích. Thay thế: Söhne (gần nhất) hoặc Inter ở weight nặng. · `--font-mark-pro`
- **Thay thế:** Söhne
- **Weights:** 700, 800
- **Kích thước:** 13, 27, 28, 42, 60, 80
- **Line height:** 1.0–1.4
- **Letter spacing:** -0.02em ở 60–80px, -0.01em ở 27–28px, 0.1em ở 13px (uppercase labels)
- **Vai trò:** Font display và headline. Chỉ dùng cho hero headlines (60–80px), section headings (42px), và small uppercase labels (13px). Các kích thước display mang tracking âm chặt (-0.02em ở 60–80px, -0.01em ở 27–28px) tương phản với sự thoáng đãng của Eina01 — hai font tạo ra một tính hai mặt chặt/rộng có chủ đích. Thay thế: Söhne (gần nhất) hoặc Inter ở weight nặng.

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Kích thước:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — đượ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ò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.6 | 1.3px | `--text-caption` |
| body | 16px | 1.6 | 1.6px | `--text-body` |
| body-lg | 18px | 1.6 | 1.8px | `--text-body-lg` |
| subheading | 22px | 1.4 | 2.2px | `--text-subheading` |
| heading-sm | 24px | 1.3 | 2.4px | `--text-heading-sm` |
| heading | 28px | 1.2 | 2.8px | `--text-heading` |
| heading-lg | 42px | 1.1 | -0.42px | `--text-heading-lg` |
| display | 72px | 1 | -1.44px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 120 | 120px | `--spacing-120` |
| 159 | 159px | `--spacing-159` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 26px |
| small | 3px |
| badges | 20px |
| inputs | 6px |
| buttons | 20px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| md | `rgba(0, 0, 0, 0.15) 0px 3px 10px 0px` | `--shadow-md` |
| xl | `rgba(103, 110, 144, 0.2) 0px 8px 26px 0px` | `--shadow-xl` |
| xl-2 | `rgba(43, 42, 53, 0.25) 0px 6px 27px 0px` | `--shadow-xl-2` |
| xl-3 | `rgba(43, 42, 53, 0.5) 0px 6px 27px 0px` | `--shadow-xl-3` |
| xl-4 | `rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.0...` | `--shadow-xl-4` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 20px
- **Element gap:** 20px

## Components

### Filled Primary Button
**Vai trò:** Primary action — CTA chính trên một trang hoặc section.

Background #6b53ff, text trắng, border-radius 20px (pill), padding dọc 12px × ngang 20px, Eina01 weight 600 ở 14–15px với tracking 0.1em. Tùy chọn icon mũi tên phải màu trắng. Bán kính cao là đặc trưng — các button này trông như pill mềm, không phải hình chữ nhật.

### Inverted/White Filled Button
**Vai trò:** Secondary action trên nền sáng, primary action trên section tối.

Background #ffffff, text #2b2a35, radius 20px, padding 12px × 20px, Eina01 weight 600. Dùng cho 'Sign up' trong navigation tối và 'Sign up for free' trên hero gradient — pill trắng là đối trọng với pill tím.

### Ghost/Outlined Button
**Vai trò:** Low-emphasis action, dùng trên nền màu hoặc nền ảnh.

Background trong suốt, border trắng 1.5px, text trắng, radius 20px, padding 12px × 20px. 'Log in' trong header dùng cách xử lý này — nó nằm trong navigation tối mà không cạnh tranh với pill 'Sign up' màu trắng.

### Pill Badge/Tag
**Vai trò:** Category tags, feature labels, inline metadata.

Border-radius 20px, padding dọc 4px × ngang 12px, Eina01 weight 600 ở 13px với tracking 0.1em và uppercase. Violet fill với text trắng cho active tags, neutral fill cho passive tags. Nhỏ gọn và khép kín.

### Feature Card
**Vai trò:** Marketing feature blocks với image, title, và description.

Bề mặt trắng (#ffffff), border-radius 26px, padding 20px, bóng mềm rgba(0,0,0,0.15) 0px 3px 10px. Tùy chọn nâng lên thành bóng môi trường tím đậm rgba(10,3,89,0.3) 0px 20px 90px cho hero feature cards. Khoảng trắng nội bộ rộng rãi với bố cục image-top, text-below.

### Testimonial Card
**Vai trò:** Social proof blocks với avatar, quote, và attribution.

Background tím (#6b53ff), radius 26px, text trắng, ảnh avatar tròn (đường kính 60–80px) với viền vàng (#ffd02c). Violet fill làm testimonial nổi bật về mặt thị giác — chúng được thiết kế để là đỉnh cao cảm xúc của một section.

### Hero Section
**Vai trò:** Ấn tượng thương hiệu màn hình đầu tiên.

Background full-bleed với linear-gradient(90deg, #5718eb, #ab6ef9). Headline trắng căn giữa (Mark Pro weight 700–800 ở 60–80px, tracking -0.02em, line-height 1.0), subtext trắng (Eina01 weight 400 ở 18px), và hàng hai button (pill trắng + pill tím). Tùy chọn các yếu tố 3D minh họa nổi ở góc với ánh sáng tím mềm.

### Navigation Bar
**Vai trò:** Điều hướng cấp cao nhất của trang.

Background trong suốt nằm trực tiếp trên hero gradient. Text trắng (Eina01 weight 600 ở 15px, tracking 0.1em). Logo mark bên trái (ký tự 'P' tím trên hình vuông tròn trắng). Căn phải: ghost 'Log in' + white-filled 'Sign up'. Không có background fill cho đến khi cuộn.

### Announcement Banner
**Vai trò:** Thông báo tin tức/tính năng đầu trang.

Background trắng, text một dòng căn giữa trong Eina01 weight 400 ở 13–14px. Body text tối với link 'See what's new →' màu tím weight 600. Hairline border dưới màu #dddfe5. Padding dọc 2px — chiều cao tối thiểu để không gây khó chịu.

### Tab/Segment Control
**Vai trò:** Chuyển đổi giữa các view tính năng dành riêng cho đối tượng.

Hàng ngang các label Eina01 uppercase (weight 600, 13px, tracking 0.1em) màu #6f7387. Active tab là #6b53ff với thanh gạch dưới tím 2px. Không có background fill trên hàng — chỉ riêng underline mang trạng thái active.

### Checklist Item
**Vai trò:** Feature list với checkmark icons.

Icon checkmark tím (#6b53ff, ~20px) căn trái, label text tối trong Eina01 weight 400 ở 16–18px bên phải. Khoảng cách dọc 15px giữa các item. Check màu tím là màu duy nhất — mọi thứ khác là monochrome charcoal.

### Cookie Consent Card
**Vai trò:** Overlay thông báo GDPR/quyền riêng tư.

Bề mặt trắng, radius ~16px, bóng mềm, fixed-position dưới-trái. Body text trong Eina01 ở 13px, button 'Agree' màu tím #6b53ff, 'More options' là text link. Nhỏ gọn — không được chiếm ưu thế viewport.

### Client Logo Strip
**Vai trò:** Social proof — thương hiệu sử dụng sản phẩm.

Hàng ngang các logo client grayscale (#2b2a35 hoặc gần đen) ở chiều cao đồng nhất (~24–32px), cách đều với khoảng cách rộng rãi. Logo được desaturate thành xám để tránh cạnh tranh với tím thương hiệu. Nằm căn giữa trên dải trắng hoặc #f0eff4.

### Slide Preview/Product Card
**Vai trò:** Mockup sản phẩm nội tuyến hiển thị editor hoặc một bản trình bày hoàn chỉnh.

Bề mặt trắng, radius 6px–16px, padding 20px, nằm trong một card lớn hơn. Hiển thị UI sản phẩm thực tế (toolbar, canvas, slide thumbnails). Nằm trên background xám nhạt (#f0eff4) để tách sản phẩm khỏi trang marketing.

## Do's and Don'ts

### Do
- Dùng Signal Violet (#6b53ff) làm fill độc quyền cho primary action buttons và brand marks — không bao giờ thay thế bằng màu khác
- Áp dụng border-radius 20px cho tất cả buttons, badges, và pill-shaped elements; 26px cho card lớn hơn; 6px cho inputs và small tags
- Dùng Eina01 với letter-spacing 0.1em cho tất cả UI text — wide tracking này là nhịp điệu đặc trưng của hệ thống
- Dành Mark Pro (weight 700–800) cho display headlines từ 42px trở lên với tracking -0.02em chặt
- Dùng hero gradient linear-gradient(90deg, #5718eb, #ab6ef9) làm background full-bleed cho content blocks có độ nhấn mạnh tối đa
- Giữ card padding ở 20px và element gaps ở 20px cho nhịp điệu bề mặt sản phẩm tiêu chuẩn
- Chỉ dùng bóng mềm — rgba(0,0,0,0.15) 0px 3px 10px là mặc định; nâng lên bóng đậm pha tím chỉ cho hero feature cards

### Don't
- Đừng giới thiệu accent colors mới — Solar Yellow (#ffd02c) và Ember Orange (#ffa000) chỉ dùng để trang trí, không bao giờ dùng cho buttons hoặc status
- Đừng dùng Eina01 ở display sizes trên 28px — chuyển sang Mark Pro cho bất kỳ thứ gì lớn hơn để duy trì tính hai mặt chặt/rộng
- Đừng áp dụng tight negative tracking cho Eina01 — positive spacing 0.1em của nó là bất di bất dịch cho giọng UI
- Đừng dùng borders nặng hoặc hard outlines trên cards — hệ thống báo hiệu độ cao qua bóng mềm và tương phản nền, không phải strokes
- Đừng đặt body text trực tiếp trên hero gradient tím ở kích thước nhỏ — tối thiểu 16px text trắng, hoặc chuyển text lên card trắng
- Đừng dùng Deep Indigo (#371789) làm button fill — nó là màu text và gradient, không phải bề mặt tương tác
- Đừng trộn tím và vàng trên cùng một component — chúng phục vụ các chức năng khác nhau (tím = hành động, vàng = năng lượng) và kết hợp chúng làm rối loạn hệ thống phân cấp

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Marble | `#f0eff4` | Page canvas — background mặc định cho content sections bên dưới hero |
| 1 | Paper | `#ffffff` | Card và panel surfaces — nằm một bậc trên Marble, bề mặt sản phẩm chính |
| 2 | Elevated Paper | `#ffffff` | Modals, popovers, floating toolbars — cùng màu trắng nhưng được phân biệt bằng bóng mạnh hơn và/hoặc border |
| 3 | Hero Stage | `#5718eb` | Full-bleed brand sections — gradient tím, dành riêng cho hero và các đỉnh cao cảm xúc chính |

## Elevation

- **Standard card / image container:** `0px 3px 10px rgba(0, 0, 0, 0.15)`
- **Elevated feature card:** `0px 8px 26px rgba(103, 110, 144, 0.2)`
- **Hero feature card (ambient lift):** `0px 20px 90px rgba(10, 3, 89, 0.3), 0px 0px 0px 1px rgba(0, 0, 0, 0.02)`
- **Primary button (active/pressed state):** `0px 6px 27px rgba(43, 42, 53, 0.5)`

## Imagery

Hình ảnh là sự kết hợp giữa product screenshots (UI editor, slide thumbnails) và các đối tượng trang trí được render 3D — la bàn, bánh răng, đồng hồ — nổi với ánh sáng tím mềm ở góc của content sections. Product screenshots luôn được đặt trong card tròn trắng (radius 16–26px) với bóng mềm, không bao giờ full-bleed. Các đối tượng 3D được cách điệu, hơi bóng, và pha màu tím thương hiệu và vàng ấm để cảm thấy gắn kết với hero. Photography không có — không có lifestyle shots, không có ảnh người trong marketing (sự hiện diện của con người chỉ giới hạn ở avatar tròn trong testimonial cards). Mật độ thị giác tổng thể ở mức vừa phải: text chiếm ưu thế với product visuals làm bằng chứng hỗ trợ thay vì cảnh tượng.

## Layout

Trang là một cuộn dọc gồm các dải full-width xen kẽ: hero gradient tím (headline căn giữa, hàng hai button, đối tượng 3D trang trí ở góc) → product preview band (card slide editor căn giữa trên nền trắng) → client logo strip (căn giữa, khoảng cách rộng rãi) → 'for the whole team' section (text căn giữa + tabbed feature blocks) → testimonial band (card tím với avatar tròn) → checklist section (hai cột: ảnh trái, checkmark list phải). Max content width là ~1200px căn giữa. Navigation là thanh trên cùng trong suốt phủ lên hero và có thể đặc lại khi cuộn. Section gaps là 80px — đủ rộng cho nhịp kịch, đủ chặt để duy trì đà. Nhịp điệu là: hero tím đậm → product band trắng → social proof xám → feature section trắng → testimonial tím → checklist trắng. Nhịp tối/sáng xen kẽ này tạo ra dấu câu thị giác mà không cần dividers.

## Agent Prompt Guide

**Quick Color Reference**
- Primary text: #2b2a35
- Secondary text: #1e1d28
- Muted text: #6f7387
- Background (canvas): #f0eff4
- Card surface: #ffffff
- Border: #dddfe5
- primary action: không có màu CTA riêng biệt
- Accent: #ffd02c (vàng trang trí)

**Example Component Prompts**

1. **Hero section**: Background full-bleed linear-gradient(90deg, #5718eb, #ab6ef9). Headline trắng căn giữa ở 60px Mark Pro weight 700, letter-spacing -0.02em, line-height 1.0. Subtext trắng ở 18px Eina01 weight 400, letter-spacing 0.1em. Hai button cạnh nhau: pill trắng (bg trắng, text #2b2a35, radius 20px, padding 12px 20px) và pill tím (bg #6b53ff, text trắng, radius 20px).

2. **Feature card**: Bề mặt trắng (#ffffff), border-radius 26px, padding 20px, shadow 0px 3px 10px rgba(0,0,0,0.15). Image lấp đầy phía trên với radius 6px. Title trong Eina01 weight 700 ở 22px, #2b2a35, tracking 0.1em. Body trong Eina01 weight 400 ở 16px, #3f4250.

3. **Testimonial card**: Background tím (#6b53ff), radius 26px, padding 20px. Avatar tròn (đường kính 72px) với viền 3px #ffd02c. Quote trong Eina01 weight 400 ở 18px, trắng, tracking 0.1em. Tên attribution trong Eina01 weight 700 ở 14px, trắng.

4. **Tab control**: Hàng ngang, không background. Labels trong Eina01 weight 600 ở 13px, tracking 0.1em, uppercase. Inactive tabs màu #6f7387, active tab màu #6b53ff với thanh gạch dưới tím 2px (4px dưới text, 100% width của label).

5. **Checklist item**: Icon checkmark tím (#6b53ff) 20px căn trái. Label trong Eina01 weight 400 ở 18px, #2b2a35, tracking 0.1em, gap 15px từ icon. Các item cách nhau 15px dọc.

## Duality Principle

Hệ thống vận hành trên tính hai mặt chặt/rộng: Mark Pro chặt (-0.02em) và nặng, Eina01 rộng (+0.1em) và nhẹ. Đây không phải là lựa chọn phong cách mà là công cụ phân cấp — khi bạn thấy tracking chặt, bạn đang ở giọng headline (marketing, cảm xúc); khi bạn thấy tracking rộng, bạn đang ở giọng sản phẩm (interface, tiện ích). Không bao giờ gộp hai cái thành một tracking style. Đây là lựa chọn đặc biệt nhất trong hệ thống.

## Color Rationing

Tím được phân bổ, không phải rải rác. Trên một màn hình nhất định, tím chỉ nên xuất hiện trên: một primary CTA, logo, active tab indicator, và checkmark icons — và không có gì khác. Nếu bạn thấy mình với tay lấy tím cho component thứ ba, đó là tín hiệu để dùng charcoal thay thế. Điểm nhấn vàng duy nhất thậm chí còn được phân bổ hạn chế hơn: tối đa một decorative element mỗi section, luôn nhỏ, luôn hỗ trợ — không bao giờ cạnh tranh với tím.

## Similar Brands

- **Notion** — Cùng cách tiếp cận minimal-light canvas với một brand color duy nhất (màu đen của Notion) được phân bổ trên các actions, và bóng mềm tương tự trên card trắng với radii 16–20px
- **Linear** — Cùng kỷ luật typography chặt chẽ với một chromatic accent duy nhất (màu tím của Linear) và sử dụng rộng rãi grayscale cho cấu trúc — mặc dù Pitch biểu cảm hơn với hero gradient tím
- **Figma** — Chia sẻ ngôn ngữ marketing sản phẩm minh họa 3D (đối tượng hình học nổi, product UI screenshots trong card trắng) và bảng màu single-accent mạnh mẽ tương tự
- **Framer** — Cùng nhịp điệu dark-gradient hero → white content section, với brand color tràn ngập màn hình đầu tiên và sau đó rút lui vào không gian làm việc sạch sẽ bên dưới
- **Webflow** — Cả hai đều dùng brand color vivid single-hue (xanh của Webflow, tím của Pitch) làm interactive accent duy nhất trên nền gần trắng với độ cao mềm

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-violet: #6b53ff;
  --color-lighter-violet: #8d49f7;
  --color-deep-indigo: #371789;
  --color-solar-yellow: #ffd02c;
  --gradient-solar-yellow: linear-gradient(90deg, #ffd02c, #ff9e2c);
  --color-ember-orange: #ffa000;
  --color-slate-ink: #2b2a35;
  --color-carbon: #1e1d28;
  --color-steel: #3f4250;
  --color-fog: #6f7387;
  --color-ash: #95959a;
  --color-mist: #dddfe5;
  --color-marble: #f0eff4;
  --color-paper: #ffffff;
  --color-shadow-violet: #0a0359;
  --color-hero-stage: #5718eb;
  --gradient-hero-stage: linear-gradient(90deg, rgb(83, 24, 235), rgb(171, 110, 249));

  /* Typography — Font Families */
  --font-eina01: 'Eina01', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mark-pro: 'Mark Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.6;
  --tracking-caption: 1.3px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 1.6px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.6;
  --tracking-body-lg: 1.8px;
  --text-subheading: 22px;
  --leading-subheading: 1.4;
  --tracking-subheading: 2.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 2.4px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: 2.8px;
  --text-heading-lg: 42px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.42px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.44px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-120: 120px;
  --spacing-159: 159px;

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

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 26px;
  --radius-full: 56px;

  /* Named Radii */
  --radius-cards: 26px;
  --radius-small: 3px;
  --radius-badges: 20px;
  --radius-inputs: 6px;
  --radius-buttons: 20px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.15) 0px 3px 10px 0px;
  --shadow-xl: rgba(103, 110, 144, 0.2) 0px 8px 26px 0px;
  --shadow-xl-2: rgba(43, 42, 53, 0.25) 0px 6px 27px 0px;
  --shadow-xl-3: rgba(43, 42, 53, 0.5) 0px 6px 27px 0px;
  --shadow-xl-4: rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-marble: #f0eff4;
  --surface-paper: #ffffff;
  --surface-elevated-paper: #ffffff;
  --surface-hero-stage: #5718eb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-violet: #6b53ff;
  --color-lighter-violet: #8d49f7;
  --color-deep-indigo: #371789;
  --color-solar-yellow: #ffd02c;
  --color-ember-orange: #ffa000;
  --color-slate-ink: #2b2a35;
  --color-carbon: #1e1d28;
  --color-steel: #3f4250;
  --color-fog: #6f7387;
  --color-ash: #95959a;
  --color-mist: #dddfe5;
  --color-marble: #f0eff4;
  --color-paper: #ffffff;
  --color-shadow-violet: #0a0359;
  --color-hero-stage: #5718eb;

  /* Typography */
  --font-eina01: 'Eina01', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mark-pro: 'Mark Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.6;
  --tracking-caption: 1.3px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: 1.6px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.6;
  --tracking-body-lg: 1.8px;
  --text-subheading: 22px;
  --leading-subheading: 1.4;
  --tracking-subheading: 2.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: 2.4px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: 2.8px;
  --text-heading-lg: 42px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.42px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -1.44px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-120: 120px;
  --spacing-159: 159px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 26px;
  --radius-full: 56px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.15) 0px 3px 10px 0px;
  --shadow-xl: rgba(103, 110, 144, 0.2) 0px 8px 26px 0px;
  --shadow-xl-2: rgba(43, 42, 53, 0.25) 0px 6px 27px 0px;
  --shadow-xl-3: rgba(43, 42, 53, 0.5) 0px 6px 27px 0px;
  --shadow-xl-4: rgba(10, 3, 89, 0.3) 0px 20px 90px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
}
```