# Paradigm

> Paradigm — Style Reference

## Prompt Content

```
# Paradigm — Style Reference
> midnight lab notebook opening to daylight — màn hình tối đầu tiên mở ra một trang scroll sáng, giàu dữ liệu.

**Theme:** light

Paradigm mở đầu trong bầu không khí đài quan sát tối — canvas gần như đen, display type serif trắng, và một bảng dữ liệu trực tiếp đã chứng minh sản phẩm — sau đó tan dần vào giao diện nghiên cứu ban ngày với giấy trắng, bề mặt pha màu nhẹ, và pastel status badges. Điểm nhấn đặc trưng là Atacama VAR serif ở 44–54px với tracking -0.06em, kết hợp với PP Neue Montreal — font chữ làm việc chính cho toàn bộ UI ở 14–22px với tabular numerals. Màu sắc được dùng có chừng mực: một màu xanh dương rực rỡ (#0a33ff) làm điểm nhấn thương hiệu qua active states và step indicators, trạng thái được thể hiện qua sáu cặp badge dark-ink + pastel-wash (forest, sapphire, mulberry, amber, crimson, plum), phần còn lại của hệ thống sống trong các gam xám ấm và lạnh được tinh chỉnh kỹ lưỡng. Các component trông như dụng cụ nghiên cứu — góc 4px, viền mảnh (hairline borders), hiệu ứng white inner-glow đặc trưng trên các product mockup cards, và gần như không có drop shadows.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Midnight Ink | `#080b12` | `--color-midnight-ink` | Primary text, hero background, card borders, table rules — màu gần như đen có tính cấu trúc, neo cả vùng tối và sáng |
| Paper | `#ffffff` | `--color-paper` | Page background, card surfaces, inverted button fill trong dark hero |
| Fog | `#f6f7f8` | `--color-fog` | Bề mặt nâng nhẹ cho secondary panels, table zebra rows, input wells |
| Pearl | `#edeef1` | `--color-pearl` | Nền của quiet buttons, lớp phủ màu cho các thành phần lồng nhau |
| Stone | `#d9d9d9` | `--color-stone` | Table column dividers, viền trung tính (neutral hairline borders) |
| Lavender Mist | `#dbdbee` | `--color-lavender-mist` | Bề mặt bảng có pha màu và viền data-grid chủ đạo — một đường kẻ tím nhạt phân biệt giao diện sản phẩm với các gam xám thông thường |
| Mist | `#b5b9c4` | `--color-mist` | Viền sáng trên secondary controls, list separators |
| Pewter | `#9898ae` | `--color-pewter` | Viền lạnh trung bình cho outlined buttons và inputs |
| Steel | `#848a9c` | `--color-steel` | Viền xám lạnh được dùng với tần suất cực cao (392) — màu đường kẻ làm việc chính cho các phân chia cấu trúc |
| Smoke | `#acacae` | `--color-smoke` | Icon stroke và body text mờ trên bề mặt sáng |
| Ash | `#9d9ea1` | `--color-ash` | Icon mờ, placeholder text, inactive controls |
| Iron | `#606167` | `--color-iron` | Body text cấp độ thứ hai, icon stroke weight |
| Graphite | `#6c6d73` | `--color-graphite` | Body text cấp độ ba, metadata hỗ trợ |
| Slate | `#4f535e` | `--color-slate` | Viền thứ cấp đậm, card outline emphasis, footer text |
| Charcoal | `#2b2b2c` | `--color-charcoal` | Chữ đậm cho body emphasis trên nền sáng |
| Electric Iris | `#0a33ff` | `--color-electric-iris` | Brand accent — active tab indicator, step pill, hành động Enrich, selected row check, brand wordmark dot — điểm nhấn màu duy nhất trong một hệ thống trung tính |
| Periwinkle | `#7f90ce` | `--color-periwinkle` | Muted action fill, secondary blue surfaces, desaturated hover state cho brand blue |
| Hero Dawn | `linear-gradient(180deg, #010b18 0%, #010818 16%, #103b91 49%, #4c7de8 78%, #bad0ff 97%)` | `--color-hero-dawn` | Điểm cuối của hero gradient — phần sâu nhất của nền xanh chuyển từ tối sang sáng |
| Sky Whisper | `#e2efff` | `--color-sky-whisper` | Nền của info badge |
| Sapphire Ink | `#061353` | `--color-sapphire-ink` | Chữ đậm và viền của info badge |
| Mint Whisper | `#e4f3e2` | `--color-mint-whisper` | Nền của success badge |
| Forest Ink | `#03350f` | `--color-forest-ink` | Điểm nhấn trạng thái xanh cho badges, validation surfaces, và short status labels |
| Sprout Whisper | `#d6ffe0` | `--color-sprout-whisper` | Nền thay thế cho success badge nhạt |
| Saffron Whisper | `#faeed1` | `--color-saffron-whisper` | Nền của warning badge |
| Amber Ink | `#423301` | `--color-amber-ink` | Chữ đậm và viền của warning badge |
| Blossom Whisper | `#ffe6f7` | `--color-blossom-whisper` | Nền của pink/magenta tag badge — category label |
| Mulberry Ink | `#600537` | `--color-mulberry-ink` | Chữ đậm và viền của pink/magenta tag badge |
| Plum Ink | `#21034d` | `--color-plum-ink` | Chữ đậm và viền của deep violet tag badge — màu category thay thế |
| Crimson Ink | `#580101` | `--color-crimson-ink` | Điểm nhấn trạng thái đỏ cho badges, validation surfaces, và short status labels |
| Apricot Whisper | `#fee8dd` | `--color-apricot-whisper` | Nền của orange/copper tag badge |
| Russet Ink | `#581c01` | `--color-russet-ink` | Chữ đậm và viền của orange/copper tag badge |

