# Notion

> # Notion — Style Reference

**Notion** — Style Reference

## Prompt Content

```
# Notion — Style Reference
> Trung tâm chỉ huy làm việc đêm khuya — một studio tối lúc 2 giờ sáng, nơi những chiếc bàn màu kem mềm mại đỡ những tấm thẻ trắng phát sáng, được chiếu sáng bởi các bảng điều khiển màu xanh coban.

**Theme:** mixed

Notion vận hành như một trung tâm chỉ huy làm việc về đêm: một hero xanh navy nửa đêm bão hòa sâu chuyển dần vào các bề mặt nội dung màu kem ấm áp, với các hành động màu xanh coban nổi bật như những bảng điều khiển vừa được bật sáng. Thiết kế tự tin về mặt typography, sử dụng một sans humanist tùy chỉnh (Notion Inter) ở mọi cấp độ UI, kết hợp với các điểm nhấn serif Lyon Text thỉnh thoảng để tạo cảm giác ấm áp biên tập. Màu sắc được phân bổ có chừng mực — phần lớn trang sống trong mực gần như đen và trắng kem ấm, dành năng lượng màu sắc cho các phần tô CTA, điểm nhấn emoji-icon, highlight badge và đường viền thẻ trang trí. Các component mềm mại và bo tròn (thẻ 12px, input 5px, pill badges) hầu như không có drop shadow; chiều sâu đến từ độ tương phản bề mặt (navy đậm → kem → thẻ trắng) chứ không phải từ độ cao. Cảm giác tổng thể là một studio làm việc vẫn mở cửa sau giờ hành chính — chức năng, yên tĩnh, hơi mang hơi hướng về đêm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Midnight Navy | `#02093a` | `--color-midnight-navy` | Canvas cho hero và feature section — bề mặt tối đặc trưng khiến headline trắng và CTA xanh coban trông như những bảng phát sáng trong phòng điều khiển ca đêm |
| Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Màu hành động tím cho filled buttons, trạng thái navigation được chọn và các khoảnh khắc chuyển đổi tập trung. |
| Signal Blue | `#0075de` | `--color-signal-blue` | Đường viền hành động dạng outlined, inline text links và trạng thái hover có màu — một màu xanh mát hơn cho tính tương tác thứ cấp |
| Ice Blue | `#62aef0` | `--color-ice-blue` | Điểm nhấn đường viền xanh cho tag, divider và cạnh UI đang focus |
| Info Blue | `#097fe8` | `--color-info-blue` | Badge thông tin ngữ nghĩa và đường viền điểm nhấn trên bề mặt tối |
| Indigo | `#2537b1` | `--color-indigo` | Nét vẽ minh họa trang trí, tô màu SVG accent, điểm chuyển tiếp gradient |
| Deep Indigo | `#213183` | `--color-deep-indigo` | Trạng thái hover/pressed của Cobalt Blue trên bề mặt tối |
| Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, đường viền đậm, nét vẽ tương phản cao |
| Ink | `#0b0b0b` | `--color-ink` | Văn bản chính trên bề mặt sáng, đường viền thẻ, divider mạnh |
| Charcoal | `#31302e` | `--color-charcoal` | Văn bản navigation, khối văn bản có viền dày đặc, màu heading cấp ba |
| Warm Gray | `#615d59` | `--color-warm-gray` | Body text nhẹ nhàng, nét vẽ icon, chú thích trợ giúp trên nền sáng |
| Stone | `#a39e98` | `--color-stone` | Trạng thái disabled, tô màu icon thứ cấp, đường viền ít nhấn mạnh |
| Silver | `#c6c6c5` | `--color-silver` | Đường viền tinh tế, placeholder, divider dạng sợi tóc trên bề mặt sáng |
| Cream | `#f6f5f4` | `--color-cream` | Nền trang, canvas nội dung trắng kem ấm, màu trung tính ấm khiến các section navy có chủ đích |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, văn bản nút, trường input — bề mặt đọc sạch sẽ |
| Ice Wash | `#f2f9ff` | `--color-ice-wash` | Nền badge thông tin mềm mại kết hợp với văn bản Info Blue |

## Tokens — Typography

