# Micro

> Micro — Style Reference

## Prompt Content

```
# Micro — Style Reference
> bình minh trên đồng cỏ số — một gradient chân trời êm dịu bên dưới là không gian làm việc tĩnh lặng, mang phong cách mực trên giấy.

**Theme:** light

Micro là một workspace năng suất mang cảm giác bình minh: bầu trời gradient từ xanh lam đến xanh ngọc mở đầu trang, sau đó chuyển xuống một neutral canvas ấm áp với màu nền trắng ngà và màu chữ gần như đen mực. Điểm nhấn typography đặc trưng là sự kết hợp giữa một display face editorial dày (perfectlyNineties) cho headline cỡ lớn với một font chữ neutral đa năng (haffer) cho product UI dày đặc — mang lại cho trang marketing sức nặng của trang bìa tạp chí và cho màn hình sản phẩm một mật độ dễ đọc, êm dịu. Màu sắc được dùng như dấu câu chức năng: một màu xanh lam azure (#518bdb) cho hành động, cùng một hệ thống accent pastel (mint, peach, lavender, teal-mist) cho các mảng nền mềm mại và một bảng màu icon đa sắc nhỏ (teal, hồng, đỏ, cam, xanh lá) báo hiệu kết nối và danh mục. Các component ưu tiên phẳng, có viền và đổ bóng nhẹ thay vì nâng cao mạnh; bán kính bo tròn tập trung ở 8px và 14px, với 18px cho các product card lớn hơn. Cảm giác tổng thể là một sản phẩm phần mềm được "thở" — thoáng đãng, thân thiện, hơi hoài niệm ở display type, nhưng chính xác trên các bề mặt sản phẩm giàu dữ liệu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ink Black | `#221f1c` | `--color-ink-black` | Văn bản chính, nền CTA tối, icon fill tối — màu gần đen ấm thay vì đen trung tính giúp palette không bị cảm giác lâm sàng |
| Paper White | `#f5f5f5` | `--color-paper-white` | Canvas trang, nền card, mảng nền mờ — màu trắng ngà ấm tạo nền tảng như giấy cho sản phẩm |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt product card nâng cao bên trong app UI (inbox, context graph nodes) — cao hơn Paper White một bậc |
| Stone Gray | `#797267` | `--color-stone-gray` | Văn bản phụ, icon strokes, body copy mờ — màu xám ấm cùng họ với Ink Black |
| Pebble | `#8c8a88` | `--color-pebble` | Văn bản cấp ba, trạng thái disabled, icon ít nhấn mạnh |
| Slate Edge | `#27272a` | `--color-slate-edge` | Viền mảnh trên card và input, divider mờ |
| Azure Action | `linear-gradient(to right in oklab, rgb(81, 139, 219) 0%, rgb(54, 186, 184) 100%)` | `--color-azure-action` | Nền hành động chính, link được focus, trạng thái active, accent icon chính — màu CTA có sắc duy nhất, đủ rực rỡ để nổi bật trên nền trung tính ấm; Nền gradient Hero (Azure Action → Teal Pulse, trái sang phải trong oklab) — hình ảnh mở đầu đặc trưng |
| Teal Pulse | `#36bab8` | `--color-teal-pulse` | Accent văn bản màu teal cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng lên thành màu CTA chính |
| Mint Wash | `#cbfbf1` | `--color-mint-wash` | Màu nền pastel mềm cho feature card và mảng highlight |
| Peach Wash | `#f8ebd8` | `--color-peach-wash` | Màu nền pastel mềm, đối trọng ấm với Mint Wash |
| Lavender Wash | `#ede9fe` | `--color-lavender-wash` | Màu nền pastel mềm cho các khối feature thay thế |
| Teal Mist | `#cff2ef` | `--color-teal-mist` | Bề mặt pha màu teal nhẹ, kết nối brand teal và neutral canvas |
| Coral Marker | `#ed6d68` | `--color-coral-marker` | Accent văn bản màu đỏ cho link, tag và cụm từ ngắn được nhấn mạnh |
| Amber Marker | `#e5a057` | `--color-amber-marker` | Accent icon ấm, màu danh mục trong bảng màu icon đa sắc |
| Orchid Marker | `#bf89cd` | `--color-orchid-marker` | Accent icon tông tím, màu danh mục, viền node trang trí trong context graph |
| Forest Edge | `#1a3a12` | `--color-forest-edge` | Viền xanh đậm cho viền của live-product mockup, accent thực vật sâu |
| Signal Green | `#3a6b2a` | `--color-signal-green` | Màu xanh lá cho nền highlight, dải trang trí và nhấn mạnh mềm phía sau nội dung. Dùng làm accent hỗ trợ, không phải màu trạng thái |
| Live Lime | `#7efa55` | `--color-live-lime` | Màu xanh lá cho nền highlight, dải trang trí và nhấn mạnh mềm phía sau nội dung. Dùng làm accent hỗ trợ, không phải màu trạng thái |

