# Marco

> Marco — Style Reference

## Prompt Content

```
# Marco — Style Reference
> Moleskine notebook trong ánh sáng ban mai mát dịu — một không gian làm việc cá nhân nơi các widget trôi nổi như sticky notes trên tờ giấy ấm.

**Theme:** light

Trang web của Marco mang phong cách một không gian làm việc cá nhân được bày trên tờ giấy mát: nền gần trắng, các card mềm mại như đồ nội thất, và chữ dày đặc nhưng thoáng khí, gợi cảm giác như một cuốn Moleskine mở ra dưới ánh sáng ban mai. Bố cục là một grid hai cột có kỷ luật — một bản tuyên ngôn dài ở cột trái, một chồng widget nhúng, ảnh chụp màn hình app, và avatar card ở cột phải — tất cả được kết nối bởi góc bo tròn rộng rãi và bóng đổ cực nhẹ. Màu sắc được phân bổ tiết kiệm: 99% trang là trung tính, chỉ có violet và hồng san hô xuất hiện như những dấu chấm câu chức năng nhỏ cho active links, chấm trạng thái 'Work', và một card gradient ấm. Typography là giọng nói chính — ba font geometric sans-serif tùy chỉnh (Maison Neue, Graphik, Neue Montreal) được xếp lớp với các điều chỉnh tracking tinh tế, rộng trên micro-labels và thắt chặt trên display sizes lớn hơn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Iris Glow | `#6366f1` | `--color-iris-glow` | Điểm nhấn violet cho đường viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. |
| Signal Blue | `#1685c7` | `--color-signal-blue` | Điểm nhấn xanh dương cho đường viền action dạng outline, linked labels, và điểm nhấn tương tác nhẹ. Không nâng lên thành màu CTA chính. |
| Ember Red | `#e92f48` | `--color-ember-red` | Lớp phủ đỏ cho highlight backgrounds, decorative bands, và điểm nhấn mềm phía sau nội dung. |
| Coral Pulse | `linear-gradient(16deg, rgb(255, 77, 121), rgb(255, 128, 64) 85%)` | `--color-coral-pulse` | Gradient start và điểm nhấn phụ — dùng tiết kiệm trên warm cards và lớp phủ hồng-cam. |
| Sunset Amber | `#ff8040` | `--color-sunset-amber` | Gradient end — điểm cuối ấm của lớp phủ coral-to-orange dùng trên featured cards. |
| Ink | `#000000` | `--color-ink` | Headings, strong borders, icon fills — trọng lượng chữ nặng nhất và đường nét cấu trúc sắc nhất. |
| Graphite | `#333333` | `--color-graphite` | Body text chính và màu border làm việc chính — xuất hiện nhiều hơn bất kỳ màu nào khác, tạo nên mô liên kết của bố cục. |
| Slate | `#707070` | `--color-slate` | Secondary headings và muted borders. |
| Cool Gray | `#6b7280` | `--color-cool-gray` | Body và helper text ở những nơi có thể chấp nhận độ tương phản thấp hơn. |
| Steel | `#7e8389` | `--color-steel` | Subtle text và quiet borders. |
| Fog | `#949494` | `--color-fog` | Tertiary text và disabled-leaning borders. |
| Pearl | `#dedee0` | `--color-pearl` | Hairline borders, icon containers, và link outlines cần lùi về phía sau. |
| Mist | `#cccccf` | `--color-mist` | Soft surface tints và lightest structural dividers. |
| Paper | `#ffffff` | `--color-paper` | Card surfaces và elevated content — nằm một bậc trên page canvas. |
| Linen | `#f7f7f9` | `--color-linen` | Page canvas và nền của surface stack. |
| Ash | `#f2f2f2` | `--color-ash` | Secondary surface cho nested elements và subtle backgrounds. |
| Cream | `#fff9ed` | `--color-cream` | Warm accent card surface — nơi duy nhất hệ thống phá vỡ các tông màu lạnh trung tính. |
| Lavender Mist | `#eff0ff` | `--color-lavender-mist` | Active và hover wash — lớp hào quang mềm phía sau selected links và cards. |
| Rose Glow | `#f8c1c8` | `--color-rose-glow` | Tinted shadow color cho warm cards — bóng đổ hồng nhạt lệch tông, kết nối với coral accent. |