### Notion Inter — Họ chữ interface và heading chính — sans duy nhất được sử dụng trên toàn bộ bề mặt sản phẩm, từ helper text 12px đến hero headline 64px. Tabular lining numerals và localized forms luôn được bật. Weight 600–700 đảm nhận heading và button label; weight 400 đảm nhận body và mô tả. · `--font-notion-inter`
- **Thay thế:** Inter
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 12, 14, 15, 16, 20, 22, 24, 26, 40, 42, 54, 64
- **Line height:** 1.14–1.50 (UI), 1.20 (headings), 1.04–1.14 (display)
- **Letter spacing:** -0.0360em ở 64px, -0.0350em ở 54px, -0.0330em ở 42px, -0.0240em ở 40px, -0.0110em ở 26px, -0.0060em ở 24px, 0.0100em ở 12px
- **OpenType features:** `"lnum" 0, "locl" 0`
- **Vai trò:** Họ chữ interface và heading chính — sans duy nhất được sử dụng trên toàn bộ bề mặt sản phẩm, từ helper text 12px đến hero headline 64px. Tabular lining numerals và localized forms luôn được bật. Weight 600–700 đảm nhận heading và button label; weight 400 đảm nhận body và mô tả.

### Lyon Text — Serif biên tập được sử dụng một cách tiết kiệm ở 32px cho những khoảnh khắc cần cảm giác trang bìa tạp chí — không bao giờ lặp lại trong UI dày đặc. Sự xuất hiện của nó là một điểm đối trọng có chủ đích với hệ thống toàn sans còn lại. · `--font-lyon-text`
- **Thay thế:** Source Serif Pro
- **Weights:** 400
- **Kích thước:** 32
- **Line height:** 1.25
- **Vai trò:** Serif biên tập được sử dụng một cách tiết kiệm ở 32px cho những khoảnh khắc cần cảm giác trang bìa tạp chí — không bao giờ lặp lại trong UI dày đặc. Sự xuất hiện của nó là một điểm đối trọng có chủ đích với hệ thống toàn sans còn lại.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | 0.12px | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.4 | -0.22px | `--text-subheading` |
| heading-sm | 24px | 1.27 | -0.14px | `--text-heading-sm` |
| heading | 26px | 1.23 | -0.29px | `--text-heading` |
| heading-lg | 42px | 1.14 | -1.39px | `--text-heading-lg` |
| display | 64px | 1.04 | -2.3px | `--text-display` |

## Tokens — Spacing & Shapes

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

**Mật độ:** thoải mái