## Tokens — Typography

### Atacama VAR — Display serif cho tất cả section và hero headlines từ 44px trở lên — weight editorial 317–370 mang phong cách research-journal thay vì marketing, và tracking -0.06em thắt chặt các chữ hoa rộng thành một khối tự tin · `--font-atacama-var`
- **Thay thế:** Tiempos Text, Lora, hoặc Source Serif Pro
- **Weights:** 317, 370, 400
- **Kích thước:** 44px, 48px, 54px
- **Line height:** 1.0–1.2
- **Letter spacing:** -0.06em ở 44–48px, -0.05em ở 54px
- **Vai trò:** Display serif cho tất cả section và hero headlines từ 44px trở lên — weight editorial 317–370 mang phong cách research-journal thay vì marketing, và tracking -0.06em thắt chặt các chữ hoa rộng thành một khối tự tin

### PP Neue Montreal — Font UI làm việc chính — body copy, buttons, nav, badges, table cells, và pre-headline labels. Weight 450 (một nửa bước hiếm gặp) là mặc định cho các thành phần tương tác, nằm giữa regular và medium để tạo sự tiết chế · `--font-pp-neue-montreal`
- **Thay thế:** Inter, Söhne, hoặc General Sans
- **Weights:** 400, 450, 500
- **Kích thước:** 12px, 13px, 14px, 15px, 16px, 17px, 18px, 21px, 22px, 160px
- **Line height:** 1.2–1.6
- **Letter spacing:** -0.01em body, 0.14–0.15em trên tất cả chữ hoa eyebrow labels (THE OLD WAY, WITH PARADIGM)
- **OpenType features:** `"tnum" on, "ss01" off`
- **Vai trò:** Font UI làm việc chính — body copy, buttons, nav, badges, table cells, và pre-headline labels. Weight 450 (một nửa bước hiếm gặp) là mặc định cho các thành phần tương tác, nằm giữa regular và medium để tạo sự tiết chế

### Inter — Secondary UI text — table cells chật hẹp, micro-labels, và các cột số liệu dày đặc nơi PP Neue Montreal được thay bằng Inter hẹp hơn để tiết kiệm không gian ngang · `--font-inter`
- **Thay thế:** Inter (đã có sẵn trên Google Fonts)
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 9px, 10px, 11px, 12px, 13px, 14px, 15px
- **Line height:** 1.2–1.6
- **Letter spacing:** -0.006em đến -0.02em body, 0.02em eyebrow
- **Vai trò:** Secondary UI text — table cells chật hẹp, micro-labels, và các cột số liệu dày đặc nơi PP Neue Montreal được thay bằng Inter hẹp hơn để tiết kiệm không gian ngang