## Tokens — Typography

### Maison Neue — Primary body và UI text. Weight 400 cho running copy, 600 cho emphasis. Kích thước 40px neo giữ manifesto headlines. Font thay thế: Inter, Söhne, General Sans · `--font-maison-neue`
- **Font thay thế:** Inter
- **Weights:** 400, 600
- **Kích thước:** 12px, 14px, 40px
- **Line height:** 1.00, 1.43, 1.67
- **Letter spacing:** 0.007em nhất quán
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Primary body và UI text. Weight 400 cho running copy, 600 cho emphasis. Kích thước 40px neo giữ manifesto headlines. Font thay thế: Inter, Söhne, General Sans

### Graphik — Links, buttons, card titles, và section headings. Font làm việc chính cho bất kỳ thứ gì tương tác hoặc điều hướng. Font thay thế: Inter, Untitled Sans, Söhne · `--font-graphik`
- **Font thay thế:** Inter
- **Weights:** 400, 500, 600
- **Kích thước:** 14px, 16px, 20px, 31px
- **Line height:** 1.25, 1.38, 1.43, 1.50
- **Letter spacing:** -0.013em ở 31px, positive 0.005–0.014em ở kích thước nhỏ hơn — headlines thắt chặt, body nới lỏng.
- **Vai trò:** Links, buttons, card titles, và section headings. Font làm việc chính cho bất kỳ thứ gì tương tác hoặc điều hướng. Font thay thế: Inter, Untitled Sans, Söhne

### Neue Montreal — Micro-labels, tags, metadata, và tracked-out captions. Tracking rộng ở kích thước nhỏ là signature move — nó khiến text 8–12px có cảm giác như văn phòng phẩm in ấn, không phải UI chrome. Font thay thế: Neue Haas Grotesk, Inter Tight, Monument Grotesk · `--font-neue-montreal`
- **Font thay thế:** Inter Tight
- **Weights:** 400, 500
- **Kích thước:** 8px, 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px
- **Line height:** 1.00, 1.11, 1.13, 1.20, 1.25, 1.45, 1.67
- **Letter spacing:** 0.2em ở 8px → 0.05em ở 26px — inverse tracking curve nơi label nhỏ nhất có tracking rộng nhất.
- **Vai trò:** Micro-labels, tags, metadata, và tracked-out captions. Tracking rộng ở kích thước nhỏ là signature move — nó khiến text 8–12px có cảm giác như văn phòng phẩm in ấn, không phải UI chrome. Font thay thế: Neue Haas Grotesk, Inter Tight, Monument Grotesk

### SF Pro Display — System font fallback cho native-feeling status bar text và một số embedded contexts. Hiếm khi là primary face. · `--font-sf-pro-display`
- **Font thay thế:** SF Pro Display
- **Weights:** 400, 600
- **Kích thước:** 8px, 11px, 16px
- **Line height:** 0.75, 1.40, 1.63, 1.82
- **Letter spacing:** -0.0040em, 0.0130em, 0.0180em
- **Vai trò:** System font fallback cho native-feeling status bar text và một số embedded contexts. Hiếm khi là primary face.

### Chirp — Twitter embed text — chỉ xuất hiện bên trong embedded tweet widgets, không bao giờ dùng cho first-party content · `--font-chirp`
- **Font thay thế:** Chirp
- **Weights:** 400, 700
- **Kích thước:** 16px, 17px, 24px
- **Line height:** 1.20, 1.35, 1.40
- **Vai trò:** Twitter embed text — chỉ xuất hiện bên trong embedded tweet widgets, không bao giờ dùng cho first-party content