### 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` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 180 | 180px | `--spacing-180` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 8px |
| cards | 12px |
| pills | 9999px |
| images | 12px |
| inputs | 5px |
| buttons | 5px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle` |

### Layout

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

## Components

### Primary CTA Button (Cobalt Fill)
**Vai trò:** Hành động có độ nhấn mạnh cao nhất — filled button màu sắc duy nhất trong hệ thống

Nền #455dd3, văn bản trắng ở 14px/600, radius 5px, padding dọc 8px × ngang 16px. Luôn đi kèm với một ghost secondary bên cạnh. Màu cobalt được thiết kế mát hơn so với indigo SaaS thông thường — nó mang cảm giác 'đang bật' hơn là 'quan trọng'.

### Ghost Text Link Button
**Vai trò:** Hành động thứ cấp nhường chỗ trực quan cho primary CTA

Không có nền, không có viền. Văn bản trắng ở 14px/500 trên bề mặt tối, văn bản Ink (#0b0b0b) trên bề mặt sáng. Tùy chọn gạch chân khi hover. Được sử dụng cho 'Request a demo' và tất cả navigation có cam kết thấp.

### Outlined Action Button (Signal Blue)
**Vai trò:** Hành động cấp ba với viền màu sắc để phân biệt với ghost buttons trung tính

Nền trong suốt, viền 1.5px #0075de, văn bản #0075de ở 14px/500, radius 5px, padding 8px × 16px. Được sử dụng khi ghost button cần nhiều sự hiện diện hơn mà không cạnh tranh với primary cobalt.

### Pill Badge (Info)
**Vai trò:** Chỉ báo trạng thái nhỏ — 'New', 'Beta', tag danh mục

Nền xanh nhạt (#f2f9ff) với văn bản Info Blue (#097fe8) ở 12px/500, radius 9999px, padding 2px × 8px. Hình học pill được dành riêng cho badge và tag nhỏ — không bao giờ dùng cho button.

### Announcement Banner
**Vai trò:** Thanh mỏng trên cùng trang cho các chương trình khuyến mãi nhạy cảm về thời gian (sự kiện dành cho developer, ra mắt)

Dải mỏng phía trên navigation chính, nền Ink đậm (#0b0b0b), văn bản trắng ở 13px/500, có thể đóng bằng icon × ở cạnh phải. Padding dọc 8px.

### Top Navigation Bar
**Vai trò:** Navigation trang cố định

Trong suốt trên hero xanh nửa đêm, dropdown menu với radius 8px, mục nav 14px/500 màu trắng trên nền tối và Ink trên nền sáng. 'Get Notion free' nằm ở góc trên bên phải dưới dạng nút Cobalt radius 5px.

### Product UI Screenshot Card
**Vai trò:** Hình ảnh hero — nhúng một mockup sản phẩm chân thực chiếm ưu thế trên canvas tối

Bề mặt trắng với radius 12px, chồng bóng đổ năm lớp, viền 1px Ink. Đặt ở trung tâm, chồng lên nền xanh nửa đêm. Khung sản phẩm là một không gian làm việc Notion thực tế — không có minh họa trừu tượng.

### Feature Card (Paper White)
**Vai trò:** Thẻ nội dung mặc định trên nền trang kem

Bề mặt trắng (#ffffff), radius 12px, padding 24px, không có shadow. Tùy chọn viền 1px Silver (#c6c6c5). Chứa emoji hoặc icon nhỏ ở trên cùng, tiêu đề đậm, mô tả hỗ trợ.

### Accent-Bordered Feature Card
**Vai trò:** Thẻ tính năng được đánh dấu cần nổi bật so với các thẻ lân cận

Bề mặt trắng, radius 12px, padding 24px, nhưng có viền trên cùng dày 4px màu đồng nhất (hồng đào, vàng, bạc hà — một trong nhiều màu nhấn). Được sử dụng để neo thẻ đầu tiên trong một hàng tính năng.

### Dark Feature Card (Midnight)
**Vai trò:** Thẻ đảo ngược cho các phần nhấn mạnh trên trang kem

Nền #02093a, văn bản trắng, radius 12px, padding 24px, không có shadow. Chứa icon emoji và một link CTA ngắn màu Cobalt Blue.

### Emoji Icon Tile
**Vai trò:** Thẻ icon+label nhỏ gọn cho các phần dạng lưới

Bề mặt trắng, radius 12px, padding 16px, emoji 36px hiển thị màu ở góc trên bên trái, tiêu đề 14px/600 và mũi tên link tùy chọn. Được sử dụng trong các hàng 5 cột chặt chẽ.

### Section Heading
**Vai trò:** Tiêu đề đầu section bằng Ink hoặc trắng tùy theo bề mặt

Notion Inter weight 700 ở 40–42px, tracking chặt (-1.39px ở 42px), line-height 1.14. Kết thúc bằng dấu chấm trên hero/feature headings — 'Meet the night shift.', 'Keep work moving 24/7.' — dấu chấm ở cuối là một đặc điểm nhận dạng.

### Logo Trust Bar
**Vai trò:** Hàng logo bằng chứng xã hội

Các wordmark đơn sắc cách đều nhau màu trắng (trên section tối) hoặc Charcoal (trên section sáng), cao 14–16px, có tùy chọn chú thích 'Trusted by 98% of the Forbes Cloud 100' phía trên. Logo được làm giảm bão hòa — không có rò rỉ màu thương hiệu.

### Input Field
**Vai trò:** Trường nhập liệu biểu mẫu và tìm kiếm

Bề mặt trắng, radius 5px, padding dọc 6px × ngang 12px, viền 1px Silver (#c6c6c5), văn bản Ink ở 14px. Focus ring sử dụng Cobalt Blue (#455dd3) với outline 2px.

### Footer
**Vai trò:** Footer trang với các cột link và văn bản pháp lý

Nền Midnight Navy trên trang tối, Cream trên trang sáng. Văn bản trắng hoặc Charcoal, cột link 14px, chú thích pháp lý 12px/500. Không có drop shadow.

## Do's and Don'ts

### Nên làm
- Chỉ sử dụng Cobalt Blue (#455dd3) cho một primary CTA duy nhất trên mỗi view — không bao giờ đặt hai filled button màu sắc cạnh nhau
- Xen kẽ các section Midnight Navy và Cream để tạo nhịp điệu tối-sáng; toàn bộ trang cream cũng sai như toàn bộ trang navy
- Kết thúc hero và section headline bằng dấu chấm — 'Meet the night shift.', 'Keep work moving 24/7.'
- Chỉ áp dụng radius pill (9999px) cho badge và tag nhỏ; dùng 12px cho tất cả thẻ và 5px cho tất cả button và input
- Sử dụng emoji icon với màu gốc đầy đủ trên thẻ tính năng trắng — chúng là hệ thống màu nhấn cho lưới, không phải minh họa trang trí
- Ghép mỗi primary CTA với một ghost text link ở bên phải — 'Get Notion free' + 'Request a demo' là cặp hành động tiêu chuẩn
- Dành Lyon Text cho một khoảnh khắc biên tập duy nhất trên mỗi trang (một pull quote hoặc tiêu đề section kiểu tạp chí); không bao giờ sử dụng nó trong UI dày đặc

### Không nên làm
- Không sử dụng drop shadow trên thẻ tiêu chuẩn — chiều sâu phải đến từ độ tương phản bề mặt (navy → cream → white), không phải từ blur
- Không đưa vào các màu sắc mới ngoài họ Midnight Navy / Cobalt / Signal Blue / Ice Blue; bảng màu được phân bổ có chừng mực
- Không sử dụng radius 8px cho thẻ (nó thuộc về nav) hoặc radius 12px cho button (nó thuộc về thẻ) — radius có vai trò cụ thể
- Không xếp chồng primary CTA cobalt lên trên secondary filled button; luôn hạ cấp secondary xuống ghost hoặc outlined
- Không hiển thị logo khách hàng với màu thương hiệu của họ — giảm bão hòa thành trắng trên nền tối và Charcoal trên nền sáng
- Không sử dụng Lyon Text ở kích thước khác ngoài 32px — nó là điểm nhấn biên tập, không phải mặt chữ body
- Không phá vỡ mẫu headline kết thúc bằng dấu chấm; đó là đặc điểm nhận dạng bằng lời nói dễ nhận biết nhất và việc loại bỏ nó sẽ giết chết giọng điệu

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Midnight Canvas | `#02093a` | Hero và dark feature section — bề mặt về đêm đặc trưng |
| 1 | Cream Page | `#f6f5f4` | Nền nội dung body mặc định — ấm áp, hơi ngả trắng để tránh sự lạnh lẽo lâm sàng |
| 2 | Paper Card | `#ffffff` | Bề mặt thẻ nâng cao cho tính năng, lời chứng thực, nhúng UI sản phẩm |
| 3 | Dark Card | `#02093a` | Thẻ đảo ngược trên nền sáng để tạo độ tương phản và nhấn mạnh |