### Suisse Intl — Body fallback hiếm khi dùng, xuất hiện trong micro-copy nơi letter-spacing 0.08em tạo ra giọng văn thể chế nhẹ nhàng · `--font-suisse-intl`
- **Thay thế:** Söhne hoặc Inter
- **Weights:** 400
- **Kích thước:** 14px
- **Line height:** 1.2
- **Letter spacing:** 0.0100em, 0.0800em
- **Vai trò:** Body fallback hiếm khi dùng, xuất hiện trong micro-copy nơi letter-spacing 0.08em tạo ra giọng văn thể chế nhẹ nhàng

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | -0.12px | `--text-caption` |
| body-sm | 14px | 1.5 | -0.14px | `--text-body-sm` |
| body | 16px | 1.5 | -0.16px | `--text-body` |
| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |
| heading-sm | 21px | 1.3 | -0.21px | `--text-heading-sm` |
| heading-lg | 44px | 1.1 | -2.64px | `--text-heading-lg` |
| display | 54px | 1 | -2.7px | `--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` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 120 | 120px | `--spacing-120` |
| 188 | 188px | `--spacing-188` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tabs | 100px |
| cards | 4px |
| badges | 4px |
| buttons | 4px |
| feature-cards | 16px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| lg | `rgb(255, 255, 255) 0px 0px 24px 0px inset` | `--shadow-lg` |
| subtle | `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | `--shadow-subtle-2` |
| subtle-3 | `rgba(76, 120, 250, 0.14) 0px 0px 0px 3px` | `--shadow-subtle-3` |
| xl | `rgba(0, 0, 0, 0.09) 0px 4px 40px 0px` | `--shadow-xl` |

### Layout

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

## Components

### Dark Hero Section
**Vai trò:** Viewport mở đầu với bằng chứng sản phẩm

Nền full-bleed #080b12, nội dung bên trong rộng 1200px. Căn trái: headline display Atacama VAR 54px màu #ffffff, subhead PP Neue Montreal 18px màu xám nhạt tương đương #4f535e. Hai CTA cạnh nhau — white filled 'Request a demo →' và ghost 'Try now'. Bên dưới fold, một hàng tabs (Deal Sourcing active) và data table mockup tràn cạnh (edge-to-edge) với nền bảng pha màu #dbdbee nhẹ.

### Hero Primary Button
**Vai trò:** Hành động chính trong dark hero

Nền filled white (#ffffff), chữ #080b12, radius 4px, weight 450 PP Neue Montreal ở 14px, padding dọc 8px / ngang 16px, mũi tên phải tùy chọn (→). Tracking -0.01em. Nằm trên nền dark hero nên sự đảo ngược màu tự làm nhiệm vụ chính — không shadow, không border.

### Hero Secondary Button
**Vai trò:** Hành động phụ trong dark hero

Nền trong suốt, chữ #ffffff, radius 4px, weight 450 PP Neue Montreal ở 14px, padding dọc 8px / ngang 16px. Trọng lượng thị giác nhẹ hơn khiến nó trông như lựa chọn ít cam kết, đi kèm với primary filled button.

### Blue Accent Button
**Vai trò:** Hành động có màu duy nhất trong hệ thống (Enrich, Step pills)

Nền filled #0a33ff, chữ #ffffff, radius 4px, weight 500 PP Neue Montreal ở 13–14px, padding dọc 6px / ngang 12px. Dùng cho hành động 'Enrich' trên data tables và active step indicator. Chỉ dùng một cái trên mỗi bề mặt — đây là fill bão hòa duy nhất của hệ thống.

### Section Heading
**Vai trò:** Display heading trên các section nền sáng

Atacama VAR weight 317–370 ở 44–54px, màu #080b12, letter-spacing -0.06em đến -0.05em, line-height 1.0–1.1. Weight nhẹ bất thường cho kích thước lớn như vậy là lựa chọn phá vỡ quy ước — hầu hết các site dùng 600–700 ở đây, weight thì thầm tạo ra uy quyền thông qua sự tiết chế.

### Eyebrow Label
**Vai trò:** Nhãn chữ hoa đặt phía trên tiêu đề section

PP Neue Montreal weight 500, 12px, letter-spacing 0.14em, màu #6c6d73. Nằm cách section heading 16–24px phía trên, tạo lối vào dọc hai bước cho mỗi section.

### Problem List Item
**Vai trò:** Danh sách có dấu X trong section 'The Old Way'

Ký tự X mảnh màu xám #848a9c, body PP Neue Montreal 16px weight 400 màu #2b2b2c, khoảng cách dọc 8px giữa các item. Biểu tượng chéo được render dưới dạng SVG đơn giản, không phải emoji — stroke weight ~1.5px.

### Solution List Item
**Vai trò:** Danh sách có dấu check trong section 'With Paradigm'

Ký tự check màu #0a33ff, body PP Neue Montreal 16px weight 400 màu #2b2c2c, khoảng cách dọc 8px. Sự chuyển đổi từ X xám sang ✓ xanh là toàn bộ luận điểm thị giác của section này.

### Category Tag Badge
**Vai trò:** Nhãn phân loại nội dòng trong data tables

Radius 4px, padding dọc 2px / ngang 8px. Nền là pastel wash nhạt (#ffe6f7, #e2efff, #e4f3e2, #faeed1) và chữ + viền là dark ink tương ứng (#600537, #061353, #03350f, #423301). PP Neue Montreal 12px weight 500. Badge hai màu (chữ tối trên nền pastel) là kênh thể hiện màu sắc duy nhất trong hệ thống.

### Status Fit Pill
**Vai trò:** Chỉ báo mức độ phù hợp của deal (Highest / High / Low)

Radius 4px, padding dọc 4px / ngang 8px, PP Neue Montreal 12px weight 500. 'Highest' và 'High' dùng chữ Forest Ink (#03350f) trên viền mềm; 'Low' dùng Crimson Ink (#580101). Pill được thiết kế cố tình nhẹ nhàng hơn badge đầy đủ — nó nằm nội dòng trong một hàng dữ liệu dày đặc.

### Tabs Row
**Vai trò:** Điều hướng danh mục phía trên data table

Pill radius 100px trên thanh trong suốt. Tab không active: PP Neue Montreal 14px weight 450 màu #6c6d73 với viền hairline 1px #b5b9c4. Tab active: cùng kích thước nhưng chữ #080b12 với viền 1px #080b12 và nền fill #ffffff. Hình dạng pill là điểm phá vỡ duy nhất so với hình học 4px của hệ thống.

### Data Table
**Vai trò:** Giao diện sản phẩm chính

Table toàn chiều rộng trên nền #ffffff với đường kẻ hàng 1px #dbdbee (46+ lần sử dụng xác nhận đây là đường kẻ có pha màu có chủ đích). Hàng header: PP Neue Montreal 13px weight 500 màu #6c6d73, cell nội dung: 14px weight 400 màu #080b12 với tabular numerals (tnum). Chiều cao hàng ~44px, cell padding dọc 9–12px. Cột đầu tiên dùng checkbox vuông #0a33ff trong hàng được chọn.

### Step Indicator
**Vai trò:** Step pills tuần tự trong section 'Encode your best thinking'

Radius 100px. Bước active: filled #0a33ff với nhãn 'Step 1' màu #ffffff. Các bước không active: fill #ffffff với viền 1px #b5b9c4 và chữ #2b2b2c. PP Neue Montreal 13px weight 500, padding dọc 6px / ngang 12px. Trạng thái active là nơi duy nhất ngoài hero mà #0a33ff xuất hiện dưới dạng fill.

### Product Mockup Card
**Vai trò:** Ảnh chụp màn hình sản phẩm được nhúng trong các section nội dung

Bề mặt #ffffff, radius 4px, elevation đặc trưng: rgb(255,255,255) 0 0 24px inset — một hiệu ứng phát sáng bên trong màu trắng khiến card như nằm trên một nguồn sáng mềm từ bên trong. Thường kết hợp với gradient xanh nhẹ 135deg (rgb(123,149,196) → rgb(223,236,255)) làm nền card, tạo cho product mockups chất lượng màn hình mờ.

### Trust Logo Bar
**Vai trò:** Dải logo khách hàng — bằng chứng xã hội

Dải màu #f6f7f8 nhạt, căn giữa. Eyebrow text 'Trusted by 10,000+ decision makers...' bằng PP Neue Montreal 14px weight 400 màu #6c6d73. Logo là đơn sắc #080b12, được render ở chiều cao đồng nhất ~24px, cách nhau 64–80px trong một hàng ngang duy nhất.

## Do's and Don'ts

### Nên làm
- Dùng Atacama VAR cho mọi display heading từ 44px trở lên ở weight 317–370 với tracking -0.06em — serif weight nhẹ là lựa chọn typographic định hình hệ thống
- Dùng border-radius 4px trên tất cả buttons, cards, badges, và inputs; chỉ dành 100px cho tabs và step pills
- Luôn ghép mỗi status badge dưới dạng chữ đậm bão hòa + viền 1px cùng màu trên nền pastel nhạt — không bao giờ đảo ngược (không dùng fill tối với chữ sáng)
- Áp dụng white inner-glow 24px (rgb(255,255,255) 0 0 24px inset) trên bất kỳ product mockup card nào — đây là elevation đặc trưng
- Bật tabular numerals (tnum) trên PP Neue Montreal cho tất cả dữ liệu số trong tables và stat blocks
- Dùng #0a33ff một cách tiết kiệm — một điểm nhấn trên mỗi bề mặt, chỉ trên hành động Enrich, active tab, active step, và selected row check
- Dùng letter-spacing 0.14–0.15em trên tất cả eyebrow labels 12px PP Neue Montreal weight 500 phía trên section headings

### Không nên làm
- Không dùng pill buttons tròn trên cards hoặc actions — góc 4px là hình học của hệ thống, pills chỉ dành cho tabs và step indicators
- Không dùng drop shadows để tạo chiều sâu — chiều sâu đến từ white inner-glow và nền gradient xanh 135deg, không phải từ elevation
- Không dùng #0a33ff làm nền CTA filled trên landing sections — chỉ dành cho các hành động trong sản phẩm và active states
- Không dùng emoji hoặc icon đa màu có fill — icons là SVG đường nét mảnh (stroke weight ~1.5px), đơn sắc #080b12 hoặc #6c6d73
- Không căn giữa body text hoặc nội dung section — nhịp điệu bố cục là căn trái với hình ảnh đồng hành bất đối xứng
- Không thêm màu bão hòa mới — các kênh màu duy nhất là #0a33ff và sáu màu dark-ink badge; mọi thứ khác nằm trong gam xám ấm và lạnh
- Không dùng auto-animation hoặc hiệu ứng kích hoạt bằng scroll — hệ thống không có tính chuyển động và dựa vào bố cục tĩnh
- Không đặt display headings bằng PP Neue Montreal hoặc Inter — Atacama VAR serif là bắt buộc cho bất kỳ text nào từ 44px trở lên

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Paper | `#ffffff` | Nền trang mặc định và bề mặt card chính |
| 1 | Fog | `#f6f7f8` | Nâng nhẹ cho trust bars, footer bands, và secondary panels |
| 2 | Lavender Mist | `#dbdbee` | Bề mặt pha màu cho phần bên trong data table — màu tím nhạt báo hiệu 'đây là môi trường dữ liệu' mà không mang tính trang trí |
| 3 | Midnight | `#080b12` | Nền hero và dark sections — neo giữ những khoảnh khắc ấn tượng nhất của hệ thống |