### Bluu suuperstar — Display/decorative accent — dùng tối đa ba lần trên trang cho một khoảnh khắc cá tính duy nhất. Kích thước 38px là signature flourish. · `--font-bluu-suuperstar`
- **Font thay thế:** Recoleta
- **Weights:** 700
- **Kích thước:** 15px, 16px, 38px
- **Line height:** 1.00, 1.33
- **Vai trò:** Display/decorative accent — dùng tối đa ba lần trên trang cho một khoảnh khắc cá tính duy nhất. Kích thước 38px là signature flourish.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| label-sm | 10px | 1.2 | 0.75px | `--text-label-sm` |
| label | 12px | 1.25 | 0.6px | `--text-label` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.38 | 0.1px | `--text-subheading` |
| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |
| heading | 31px | 1.25 | -0.4px | `--text-heading` |
| display | 40px | 1.67 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** 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` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 18px |
| icons | 4px |
| images | 12px |
| inputs | 12px |
| buttons | 100px |
| navPill | 230px |
| widgets | 32px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px` | `--shadow-subtle` |
| subtle-2 | `rgba(0, 0, 0, 0.25) 0px 1px 3px 0px` | `--shadow-subtle-2` |
| subtle-3 | `rgba(0, 0, 0, 0.25) 0px 1px 1px 0px` | `--shadow-subtle-3` |
| subtle-4 | `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-subtle-4` |
| sm | `rgba(89, 100, 138, 0.16) 0px 2px 4px 0px` | `--shadow-sm` |
| subtle-5 | `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) ...` | `--shadow-subtle-5` |
| subtle-6 | `rgba(0, 0, 0, 0.18) 0px 1px 2px 0px` | `--shadow-subtle-6` |
| subtle-7 | `rgba(0, 0, 0, 0.12) 0px 1px 2px 0px` | `--shadow-subtle-7` |
| subtle-8 | `rgba(0, 0, 0, 0.16) 0px 1px 2px 0px` | `--shadow-subtle-8` |
| sm-2 | `rgba(0, 0, 0, 0.05) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm-2` |
| md | `rgba(0, 0, 0, 0.1) 0px 15px 10px -3px, rgba(0, 0, 0, 0.05...` | `--shadow-md` |
| md-2 | `rgba(0, 0, 0, 0.1) 0px 0px 10px -3px` | `--shadow-md-2` |
| lg | `rgba(233, 47, 72, 0.3) 0px 4px 24px 0px` | `--shadow-lg` |

### Layout

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

## Components

### Pill Navigation Bar
**Vai trò:** Site navigation cấp cao nhất

Viên nang trắng với border-radius 230px nổi ở giữa phía trên. Chứa 4 nav links trong một hàng ngang duy nhất. Background #ffffff, không có border nhìn thấy được, shadow nhẹ rgba(0,0,0,0.06) 0px 1px 2px. Chiều cao ~48px, padding dọc 6px.

### Nav Link with Status Dot
**Vai trò:** Chỉ báo mục điều hướng đang active

Graphik 14px weight 500, color #333333. Khi active, một chấm tròn Ember Red (#e92f48) 6px nằm bên trái label với margin 6px. Mục 'Work' đang active trong ảnh chụp màn hình thể hiện pattern này — chấm tròn là màu duy nhất trong nav.

### Manifesto Card
**Vai trò:** Khối tuyên bố dài ở cột trái

Không có bề mặt card nhìn thấy được — text nằm trực tiếp trên Linen canvas. Maison Neue 14px line-height 1.67, color #333333. Pattern là các câu tuyên bố ngắn, mỗi câu trên một dòng riêng, tạo nhịp điệu dọc. Chú thích có tiền tố dấu hoa thị (*) 12px ở cuối.

### Widget Embed Card
**Vai trò:** Container cho third-party app embeds (Notion, Twitter, v.v.)

Bề mặt trắng #ffffff, border-radius 18px, padding 24px. Chứa một label header nhỏ bằng Neue Montreal 12px với tracking 0.05em, theo sau là nội dung embed. Shadow hai lớp mềm rgba(0,0,0,0.06) 0px 1px 2px, rgba(0,0,0,0.1) 0px 1px 3px.

### Avatar Profile Card
**Vai trò:** Hiển thị danh tính xã hội (Twitter handle, v.v.)

Bề mặt trắng, radius 18px, padding 24px. Chứa avatar tròn 40px bên trái, display name bằng Graphik 16px weight 600, handle bằng Graphik 14px weight 400 color #707070. Một action link nhỏ (Twitter icon hoặc 'Read mid tweets') nằm ở cuối với mũi tên.