## Elevation

- **Product UI Embed Card:** `rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px`

## Imagery

Hình ảnh chủ yếu là các ảnh chụp màn hình UI sản phẩm chân thực — các bản chụp không gian làm việc Notion thực tế (kanban Ramp HQ, bảng Q&A, cửa sổ chat) được nhúng dưới dạng thẻ bo tròn lớn trên hero xanh nửa đêm và các section nội dung kem. Không có ảnh stock, không có hình ảnh lối sống, không có nền minh họa trừu tượng. Các yếu tố đồ họa duy nhất ngoài UI sản phẩm là các emoji icon nhỏ đầy màu sắc (🤖 🛠️ 🧑‍🚒 🏗️ 🦺) được sử dụng làm icon chức năng trong lưới thẻ tính năng — chúng cung cấp năng lượng màu sắc duy nhất trong các hàng thẻ trắng. Đồ họa nền trên hero tối bao gồm các đường cong mảnh, hơi phát sáng và các minh họa emoji nổi nhỏ với màu cobalt và ice blue nhẹ nhàng — giàn giáo tạo không khí, không phải nội dung trọng tâm. Ngôn ngữ thiết kế chủ yếu tập trung vào ảnh chụp màn hình sản phẩm: không gian làm việc CHÍNH LÀ hoạt động tiếp thị.

## Layout