## Tokens — Typography

### perfectlyNineties — Display và editorial headline (hero, section H1/H2, câu marketing lớn) — một display face dày đặc những năm 70/80 mang lại cho trang sức nặng của trang bìa tạp chí. Tracking dương 0.02em ở kích thước lớn là một anti-trend có chủ đích: hầu hết display face hiện đại đều tight, font này thì thoáng. · `--font-perfectlynineties`
- **Thay thế:** Druk Wide, Climate Crisis, Recoleta, hoặc một heavy condensed serif như Playfair Display 900
- **Trọng lượng:** 400, 700, 800, 900
- **Kích thước:** 14px, 24px, 30px, 36px, 48px, 72px
- **Line height:** 1.00, 1.20, 1.25
- **Letter spacing:** 0.0200em
- **Vai trò:** Display và editorial headline (hero, section H1/H2, câu marketing lớn) — một display face dày đặc những năm 70/80 mang lại cho trang sức nặng của trang bìa tạp chí. Tracking dương 0.02em ở kích thước lớn là một anti-trend có chủ đích: hầu hết display face hiện đại đều tight, font này thì thoáng.

### haffer — Workhorse chính cho body, UI labels, button, nav, product chrome, nội dung card và brand mark hero 96px. Tracking tight -0.025em ở 24px+ tạo heading nhỏ gọn, tự tin; tracking 0.10em trên label eyebrow/uppercase 8-10px thêm nhịp điệu editorial. · `--font-haffer`
- **Thay thế:** Inter, Söhne, General Sans, hoặc Geist Sans
- **Trọng lượng:** 400, 500, 600, 700, 900
- **Kích thước:** 8px, 9px, 10px, 11px, 12px, 14px, 16px, 18px, 20px, 24px, 96px
- **Line height:** 1.00, 1.25, 1.33, 1.40, 1.43, 1.50, 1.56, 1.63
- **Letter spacing:** -0.0250em ở kích thước display; 0.10em ở kích thước micro/eyebrow
- **Vai trò:** Workhorse chính cho body, UI labels, button, nav, product chrome, nội dung card và brand mark hero 96px. Tracking tight -0.025em ở 24px+ tạo heading nhỏ gọn, tự tin; tracking 0.10em trên label eyebrow/uppercase 8-10px thêm nhịp điệu editorial.

### ui-monospace — Monospace cho timestamp, địa chỉ email, metadata kỹ thuật trong inbox rows và placeholder text AI prompt. Lựa chọn system-stack báo hiệu đây là dữ liệu, không phải văn xuôi. · `--font-ui-monospace`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc bất kỳ system monospace nào
- **Trọng lượng:** 400, 500
- **Kích thước:** 8px, 14px, 16px
- **Line height:** 1.43, 1.50, 1.71
- **Vai trò:** Monospace cho timestamp, địa chỉ email, metadata kỹ thuật trong inbox rows và placeholder text AI prompt. Lựa chọn system-stack báo hiệu đây là dữ liệu, không phải văn xuôi.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| eyebrow | 10px | 1.4 | 1px | `--text-eyebrow` |
| caption | 12px | 1.4 | — | `--text-caption` |
| body-sm | 14px | 1.5 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.4 | -0.6px | `--text-heading-sm` |
| heading | 30px | 1.25 | 0.6px | `--text-heading` |
| heading-lg | 48px | 1.2 | 0.96px | `--text-heading-lg` |
| display | 72px | 1 | 1.44px | `--text-display` |
| hero-mark | 96px | 1 | -2.4px | `--text-hero-mark` |

## Tokens — Spacing & Shapes

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

**Mật độ:** compact