## Elevation

- **Product Mockup Card:** `rgb(255, 255, 255) 0px 0px 24px 0px inset`
- **Standard Card:** `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px`
- **Badge:** `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px`
- **Focus Ring:** `rgba(76, 120, 250, 0.14) 0px 0px 0px 3px`
- **Elevated Feature Card:** `rgba(0, 0, 0, 0.09) 0px 4px 40px 0px`

## Imagery

Hình ảnh do sản phẩm dẫn dắt, không phải phong cách sống. Trang web nhúng các ảnh chụp màn hình thực tế của data table và company profile đã được làm giàu bên trong khung card, với white inner-glow đặc trưng khiến chúng trông như màn hình mờ. Không có ảnh chụp người, không có 3D render trừu tượng, không có stock illustrations. Brand mark là một hình vuông nhỏ màu tối với một glyph ở giữa. Icons xuyên suốt là SVG đường nét mảnh (stroke weight ~1.5px), đơn sắc #080b12 hoặc #6c6d73. Trust logos được render dưới dạng vector marks đơn sắc #080b12. Mật độ thị giác thấp — text và cấu trúc dữ liệu mang trang, hình ảnh đóng vai trò bằng chứng hỗ trợ chứ không phải trang trí.

## Layout

Trang sử dụng bố cục có giới hạn max-width 1200px với các section cách nhau 80px dọc. Hero là full-bleed #080b12 với nội dung căn trái (headline trái, subhead và CTAs bên dưới), chuyển tiếp qua một data table có tab tràn cạnh (edge-to-edge). Các section nội dung tuân theo nhịp điệu xen kẽ chặt chẽ: text-trái/hình-phải ('The Old Way') sau đó hình-trái/text-phải ('With Paradigm'), mỗi section được neo bởi heading Atacama VAR 44–54px, eyebrow chữ hoa 12px phía trên, và 4 list items ngắn bên dưới. Trust logo bar là một hàng ngang căn giữa trên dải màu #f6f7f8. Step section là headline căn giữa phía trên một hàng ngang gồm ba step pills. Navigation là thanh trên cùng tối giản: brand mark trái, bốn nav items giữa, 'Log in' text và 'Request a demo' outlined button phải. Toàn bộ hệ thống tuân thủ grid — không masonry, không panel chồng lấn, không bố cục thử nghiệm bất đối xứng.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #080b12
- background: #ffffff
- surface tint: #f6f7f8
- border (table/data): #dbdbee
- border (neutral): #b5b9c4
- accent: #0a33ff
- primary action: #7f90ce (filled action)