### Gradient Feature Card
**Vai trò:** Card điểm nhấn ấm duy nhất phá vỡ hệ thống đơn sắc

Gradient Coral Pulse đến Sunset Amber (16deg, #ff4d79 → #ff8040), radius 18px, padding 24px. Chữ trắng. Graphik 20px weight 600 cho title, 16px weight 400 cho body. Tối đa một card mỗi trang — điểm nhấn ấm khiến phần còn lại của hệ thống lạnh có giá trị.

### App Icon Row
**Vai trò:** Thanh cuộn ngang các icon app/sản phẩm

Chuỗi icon hình vuông 40–48px (radius 4px) trong một hàng ngang với khoảng cách 8px. Mỗi icon là brand mark gốc — nhiều màu sắc, không được tùy chỉnh style. Nằm bên trong Widget Embed Card.

### Phone Mockup Card
**Vai trò:** Embed ảnh chụp màn hình iPhone

Bề mặt trắng, radius 12px, chứa hình ảnh hình điện thoại với radius nội bộ riêng. Ảnh điện thoại có shadow rgba(0,0,0,0.25) 0px 1px 2px. Nằm bên trong Widget Embed Card với padding 24px.

### Pill Link Chip
**Vai trò:** Inline link với border màu sắc

Border-radius 100px, border Signal Blue (#1685c7) hoặc Iris Glow (#6366f1) 1px, background trong suốt, Graphik 14px weight 500 text với màu tương ứng. Padding 8px 14px. Shadow rgba(0,0,0,0.25) 0px 1px 3px để tạo chiều sâu nhẹ.

### Schedule Bar
**Vai trò:** Widget chia sẻ tình trạng sẵn sàng

Card trắng, radius 18px, chứa các hàng múi giờ xếp chồng bằng Graphik 14px. Action chính 'Create new reply with availability' là một pill full-width với gradient Coral Pulse, chữ trắng, radius 100px, padding 14px 20px.

### Color Swatch Row
**Vai trò:** Hàng tag/label nhiều màu

Hàng ngang các pill chips radius 8px, mỗi chip có background pastel khác nhau (hồng, vàng, xanh lá, xanh dương, tím). Label text Neue Montreal 12px, radius 100px, padding 6px 12px. Hoạt động như category filters hoặc status tags.

### Tracked Label
**Vai trò:** Section header nhỏ hoặc metadata tag

Neue Montreal 12px weight 500, letter-spacing 0.05em, color #707070. Thường đi kèm với chấm tròn màu 4px (violet, xanh lá, cam, đỏ) để tạo tagged-list pattern.

## Do's and Don'ts

### Nên làm
- Dùng border-radius 18–32px trên tất cả card surfaces — góc sắc phá vỡ cảm giác nội thất mềm mại.
- Dùng radius 100px+ cho tất cả interactive elements (links, tags, buttons) để duy trì pill vocabulary.
- Áp dụng inverse tracking curve: Neue Montreal ở 8–12px cần letter-spacing 0.05–0.2em, Graphik ở 31px cần -0.013em.
- Giữ các màu sắc ở mức dấu câu một pixel — một chấm tròn, một border, một gradient card mỗi vùng.
- Dùng gradient Coral-to-Amber trên tối đa một card mỗi trang; phần còn lại của hệ thống giữ tông lạnh.
- Đặt widgets và embeds ở cột phải với padding 24px và radius 18px — không bao giờ để chúng chạm vào mép trang.
- Kết hợp chấm tròn màu 4px với tracked labels Neue Montreal để xây dựng tagged-list patterns.

### Không nên làm
- Không tô màu buttons với các màu sắc — hệ thống dùng outlined và pill links, không dùng filled CTAs.
- Không dùng shadows sâu hơn 3px blur — độ cao nên thì thầm, không phải tuyên bố.
- Không áp dụng cream (#fff9ed) hoặc gradient surface cho nhiều hơn một element mỗi view.
- Không dùng radii sắc 0–4px trên card surfaces — chỉ dành cho icons và small UI.
- Không phá vỡ nhịp điệu hai cột: manifesto trái, widgets phải, không có full-width text blocks.
- Không dùng system fonts cho body copy — custom geometric sans-serifs là giọng nói chính.
- Không dùng đen (#000000) cho body text — dành cho headings và strong borders, dùng Graphite (#333333) cho running text.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|----------|
| 0 | Linen Canvas | `#f7f7f9` | Page background — tờ giấy mát mà toàn bộ bố cục nằm trên đó. |
| 1 | Paper Card | `#ffffff` | Primary card surface cho widget và embed containers. |
| 2 | Cream Card | `#fff9ed` | Warm accent surface cho một featured card mỗi trang. |
| 3 | Ash Surface | `#f2f2f2` | Nested element backgrounds bên trong cards. |
| 4 | Lavender Wash | `#eff0ff` | Active state và hover halo. |

## Elevation

- **Embedded images và screenshots:** `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px`
- **Widget cards:** `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
- **Link chips với border:** `rgba(0, 0, 0, 0.25) 0px 1px 3px 0px`
- **Tinted warm card:** `Box shadow tinted với #f8c1c8 cho bóng đổ hồng lệch tông`

## Imagery

Ngôn ngữ hình ảnh được dẫn dắt bởi embed hơn là minh họa: ảnh chụp màn hình sản phẩm từ native apps (Notion, iPhone, Figma, Word), icon third-party app nhiều màu sắc, ảnh chụp thật (một bức ảnh phong cảnh ven biển xuất hiện trong widget grid), và huy hiệu tích xanh Twitter. Tất cả hình ảnh nằm bên trong card trắng với radius 12px và shadow mềm 1–2px. Không có hệ thống minh họa tùy chỉnh, không có đồ họa trừu tượng, không có 3D renders. Triết lý là: cho thấy công cụ thật, không phải hình ảnh đại diện của chúng. Ảnh full-bleed hiếm; hầu hết hình ảnh được giới hạn trong ranh giới card với radius 4–12px. Cách xử lý màu sắc của native app icons được giữ nguyên — các dấu hiệu violet của Notion, đỏ của Figma, và xanh dương của Word cung cấp những khoảnh khắc đa sắc duy nhất trong một hệ thống trung tính.

## Layout

Trang sử dụng grid hai cột ở max-width 1200px, căn giữa trên Linen (#f7f7f9) canvas. Cột trái (~40%) chứa manifesto text dài trong một stack dọc gồm các câu tuyên bố, không có bề mặt card — text nổi trực tiếp trên canvas. Cột phải (~60%) chứa một stack giống masonry gồm các widget cards với chiều cao khác nhau: Notion workspace previews, app icon rows, phone mockups, avatar cards, và một warm gradient card. Navigation là một viên nang hình pill duy nhất căn giữa ở đầu trang với radius 230px. Một lời nhắc 'Look around...' nằm ở góc trên bên phải. Nhịp điệu nhất quán: gap 24px giữa các widget ở cột phải, khoảng thở xung quanh text cột trái, và tối đa 24px section padding. Mật độ tổng thể compact nhưng không bao giờ chật chội — cards có internal padding rộng rãi (24px) trong khi khoảng cách giữa chúng vẫn chặt.

## Agent Prompt Guide

## Quick Color Reference
- text: #333333 (Graphite cho body), #000000 (Ink cho headings)
- background: #f7f7f9 (Linen canvas), #ffffff (Paper cards)
- border: #333333 (structural), #dedee0 (Pearl, hairline), #1685c7 (Signal Blue, link)
- accent: #6366f1 (Iris Glow, active states)
- status dot: #e92f48 (Ember Red)
- primary action: #1685c7 (outlined action border)

## Example Component Prompts

1. **Manifesto Statement Block**: Linen canvas (#f7f7f9), không có card. Maison Neue 14px weight 400, line-height 1.67, color #333333. Stack các câu tuyên bố ngắn, mỗi câu trên một dòng riêng, khoảng cách dọc 8px giữa các dòng. Tùy chọn footnote 12px màu #707070 với tiền tố dấu hoa thị.

2. **Widget Embed Card**: Bề mặt trắng (#ffffff), border-radius 18px, padding 24px, shadow rgba(0,0,0,0.06) 0px 1px 2px + rgba(0,0,0,0.1) 0px 1px 3px. Label header Neue Montreal 12px với tracking 0.05em và chấm tròn Iris Glow 4px. Nội dung embed nằm dưới label với khoảng cách 14px.

3. **Pill Link Chip**: Background trong suốt, border-radius 100px, border Signal Blue (#1685c7) hoặc Iris Glow (#6366f1) 1px, text Graphik 14px weight 500 với màu tương ứng, padding 8px 14px, shadow rgba(0,0,0,0.25) 0px 1px 3px.

4. **Gradient Feature Card**: Gradient Coral-to-Amber (linear-gradient(16deg, #ff4d79, #ff8040 85%)), border-radius 18px, padding 24px. Title trắng Graphik 20px weight 600, body trắng Graphik 16px weight 400. Tối đa một card mỗi trang.

5. **Tracked Label with Status Dot**: Chấm tròn 4px với màu sắc (Iris Glow, emerald, cam, Ember Red) theo sau bởi khoảng cách 6px, sau đó text Neue Montreal 12px weight 500 màu #707070 với letter-spacing 0.05em. Dùng như inline metadata tag hoặc section header.

## Tracking Philosophy

Hệ thống type đảo ngược mối quan hệ tracking thông thường: micro-labels (8–12px) được đặt với positive tracking cực đoan (0.05–0.2em) để có cảm giác như văn phòng phẩm in ấn, trong khi display sizes (31px+) thắt chặt với negative tracking (-0.013em) để đạt mật độ quang học. Điều này ngược với hầu hết các giao diện SaaS hiện đại, nơi text lớn có tracking lỏng hơn. Kết quả là text nhỏ có cảm giác có chủ đích và được chế tác, trong khi text lớn có cảm giác được kiểm soát và có kiến trúc. Không bao giờ áp dụng cùng một giá trị letter-spacing trên toàn bộ type scale — mỗi vai trò có tracking curve riêng.

## Similar Brands

- **Read.cv** — Cùng thẩm mỹ không gian làm việc cá nhân: bố cục hai cột với text manifesto bên trái, widget/embed cột phải, góc bo tròn rộng rãi trên cards, và bảng màu gần như đơn sắc với một warm accent card duy nhất.
- **Bento.me** — Grid compact tương tự gồm link cards với pill-shaped interactive elements, soft shadows, và triết lý 'embed công cụ thật của bạn' — hiển thị native app icons thay vì custom illustrations.
- **Are.na** — Cùng typography kiềm chế, whitespace rộng rãi, và kỷ luật chỉ dùng màu sắc như dấu câu chức năng thay vì decorative fills.
- **Linear** — Chia sẻ cách tiếp cận custom geometric sans-serif typography và việc sử dụng subtle 1–3px shadows trên elevated surfaces thay vì độ cao ấn tượng.
- **Notion** — Widget-embed card pattern trực tiếp phản ánh embed blocks của Notion — bề mặt trắng, radius 18px, soft dual-layer shadow, tracked label header nhỏ.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-iris-glow: #6366f1;
  --color-signal-blue: #1685c7;
  --color-ember-red: #e92f48;
  --color-coral-pulse: #ff4141;
  --gradient-coral-pulse: linear-gradient(16deg, rgb(255, 77, 121), rgb(255, 128, 64) 85%);
  --color-sunset-amber: #ff8040;
  --color-ink: #000000;
  --color-graphite: #333333;
  --color-slate: #707070;
  --color-cool-gray: #6b7280;
  --color-steel: #7e8389;
  --color-fog: #949494;
  --color-pearl: #dedee0;
  --color-mist: #cccccf;
  --color-paper: #ffffff;
  --color-linen: #f7f7f9;
  --color-ash: #f2f2f2;
  --color-cream: #fff9ed;
  --color-lavender-mist: #eff0ff;
  --color-rose-glow: #f8c1c8;

  /* Typography — Font Families */
  --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-chirp: 'Chirp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bluu-suuperstar: 'Bluu suuperstar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-label-sm: 10px;
  --leading-label-sm: 1.2;
  --tracking-label-sm: 0.75px;
  --text-label: 12px;
  --leading-label: 1.25;
  --tracking-label: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --tracking-subheading: 0.1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --text-heading: 31px;
  --leading-heading: 1.25;
  --tracking-heading: -0.4px;
  --text-display: 40px;
  --leading-display: 1.67;

  /* 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-32: 32px;
  --spacing-64: 64px;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 18px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;
  --radius-full-2: 56px;
  --radius-full-3: 100px;
  --radius-full-4: 230px;
  --radius-full-5: 360px;

  /* Named Radii */
  --radius-cards: 18px;
  --radius-icons: 4px;
  --radius-images: 12px;
  --radius-inputs: 12px;
  --radius-buttons: 100px;
  --radius-navpill: 230px;
  --radius-widgets: 32px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.25) 0px 1px 1px 0px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
  --shadow-sm: rgba(89, 100, 138, 0.16) 0px 2px 4px 0px;
  --shadow-subtle-5: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 3px 3px 0px;
  --shadow-subtle-6: rgba(0, 0, 0, 0.18) 0px 1px 2px 0px;
  --shadow-subtle-7: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
  --shadow-subtle-8: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.05) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 10px 16px -3px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 15px 10px -3px, rgba(0, 0, 0, 0.05) 0px 6px 4px -2px;
  --shadow-md-2: rgba(0, 0, 0, 0.1) 0px 0px 10px -3px;
  --shadow-lg: rgba(233, 47, 72, 0.3) 0px 4px 24px 0px;

  /* Surfaces */
  --surface-linen-canvas: #f7f7f9;
  --surface-paper-card: #ffffff;
  --surface-cream-card: #fff9ed;
  --surface-ash-surface: #f2f2f2;
  --surface-lavender-wash: #eff0ff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-iris-glow: #6366f1;
  --color-signal-blue: #1685c7;
  --color-ember-red: #e92f48;
  --color-coral-pulse: #ff4141;
  --color-sunset-amber: #ff8040;
  --color-ink: #000000;
  --color-graphite: #333333;
  --color-slate: #707070;
  --color-cool-gray: #6b7280;
  --color-steel: #7e8389;
  --color-fog: #949494;
  --color-pearl: #dedee0;
  --color-mist: #cccccf;
  --color-paper: #ffffff;
  --color-linen: #f7f7f9;
  --color-ash: #f2f2f2;
  --color-cream: #fff9ed;
  --color-lavender-mist: #eff0ff;
  --color-rose-glow: #f8c1c8;

  /* Typography */
  --font-maison-neue: 'Maison Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sf-pro-display: 'SF Pro Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-chirp: 'Chirp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bluu-suuperstar: 'Bluu suuperstar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-label-sm: 10px;
  --leading-label-sm: 1.2;
  --tracking-label-sm: 0.75px;
  --text-label: 12px;
  --leading-label: 1.25;
  --tracking-label: 0.6px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --tracking-subheading: 0.1px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --text-heading: 31px;
  --leading-heading: 1.25;
  --tracking-heading: -0.4px;
  --text-display: 40px;
  --leading-display: 1.67;

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

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 18px;
  --radius-3xl: 32px;
  --radius-3xl-2: 40px;
  --radius-full: 50px;
  --radius-full-2: 56px;
  --radius-full-3: 100px;
  --radius-full-4: 230px;
  --radius-full-5: 360px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.25) 0px 1px 1px 0px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
  --shadow-sm: rgba(89, 100, 138, 0.16) 0px 2px 4px 0px;
  --shadow-subtle-5: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 3px 3px 0px;
  --shadow-subtle-6: rgba(0, 0, 0, 0.18) 0px 1px 2px 0px;
  --shadow-subtle-7: rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
  --shadow-subtle-8: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.05) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 10px 16px -3px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 15px 10px -3px, rgba(0, 0, 0, 0.05) 0px 6px 4px -2px;
  --shadow-md-2: rgba(0, 0, 0, 0.1) 0px 0px 10px -3px;
  --shadow-lg: rgba(233, 47, 72, 0.3) 0px 4px 24px 0px;
}
```