### 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` |
| 48 | 48px | `--spacing-48` |
| 52 | 52px | `--spacing-52` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 192 | 192px | `--spacing-192` |
| 240 | 240px | `--spacing-240` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| pills | 9999px |
| inputs | 8px |
| buttons | 8px |
| nav-pills | 8px |
| large-cards | 18px |
| small-cards | 14px |
| feature-blocks | 18px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0p...` | `--shadow-subtle` |
| subtle-2 | `oklab(0.241527 0.00279061 0.00670661 / 0.065) 0px 0px 0px...` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px` | `--shadow-subtle-3` |
| md | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1)...` | `--shadow-md` |
| subtle-4 | `rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset` | `--shadow-subtle-4` |
| md-2 | `oklab(0 0 0 / 0.065) 0px 10px 15px -3px, oklab(0 0 0 / 0....` | `--shadow-md-2` |
| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |
| subtle-5 | `rgba(0, 0, 0, 0.15) 0px 1px 2px 0px` | `--shadow-subtle-5` |
| subtle-6 | `rgb(212, 212, 212) 0px 1px 0px 0px, rgb(208, 208, 208) 0p...` | `--shadow-subtle-6` |
| subtle-7 | `oklab(0.241527 0.00279061 0.00670661 / 0.1) 0px 0px 0px 1...` | `--shadow-subtle-7` |
| xl | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1)...` | `--shadow-xl` |
| subtle-8 | `rgba(0, 0, 0, 0.15) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle-8` |
| subtle-9 | `oklab(0 0 0 / 0.065) 0px 1px 3px 0px, oklab(0 0 0 / 0.065...` | `--shadow-subtle-9` |
| xl-2 | `oklab(0 0 0 / 0.15) 0px 25px 50px -12px` | `--shadow-xl-2` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 64px
- **Card padding:** 16px
- **Element gap:** 8px

## Components

### Dark Filled Button
**Vai trò:** Nút hành động chính trên nền sáng (Sign up, Get started)

Nền #221f1c (Ink Black), chữ #ffffff, radius 8px, padding 10px 16px, haffer 500 ở 14px, line-height 1.4. Tùy chọn inset 0 -2px 0 0 rgba(0,0,0,0.2) cho trạng thái pressed. Đảo ngược thành trắng-trên-tối khi dùng trên gradient hero.

### White Filled Button
**Vai trò:** Hành động phụ trên gradient hero (Talk to sales)

Nền #ffffff, chữ #221f1c, radius 8px, padding 10px 16px, haffer 500 ở 14px. Không viền, không shadow — dựa vào nền gradient để tạo độ tương phản.

### Ghost Text Button
**Vai trò:** Hành động cấp ba / nav (Log in, Learn more)

Nền trong suốt, chữ #221f1c (hoặc #ffffff trên nền tối), radius 8px, padding 8px 12px, haffer 500 ở 14px. Không viền nhìn thấy; dựa vào hover state để lộ affordance.

### Pill Nav Tab
**Vai trò:** Mục điều hướng thanh trên cùng (Product, Resources, Pricing, Careers)

Nền trong suốt, chữ #221f1c haffer 500 14px, icon chevron 6px phía sau màu #797267, padding 6px 12px, radius 8px. Trạng thái active: fill #f5f5f5. Nhẹ hơn và gọn hơn button — nav đọc như một hàng thì thầm, không phải tiếng hét.

### Product Card (App UI)
**Vai trò:** Inbox row, task row, bản ghi người/công ty bên trong sản phẩm

Nền #ffffff, viền 1px solid rgba(0,0,0,0.065), radius 14px, padding 12px 16px, haffer 400 ở 14px cho văn bản chính và #797267 cho timestamp phụ. Avatar/chữ cái đầu bên trái trong vòng tròn 32px, tùy chọn unread dot màu #518bdb.

### Context Graph Node
**Vai trò:** Thẻ dữ liệu nổi trong hình ảnh hóa 'personal context graph'

Nền #ffffff, radius 18px, padding 16px, haffer 500-700 ở 12-14px, viền accent 2-3px bằng một trong các marker color (Teal Pulse, Coral Marker, Orchid Marker, Azure Action). Kết nối bằng đường 1px mảnh màu #797267 với độ mờ 0.4. Màu viền accent là tín hiệu phân loại — cùng hình dạng dữ liệu, domain khác nhau.

### Soft Pastel Feature Block
**Vai trò:** Thẻ tính năng marketing với nền pha màu

Nền một trong các pastel washes (#cbfbf1, #f8ebd8, #ede9fe, #cff2ef), radius 18px, padding 32px, không viền, không shadow. Headline bằng haffer 600 ở 20-24px màu #221f1c, body hỗ trợ bằng haffer 400 ở 14px màu #797267. Phần fill pastel CHÍNH LÀ điểm nhấn thị giác — không cần icon hay hình minh họa bên trong.

### Search / Prompt Input
**Vai trò:** AI ask-bar ở đầu sản phẩm ('Ask Micro AI anything...') và trường tìm kiếm

Nền #ffffff, viền 1px solid #27272a với độ mờ thấp, radius 8px, padding 10px 14px, haffer 400 ở 14px, placeholder màu #8c8a88. Trạng thái focus: ring 2px màu #518bdb. Icon bên trái (search hoặc sparkle) màu #797267, tùy chọn icon mic bên phải.

### Sidebar Nav Item
**Vai trò:** Điều hướng thanh bên trái bên trong sản phẩm (Home, Inbox, People, Companies, Tasks)

Nền trong suốt, chiều cao row 20px, padding ngang 12px, radius 8px, haffer 400 14px màu #221f1c. Trạng thái active: fill #f5f5f5, trọng lượng haffer 500. Icon 16px dẫn đầu màu #797267 (active: #221f1c). Khoảng cách dọc rộng rãi — sidebar là chrome yên tĩnh, không phải tường tính năng.

### Badge / Tag
**Vai trò:** Thẻ danh mục, pill trạng thái (Important, VIPs, All DMs)

Nền trong suốt hoặc #f5f5f5, chữ #221f1c, radius 9999px, padding 4px 10px, haffer 500 ở 12px. Cho trạng thái có màu: nền bằng marker color với độ mờ 0.15, chữ bằng cùng marker color với độ mờ đầy đủ. Không viền.

### Logo Strip
**Vai trò:** Hàng logo khách hàng/nhà đầu tư để tạo bằng chứng xã hội

Một hàng ngang, 5-6 logo đơn sắc màu #221f1c, cách đều với khoảng cách 48-64px. Mỗi logo là một mark hình học đơn giản + wordmark ở 18-20px haffer 600. Không có thẻ nền — logo nổi trên canvas.

### Floating Audio Player
**Vai trò:** Widget media player góc dưới bên phải (thẻ track New Computer)

Nền #ffffff, radius 14px, shadow 0px 10px 15px -3px rgba(0,0,0,0.1), padding 8px 12px, rộng 280-320px. Album art 40px bên trái, tên track bằng haffer 600 12px #221f1c, nghệ sĩ bằng haffer 400 10px #797267, transport controls bên phải màu #797267 với một accent (play) màu #221f1c.

### Hero Product Mockup Container
**Vai trò:** Ảnh chụp màn hình sản phẩm nổi chồng lên bầu trời gradient và cánh đồng xanh bên dưới fold

Không có chrome thẻ nhìn thấy — ảnh chụp màn hình được trình bày edge-to-edge với shadow 0px 10px 15px nhẹ, corner radius 18px và viền 1px #1a3a12 (Forest Edge) tạo cảm giác như được đóng khung trên đồng cỏ. Màu viền là điểm đặc trưng: nó kết nối product UI với mặt đất xanh bên dưới.

### Section Eyebrow Pill
**Vai trò:** Nhãn nhỏ phía trên headline (ví dụ: 'Watch the launch video')

Nền #ffffff với độ mờ 0.9, radius 9999px, padding 4px 12px, haffer 500 ở 12px màu #221f1c, tùy chọn icon dẫn đầu 12px. Nổi phía trên headline với khoảng cách 16px.

## Do's and Don'ts

### Do
- Chỉ dùng gradient xanh lam→xanh ngọc trên hero; đây là viewport bão hòa duy nhất trong hệ thống và xác định phần mở đầu của brand
- Đặt hero và section display headline bằng perfectlyNineties ở 30-72px với tracking dương 0.02em — tracking thoáng là điểm đặc trưng
- Đặt body và product UI bằng haffer, không dùng display face — sự tương phản giữa editorial và neutral là bản sắc typography
- Dùng radius 8px cho button, input và nav; 14px cho product rows; 18px cho feature blocks và graph nodes — không pha trộn tùy tiện
- Giữ bề mặt sản phẩm #ffffff với viền 1px và shadow hai lớp nhẹ — không bao giờ dùng elevation nặng
- Sử dụng pastel washes (#cbfbf1, #f8ebd8, #ede9fe, #cff2ef) cho marketing feature blocks; để canvas giữ nguyên #f5f5f5
- Tô màu icon theo danh mục với Teal Pulse, Coral Marker, Amber Marker, Orchid Marker và Azure Action — không bao giờ dùng đơn sắc cho bộ icon

### Don't
- Không áp dụng gradient sky cho bất kỳ thứ gì khác ngoài đầu trang — lặp lại sẽ làm mất tác động mở đầu
- Không dùng perfectlyNineties cho body text, button, nav hoặc product UI — nó chỉ là display face và sẽ bị vỡ ở kích thước nhỏ
- Không bỏ qua viền 1px trên product card — hệ thống dựa vào hairline edges, không phải shadow, để xác định bề mặt
- Không dùng radius 4px trên feature card hoặc marketing blocks — 4px dành cho chrome nhỏ và icon, hệ thống phân cấp card bắt đầu từ 8px
- Không giới thiệu accent màu sắc mới ngoài bảng marker color đã đặt tên — hệ thống icon đa sắc là đóng
- Không căn giữa body copy trong product UI — căn trái dữ liệu; văn bản căn giữa duy nhất là hero headline và section H1
- Không dùng màu đen thuần #000000 cho văn bản — dùng #221f1c Ink Black; tông ấm là một phần của cảm giác mực trên giấy

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#f5f5f5` | Nền trang, lớp nền trắng ngà ấm |
| 1 | Card | `#ffffff` | Product UI cards, feature blocks, bảng nội dung nâng cao |
| 2 | Pastel Wash | `#cbfbf1` | Bề mặt pha màu mềm cho tính năng nổi bật và khối danh mục |
| 3 | Gradient Sky | `#518bdb` | Nền gradient chỉ dành cho hero, nơi duy nhất màu bão hòa lấp đầy viewport |

## Elevation

- **Default card:** `0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1)`
- **Bordered card:** `0px 0px 0px 1px oklab(0.24 0.003 0.007 / 0.065), 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1)`
- **Elevated product mockup / floating panel:** `0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1)`
- **Pressed button / active link:** `inset 0px -2px 0px 0px rgba(0,0,0,0.2)`

## Imagery

Hình ảnh thưa thớt và tập trung vào sản phẩm: không có lifestyle photography, không có stock imagery. Hero là gradient sky full-bleed phía trên cánh đồng xanh, với một product mockup nổi duy nhất chồng lên đường chân trời — sản phẩm là anh hùng. Các section tiếp theo dựa vào ảnh chụp màn hình product UI lớn (inbox, context graph) được trình bày dưới dạng thẻ nổi với shadow nhẹ. Context graph là hình ảnh đặc biệt nhất: một chòm sao các node dữ liệu trắng được kết nối bằng đường mảnh, mỗi node được viền bằng một marker color khác nhau, tạo hiệu ứng mạng lưới như hình minh họa. Icon là các mark đa sắc line-and-fill trong brand palette. Một widget audio player nhỏ (album art + transport) nằm ở góc dưới bên phải như một UI element dai dẳng, gần như trang trí. Không 3D, không hệ thống minh họa — sự phong phú về thị giác đến từ data visualization và product UI.

## Layout

Trang có max-width ~1200px căn giữa, với hero phá vỡ full-bleed cho gradient sky. Bản thân hero là một chồng dọc: eyebrow pill căn giữa, display headline cỡ lớn căn giữa bằng perfectlyNineties, subhead căn giữa bằng haffer, cặp button căn giữa, sau đó product mockup nổi ở cạnh dưới, chồng lên quá trình chuyển tiếp sang canvas trắng bên dưới. Bên dưới hero, các section theo một nhịp điệu nhất quán: section H1 căn giữa, copy hỗ trợ căn giữa, sau đó nội dung được sắp xếp trong lưới 2 cột (văn bản + hình ảnh) hoặc lưới card 3-4 cột. Context graph section là layout đặc biệt nhất — một data visualization ngang rộng lấp đầy chiều rộng nội dung, tiếp theo là lưới 4 cột tính năng bên dưới. Social proof là một hàng logo đơn sắc căn giữa. Điều hướng là thanh trên cùng với wordmark căn trái, nav pills căn giữa và auth buttons căn phải. Bản thân product UI, được hiển thị trong ảnh chụp màn hình, có sidebar cố định bên trái (~200px), thanh tiện ích trên cùng và khu vực nội dung chính — một shell ứng dụng năng suất 3 vùng cổ điển.

## Agent Prompt Guide

Tham chiếu màu nhanh:
- text: #221f1c (Ink Black)
- background: #f5f5f5 (Paper White)
- card surface: #ffffff
- border: #27272a (Slate Edge) với độ mờ thấp
- accent: #518bdb (Azure Action)
- primary action: #518bdb (filled action)

Ví dụ Component Prompts:

1. Tạo một hero section: nền gradient xanh lam-xanh ngọc full-bleed (linear-gradient(to right, #518bdb, #36bab8)). Eyebrow pill căn giữa (#ffffff với độ mờ 0.9, radius 9999px, 12px haffer 500 #221f1c). Headline bằng perfectlyNineties 700 ở 72px, #ffffff, letter-spacing 1.44px, line-height 1.0, hiển thị 'One place for work that works for you'. Subhead bằng haffer 400 ở 18px, #ffffff với độ mờ 0.9, line-height 1.5. Cặp button: dark filled 'Sign up' (nền #221f1c, chữ #ffffff, radius 8px, padding 10px 16px) và white filled 'Talk to sales' (nền #ffffff, chữ #221f1c, cùng hình dạng). Khoảng cách 32px giữa các button.

2. Tạo một Primary Action Button: nền #518bdb, chữ #f5f5f5, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính.

3. Tạo một soft pastel feature block: nền #cbfbf1 (hoặc luân phiên qua #f8ebd8, #ede9fe, #cff2ef), radius 18px, padding 32px, không viền, không shadow. Headline bằng haffer 600 20px #221f1c, body bằng haffer 400 14px #797267. Icon tùy chọn, 24px, màu #221f1c.

4. Tạo một context graph node: nền trắng, radius 18px, padding 16px, viền solid 2px bằng một marker color (Teal Pulse #36bab8, Coral Marker #ed6d68, hoặc Azure Action #518bdb). Tiêu đề bằng haffer 600 12px #221f1c, 2-3 hàng metadata bằng haffer 400 11px #797267. Kết nối với các node khác bằng đường 1px màu #797267 với độ mờ 0.4.

5. Tạo một search input: nền trắng, viền 1px solid rgba(0,0,0,0.1), radius 8px, padding 10px 14px, haffer 400 14px, placeholder màu #8c8a88. Icon search 16px dẫn đầu màu #797267. Trạng thái focus: ring 2px màu #518bdb.

## Similar Brands

- **Notion** — Cùng canvas trắng ngà ấm với chữ gần như đen mực, hero tập trung vào sản phẩm với một headline đậm duy nhất và dựa vào viền 1px tinh tế thay vì shadow nặng
- **Linear** — Mật độ product UI nhỏ gọn, dark filled primary button trên nền sáng và hệ thống accent đa sắc được dùng theo danh mục trên icon và tag
- **Arc Browser** — Gradient hero đậm kết hợp với bề mặt sản phẩm yên tĩnh hơn bên dưới và sẵn sàng dùng một display typeface đặc biệt (không chỉ là một geometric sans khác) cho cá tính thương hiệu
- **Figma** — Feature blocks pha màu pastel nổi trên neutral canvas, với product UI tự làm phần nặng nhọc về thị giác thay vì hình minh họa hoặc nhiếp ảnh

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink-black: #221f1c;
  --color-paper-white: #f5f5f5;
  --color-pure-white: #ffffff;
  --color-stone-gray: #797267;
  --color-pebble: #8c8a88;
  --color-slate-edge: #27272a;
  --color-azure-action: #518bdb;
  --gradient-azure-action: linear-gradient(to right in oklab, rgb(81, 139, 219) 0%, rgb(54, 186, 184) 100%);
  --color-teal-pulse: #36bab8;
  --color-mint-wash: #cbfbf1;
  --color-peach-wash: #f8ebd8;
  --color-lavender-wash: #ede9fe;
  --color-teal-mist: #cff2ef;
  --color-coral-marker: #ed6d68;
  --color-amber-marker: #e5a057;
  --color-orchid-marker: #bf89cd;
  --color-forest-edge: #1a3a12;
  --color-signal-green: #3a6b2a;
  --color-live-lime: #7efa55;

  /* Typography — Font Families */
  --font-perfectlynineties: 'perfectlyNineties', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haffer: 'haffer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-eyebrow: 10px;
  --leading-eyebrow: 1.4;
  --tracking-eyebrow: 1px;
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.6px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: 0.6px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 0.96px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: 1.44px;
  --text-hero-mark: 96px;
  --leading-hero-mark: 1;
  --tracking-hero-mark: -2.4px;

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

  /* 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-48: 48px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-192: 192px;
  --spacing-240: 240px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-2xl-2: 22px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-pills: 9999px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;
  --radius-nav-pills: 8px;
  --radius-large-cards: 18px;
  --radius-small-cards: 14px;
  --radius-feature-blocks: 18px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-2: oklab(0.241527 0.00279061 0.00670661 / 0.065) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;
  --shadow-md-2: oklab(0 0 0 / 0.065) 0px 10px 15px -3px, oklab(0 0 0 / 0.065) 0px 4px 6px -4px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-subtle-5: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
  --shadow-subtle-6: rgb(212, 212, 212) 0px 1px 0px 0px, rgb(208, 208, 208) 0px 4px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.12) 0px 8px 16px -4px;
  --shadow-subtle-7: oklab(0.241527 0.00279061 0.00670661 / 0.1) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 25px 50px -12px;
  --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-subtle-8: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 3px;
  --shadow-subtle-9: oklab(0 0 0 / 0.065) 0px 1px 3px 0px, oklab(0 0 0 / 0.065) 0px 1px 2px -1px;
  --shadow-xl-2: oklab(0 0 0 / 0.15) 0px 25px 50px -12px;

  /* Surfaces */
  --surface-canvas: #f5f5f5;
  --surface-card: #ffffff;
  --surface-pastel-wash: #cbfbf1;
  --surface-gradient-sky: #518bdb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink-black: #221f1c;
  --color-paper-white: #f5f5f5;
  --color-pure-white: #ffffff;
  --color-stone-gray: #797267;
  --color-pebble: #8c8a88;
  --color-slate-edge: #27272a;
  --color-azure-action: #518bdb;
  --color-teal-pulse: #36bab8;
  --color-mint-wash: #cbfbf1;
  --color-peach-wash: #f8ebd8;
  --color-lavender-wash: #ede9fe;
  --color-teal-mist: #cff2ef;
  --color-coral-marker: #ed6d68;
  --color-amber-marker: #e5a057;
  --color-orchid-marker: #bf89cd;
  --color-forest-edge: #1a3a12;
  --color-signal-green: #3a6b2a;
  --color-live-lime: #7efa55;

  /* Typography */
  --font-perfectlynineties: 'perfectlyNineties', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-haffer: 'haffer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-eyebrow: 10px;
  --leading-eyebrow: 1.4;
  --tracking-eyebrow: 1px;
  --text-caption: 12px;
  --leading-caption: 1.4;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.4;
  --tracking-heading-sm: -0.6px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: 0.6px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 0.96px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: 1.44px;
  --text-hero-mark: 96px;
  --leading-hero-mark: 1;
  --tracking-hero-mark: -2.4px;

  /* 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-48: 48px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-192: 192px;
  --spacing-240: 240px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-2xl-2: 22px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-2: oklab(0.241527 0.00279061 0.00670661 / 0.065) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;
  --shadow-md-2: oklab(0 0 0 / 0.065) 0px 10px 15px -3px, oklab(0 0 0 / 0.065) 0px 4px 6px -4px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-subtle-5: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
  --shadow-subtle-6: rgb(212, 212, 212) 0px 1px 0px 0px, rgb(208, 208, 208) 0px 4px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.12) 0px 8px 16px -4px;
  --shadow-subtle-7: oklab(0.241527 0.00279061 0.00670661 / 0.1) 0px 0px 0px 1px, oklab(0 0 0 / 0.25) 0px 25px 50px -12px;
  --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-subtle-8: rgba(0, 0, 0, 0.15) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 3px;
  --shadow-subtle-9: oklab(0 0 0 / 0.065) 0px 1px 3px 0px, oklab(0 0 0 / 0.065) 0px 1px 2px -1px;
  --shadow-xl-2: oklab(0 0 0 / 0.15) 0px 25px 50px -12px;
}
```