**3-5 Ví dụ Component Prompts**

1. Tạo một Primary Action Button: nền #7f90ce, chữ #020202, radius 9999px, padding pill gọn. Dùng kiểu filled này cho CTA chính.

2. **Data Table Row** — Table toàn chiều rộng trên #ffffff, đường kẻ hàng 1px #dbdbee, chiều cao hàng ~44px, cell padding dọc 12px. Header: PP Neue Montreal 13px weight 500, #6c6d73, bật tnum. Body cell: 14px weight 400, #080b12. Status cell dùng pill radius 4px: padding 4px 8px, 12px weight 500, chữ Forest Ink #03350f với viền 1px #03350f cho 'Highest'/'High', Crimson Ink #580101 cho 'Low'. Cell cạnh phải chứa nút Enrich filled #0a33ff: radius 4px, padding 6px 12px, 13px weight 500, chữ #ffffff.

3. **Section với Eyebrow + Heading + Checklist** — Nền #ffffff sáng, max-width 1200px. Eyebrow: PP Neue Montreal 12px weight 500, letter-spacing 0.14em, #6c6d73, 24px bên dưới là heading Atacama VAR 48px weight 370 màu #080b12, letter-spacing -2.88px, line-height 1.1. Bên dưới: 4 list items với row gap 8px, mỗi item PP Neue Montreal 16px weight 400 màu #2b2b2c. List marker là SVG check màu #0a33ff (stroke 1.5px) cho solution sections, hoặc X mảnh màu #848a9c cho problem sections.

