Pha / nền tảng
Sáu token. Một typeface. Một catalog chuyển động. Sphere chỉ xuất hiện một lần. Pastel nhân vật sống ở illustration — không mang nhiệm vụ đọc.
Màu ứng dụng
Canvas luôn canvas. Paper nâng card. Hairline là viền. Sphere không fill nút, không làm chữ. Ember chỉ cho lỗi.
Độ tương phản
WCAG 2.1: chữ thường 4.5:1. Mọi chữ là Ink hoặc Mid. Hairline và Sphere không mang caption.
Ink · Canvas
Thật trướckhi đẹp.
Caption 12px, body 14px, display 48px — cùng một cặp màu. Nếu dòng này khó đọc, cặp này không được lên sản phẩm.
pha / guided horizon
Tỷ lệ
18.16:1
Ink trên Canvas đạt AAA — dùng được cho mọi cỡ chữ.
Hàng là chữ, cột là nền. Ô tô Aa đúng cặp đó. Số bên dưới luôn Ink để đọc được kết quả.
| Chữ \ nền | Ink | Paper | Canvas | Surface alt |
|---|---|---|---|---|
| Ink | ||||
| Mid | ||||
| Paper | ||||
| Hairline | ||||
| Ember | ||||
| Sphere |
Core color không bao giờ là màu chữ. Ink trên nền soft của nhân vật thì đạt AAA.
Chữ
Geist 400 cho body, 500 cho nút, 600 cho display. Tracking âm nhẹ ở headline — không siết quá −0.05em trên tiếng Việt. Headline xếp dòng, không uppercase.
Display
48px / 1.10 / -2.4px / 600
Thật trước khi đẹp.
Heading
36px / 1.11 / -0.9px / 500
Một frame có khoảng thở.
Heading sm
30px / 1.20 / -0.75px / 600
Core là ý định.
Subhead
24px / 1.33 / -0.6px / 600
Mây mở một lối.
Body
14px / 1.43 / 0 / 400
Canvas là giấy. Ink là chữ. Sphere chỉ xuất hiện một lần.
Body sm
13px / 1.50 / 0 / 500
Nút chính fill ink. Ghost là secondary. Mũi tên nói hướng đi.
Caption
12px / 1.33 / 0.6px / 500
PHA / GUIDED HORIZON
Pangram Việt
Do bạch kim rất quý nên sẽ dùng để lắp vô xương.
Dấu đủ bộ
Àảãáạ ăằẳẵắặ âầẩẫấậ èẻẽéẹ êềểễếệ ìỉĩíị òỏõóọ ôồổỗốộ ơờởỡớợ ùủũúụ ưừửữứự ỳỷỹýỵ.
Câu hệ
Một frame có khoảng thở. Thật trước khi đẹp.
Chuyển động
Enter 400ms, hover 150ms, press 150ms, exit 150ms. Sphere parallax 4–8px, không quay. Reduced motion thì đứng yên.
400ms
0.22, 1, 0.36, 1
Section dưới fold, chapter. Blur 2px + 8px lên.
150ms
out-smooth
Ghost canvas fill, mũi tên +4px, card giấy.
150ms
ease-out
Scale 0.96. Interruptible — nhả giữa chừng thì về.
150ms
ease-in
Dialog đóng nhanh hơn mở. View transition 8px.
4–8px
lerp 0.14
Parallax chuột và một trục scroll. Lighting tĩnh. Không quay 360°.
—
static
Hairline, không animate. Chỉ trôi chậm theo scroll.
Hover
Mũi tên trượtPress 0.96
Reduced motion
Mọi keyframe tắt. Nội dung hiện ngay. Không mất thông tin.
Nhịp
Scale 4px. Card pad 20. Section 48–80. Không nhảy số lẻ ngoài các bước này.
4px
Đơn vị gốc
8px
Gap giữa card, element
12px
Padding compact trong pill
16px
Padding nút, khe nhỏ
20px
Padding card, gap hai cột
24px
Page gutter, card radius
48px
Section gap nhỏ, heading
80px
Khoảng thở lớn dưới hero
Hình
Link, filter, input — pill 18px. Card — 24px, hairline, bóng thì thầm.
Hành động chính fill ink. Secondary ghost hairline.
24px radius, 20px padding, hairline + bóng thì thầm.
18px radius, canvas fill, hairline khi focus. Ember khi lỗi.
Giọng
Câu ngắn. Dấu tiếng Việt đủ nét. CTA nói bước đi — không dỗ dành.
Làm
Một câu đứng yên. Dấu tiếng Việt đủ nét.
Không
Claim chưa có nguồn, câu dỗ dành chung chung.
Làm
CTA nói bước đi: Mở playbook →
Không
Learn more, Khám phá ngay, Get started.
Làm
Display Geist 600, tracking −0.05em. Xếp dòng, không uppercase.
Không
Kerning chặt hơn −0.05em trên tiếng Việt, title case dài.
Làm
Một guide, một việc, rồi nhường sân.
Không
Nhiều mascot cùng frame, pastel mang chữ.
Có / không
Xuất token
CSS :root, Tailwind @theme, JSON. Cùng một nguồn. Chép pack, dán vào sản phẩm.
:root {
--color-canvas: #f5f5f5;
--color-ink: #0a0a0a;
--color-paper: #ffffff;
--color-mid: #737373;
--color-hairline: #e5e5e5;
--color-ember: #e7000b;
--color-sphere: #facb00;
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
--text-body: 14px;
--text-display: 48px;
--radius-btn: 18px;
--radius-card: 24px;
}Bàn giao