Hero tối full-bleed chuyển tiếp vào cột nội dung trung tâm max-width 1200px trên nền Cream (#f6f5f4). Hero xếp chồng theo chiều dọc: announcement banner ở trên cùng, thanh nav trong suốt, headline trung tâm + subhead + dual CTA, sau đó là ảnh chụp màn hình UI sản phẩm rộng kéo dài gần đến các cạnh viewport. Bên dưới hero, một logo trust bar trải dài toàn chiều rộng với văn bản trắng trên nền xanh nửa đêm. Các section nội dung xen kẽ: section heading lớn căn trái (40–42px weight 700), tiếp theo là bố cục 2 cột hoặc dạng lưới các thẻ tính năng. Section 'Custom Agents' sử dụng bố cục 1+1 — một thẻ được đánh dấu duy nhất với viền trên cùng màu ở bên trái, một thẻ sản phẩm minh họa rộng hơn ở bên phải. Hàng 'See what Custom Agents can do' là một lưới chặt chẽ 5 cột gồm các icon tile. Section 'Ask your on-demand assistants' quay lại bố cục 2 cột với thẻ Midnight tối ở bên trái và thẻ minh họa pha vàng ở bên phải. Nhịp điệu dọc rộng rãi — 80px giữa các section chính — cho phép sự xen kẽ tối-sáng có không gian để thở.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- text: #0b0b0b (trên nền sáng) / #ffffff (trên nền tối)
- background: #f6f5f4 (trang) / #02093a (section tối) / #ffffff (thẻ)
- border: #c6c6c5 (sợi tóc) / #0b0b0b (đậm)
- accent: #62aef0 (Ice Blue)
- primary action: #ffffff (filled action)
- link: #0075de (Signal Blue)

**3-5 Prompt Component Mẫu**

1. **Hero Section**: Nền Midnight Navy (#02093a) trải dài toàn viewport. Headline căn giữa ở 64px Notion Inter weight 700, màu trắng, letter-spacing -2.30px, kết thúc bằng dấu chấm. Subtext ở 16px weight 400, màu warm-gray (#a39e98). Hai hành động: nút filled Cobalt (#455dd3) 'Get Notion free' (14px/600 trắng, radius 5px, padding 8px×16px) + ghost text link 'Request a demo' (trắng, 14px/500). Bên dưới: một thẻ trắng radius 12px chứa ảnh chụp màn hình UI sản phẩm chân thực, với chồng bóng đổ năm lớp (rgba 0.01→0.05, các bước blur 1px→23px).

2. **Hàng Feature Card trên Cream Page**: Nền trang Cream (#f6f5f4). Section heading ở 42px Notion Inter weight 700, Ink (#0b0b0b), letter-spacing -1.39px, kết thúc bằng dấu chấm. Bên dưới: lưới 5 cột gồm các emoji icon tile trắng (#ffffff), mỗi tile radius 12px, padding 16px, chứa emoji màu 36px + tiêu đề Ink 14px/600 + mô tả Warm Gray 14px/400. Tile đầu tiên có viền trên cùng màu hồng đào đặc 4px.

3. **Pill Badge + Outlined Action**: Một Pill Badge với radius 9999px, nền #f2f9ff, văn bản #097fe8 ở 12px/500, được gắn nhãn 'New'. Bên cạnh, một Outlined Action Button: nền trong suốt, viền 1.5px #0075de, văn bản #0075de ở 14px/500, radius 5px, padding 8px×16px.

4. **Dark Inverted Feature Card**: Thẻ Midnight Navy (#02093a), radius 12px, padding 24px, không có shadow. Icon emoji 36px ở trên cùng, tiêu đề trắng ở 20px/600, mô tả trắng ở 14px/400, link văn bản Cobalt Blue (#455dd3) ở 14px/500 với mũi tên phải.

5. **Logo Trust Bar**: Thanh full-width trên nền Midnight Navy. Phía trên: chú thích 'Trusted by 98% of the Forbes Cloud 100' ở 12px/500 trắng. Bên dưới: một hàng duy nhất gồm 8–9 wordmark khách hàng hiển thị màu trắng ở độ cao ~16px, phân bố đều trên max-width 1200px với khoảng cách 32px.

## Visual Identity Notes

Headline 'Meet the night shift.' là mẫu lời nói dễ nhận biết nhất trong hệ thống — ngắn, kết thúc bằng dấu chấm và ở thì hiện tại. Cách tiếp cận emoji-as-icon (🤖 🛠️ 🦺) có chủ đích là giản dị: nó báo hiệu sự dễ tiếp cận theo cách mà line-icons không thể. Ảnh chụp màn hình sản phẩm hero không bao giờ là một render tiếp thị — đó là một bản chụp literal giao diện của Notion chứa đầy nội dung không gian làm việc hư cấu nhưng chân thực, để sản phẩm luôn tự chứng minh chính nó. Sự xen kẽ xanh nửa đêm và kem là xương sống cấu trúc: mọi section nội dung chính hoặc nằm trên Midnight Navy hoặc trên Cream, không bao giờ trên một màu trung tính thứ ba, để mắt luôn có thể biết nó đang ở 'chế độ' nào.

## Similar Brands

- **Linear** — Cùng sự xen kẽ hero navy tối → nội dung sáng, cùng letter-spacing chặt trên display heading, cùng cách xử lý thẻ không shadow với radius 12px
- **Stripe** — Cùng editorial headline kết thúc bằng dấu chấm, cùng kỷ luật single-accent-blue CTA, cùng triết lý product-screenshot-as-hero thay vì minh họa trừu tượng
- **Vercel** — Cùng canvas đen/navy với điểm nhấn màu tối thiểu, cùng custom humanist sans cấp Notion Inter ở mọi cấp độ UI
- **Figma** — Cùng cách tiếp cận emoji-as-functional-icon trong lưới tính năng, cùng thẻ radius 12px mềm mại trên nền trang trắng kem ấm
- **Arc Browser** — Cùng nhịp điệu hero tối + nội dung kem pha trộn tự tin, cùng sự phân bổ màu sắc có chừng mực nơi các điểm nhấn màu chỉ xuất hiện trên các yếu tố tương tác cụ thể

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-navy: #02093a;
  --color-cobalt-blue: #455dd3;
  --color-signal-blue: #0075de;
  --color-ice-blue: #62aef0;
  --color-info-blue: #097fe8;
  --color-indigo: #2537b1;
  --color-deep-indigo: #213183;
  --color-obsidian: #000000;
  --color-ink: #0b0b0b;
  --color-charcoal: #31302e;
  --color-warm-gray: #615d59;
  --color-stone: #a39e98;
  --color-silver: #c6c6c5;
  --color-cream: #f6f5f4;
  --color-paper-white: #ffffff;
  --color-ice-wash: #f2f9ff;

  /* Typography — Font Families */
  --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.27;
  --tracking-heading-sm: -0.14px;
  --text-heading: 26px;
  --leading-heading: 1.23;
  --tracking-heading: -0.29px;
  --text-heading-lg: 42px;
  --leading-heading-lg: 1.14;
  --tracking-heading-lg: -1.39px;
  --text-display: 64px;
  --leading-display: 1.04;
  --tracking-display: -2.3px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-180: 180px;

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

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-nav: 8px;
  --radius-cards: 12px;
  --radius-pills: 9999px;
  --radius-images: 12px;
  --radius-inputs: 5px;
  --radius-buttons: 5px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;

  /* Surfaces */
  --surface-midnight-canvas: #02093a;
  --surface-cream-page: #f6f5f4;
  --surface-paper-card: #ffffff;
  --surface-dark-card: #02093a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-navy: #02093a;
  --color-cobalt-blue: #455dd3;
  --color-signal-blue: #0075de;
  --color-ice-blue: #62aef0;
  --color-info-blue: #097fe8;
  --color-indigo: #2537b1;
  --color-deep-indigo: #213183;
  --color-obsidian: #000000;
  --color-ink: #0b0b0b;
  --color-charcoal: #31302e;
  --color-warm-gray: #615d59;
  --color-stone: #a39e98;
  --color-silver: #c6c6c5;
  --color-cream: #f6f5f4;
  --color-paper-white: #ffffff;
  --color-ice-wash: #f2f9ff;

  /* Typography */
  --font-notion-inter: 'Notion Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lyon-text: 'Lyon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.22px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.27;
  --tracking-heading-sm: -0.14px;
  --text-heading: 26px;
  --leading-heading: 1.23;
  --tracking-heading: -0.29px;
  --text-heading-lg: 42px;
  --leading-heading-lg: 1.14;
  --tracking-heading-lg: -1.39px;
  --text-display: 64px;
  --leading-display: 1.04;
  --tracking-display: -2.3px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-180: 180px;

  /* Border Radius */
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px;
}
```