4. **Product Mockup Card** — Radius 4px, bề mặt #ffffff, shadow stack: rgb(255,255,255) 0 0 24px inset (inner glow đặc trưng). Nền tùy chọn dùng linear-gradient(135deg, #7b95c4, #dfecff) ở độ mờ thấp. Card chứa ảnh chụp màn hình sản phẩm lấp đầy bên trong với padding inset 16px xung quanh. Bên phải hoặc trái card, một section heading Atacama VAR 44px và check list 4 item, cách nhau 64px ngang.

5. **Trust Logo Bar** — Dải toàn chiều rộng #f6f7f8, padding dọc 48px. Eyebrow căn giữa: PP Neue Montreal 14px weight 400, #6c6d73. Một hàng ngang duy nhất gồm 5 logo bên dưới, mỗi logo được render dưới dạng SVG đơn sắc #080b12 ở chiều cao đồng nhất 24px, column gap 72px giữa các logo, căn giữa theo nhóm.

## Similar Brands

- **Linear** — Cùng cấu trúc dark-hero-into-light-body, hình học 4px, viền mảnh, và kỷ luật một màu nhấn duy nhất
- **Retool** — Giao diện dày đặc data-table với tabular numerals và pastel status badges cho phân loại cấp hàng
- **Anthropic** — Editorial serif display headings kết hợp với workhorse sans, giọng văn research-publication trong giao diện sản phẩm
- **Vercel** — Bảng màu trung tính tiết chế với một điểm nhấn rực rỡ, góc 4px sắc nét, và ưu tiên inner glow hơn drop shadow
- **Notion** — Mật độ sáng thoải mái, bề mặt nhẹ #f6f7f8, và chrome trang trí tối thiểu — nội dung và bảng là thiết kế

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #080b12;
  --color-paper: #ffffff;
  --color-fog: #f6f7f8;
  --color-pearl: #edeef1;
  --color-stone: #d9d9d9;
  --color-lavender-mist: #dbdbee;
  --color-mist: #b5b9c4;
  --color-pewter: #9898ae;
  --color-steel: #848a9c;
  --color-smoke: #acacae;
  --color-ash: #9d9ea1;
  --color-iron: #606167;
  --color-graphite: #6c6d73;
  --color-slate: #4f535e;
  --color-charcoal: #2b2b2c;
  --color-electric-iris: #0a33ff;
  --color-periwinkle: #7f90ce;
  --color-hero-dawn: #010b18;
  --gradient-hero-dawn: linear-gradient(180deg, #010b18 0%, #010818 16%, #103b91 49%, #4c7de8 78%, #bad0ff 97%);
  --color-sky-whisper: #e2efff;
  --color-sapphire-ink: #061353;
  --color-mint-whisper: #e4f3e2;
  --color-forest-ink: #03350f;
  --color-sprout-whisper: #d6ffe0;
  --color-saffron-whisper: #faeed1;
  --color-amber-ink: #423301;
  --color-blossom-whisper: #ffe6f7;
  --color-mulberry-ink: #600537;
  --color-plum-ink: #21034d;
  --color-crimson-ink: #580101;
  --color-apricot-whisper: #fee8dd;
  --color-russet-ink: #581c01;

  /* Typography — Font Families */
  --font-atacama-var: 'Atacama VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisse-intl: 'Suisse Intl', 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.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.21px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.64px;
  --text-display: 54px;
  --leading-display: 1;
  --tracking-display: -2.7px;

  /* Typography — Weights */
  --font-weight-w317: 317;
  --font-weight-w370: 370;
  --font-weight-regular: 400;
  --font-weight-w450: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-188: 188px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-tabs: 100px;
  --radius-cards: 4px;
  --radius-badges: 4px;
  --radius-buttons: 4px;
  --radius-feature-cards: 16px;

  /* Shadows */
  --shadow-lg: rgb(255, 255, 255) 0px 0px 24px 0px inset;
  --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
  --shadow-subtle-3: rgba(76, 120, 250, 0.14) 0px 0px 0px 3px;
  --shadow-xl: rgba(0, 0, 0, 0.09) 0px 4px 40px 0px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-fog: #f6f7f8;
  --surface-lavender-mist: #dbdbee;
  --surface-midnight: #080b12;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #080b12;
  --color-paper: #ffffff;
  --color-fog: #f6f7f8;
  --color-pearl: #edeef1;
  --color-stone: #d9d9d9;
  --color-lavender-mist: #dbdbee;
  --color-mist: #b5b9c4;
  --color-pewter: #9898ae;
  --color-steel: #848a9c;
  --color-smoke: #acacae;
  --color-ash: #9d9ea1;
  --color-iron: #606167;
  --color-graphite: #6c6d73;
  --color-slate: #4f535e;
  --color-charcoal: #2b2b2c;
  --color-electric-iris: #0a33ff;
  --color-periwinkle: #7f90ce;
  --color-hero-dawn: #010b18;
  --color-sky-whisper: #e2efff;
  --color-sapphire-ink: #061353;
  --color-mint-whisper: #e4f3e2;
  --color-forest-ink: #03350f;
  --color-sprout-whisper: #d6ffe0;
  --color-saffron-whisper: #faeed1;
  --color-amber-ink: #423301;
  --color-blossom-whisper: #ffe6f7;
  --color-mulberry-ink: #600537;
  --color-plum-ink: #21034d;
  --color-crimson-ink: #580101;
  --color-apricot-whisper: #fee8dd;
  --color-russet-ink: #581c01;

  /* Typography */
  --font-atacama-var: 'Atacama VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisse-intl: 'Suisse Intl', 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.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.21px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.64px;
  --text-display: 54px;
  --leading-display: 1;
  --tracking-display: -2.7px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-188: 188px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-lg: rgb(255, 255, 255) 0px 0px 24px 0px inset;
  --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
  --shadow-subtle-3: rgba(76, 120, 250, 0.14) 0px 0px 0px 3px;
  --shadow-xl: rgba(0, 0, 0, 0.09) 0px 4px 40px 0px;
}
```