đặc tả thiết kế

Đặc tả thiết kế định nghĩa mọi thuộc tính trực quan của hệ thống 1thay — màu sắc, kiểu chữ, khoảng cách, component — ở định dạng máy có thể đọc được để tác nhân tham khảo khi xây dựng giao diện.

hệ thống màu sắc

bảng màu thương hiệu

4 thương hiệu, mỗi thương hiệu có 10 sắc độ (50→900). Sắc độ 600 là mốc cơ bản. 400 là trạng thái hover. 200 là vòng focus.

Thương hiệu	Cơ bản (600)	Hover (400)	Focus (200)	Font hiển thị
reputa-blue	`#064BAE`	`#357dde`	`#8eb6f2`	Hanken Grotesk
reputa-premier	`#A10B2E`	`#d93650`	`#f28ea3`	Hanken Grotesk
tramnghe	`#044f44`	`#2d7d6f`	`#80c4b2`	Merriweather
1thay	`#FBC000`	`#fccd26`	`#ffe080`	Space Grotesk

bảng màu trung tính

11 sắc độ từ #ffffff (0) đến #020617 (1000). Dùng cho bề mặt, chữ và viền trên tất cả thương hiệu.

Mốc chính: neutral-50: #f8fafc (nền trang), neutral-200: #e2e8f0 (viền), neutral-900: #0f172a (chữ chính).

màu ngữ nghĩa

`success`	`#16a34a`	xác nhận tích cực, hoàn thành
`warning`	`#d97706`	cảnh báo, thời hạn, chú ý
`error`	`#dc2626`	hành động phá hoại, xác thực thất bại
`info`	`#2563eb`	thông tin trung tính, tooltip

kiểu chữ

Nhóm	Font	Đậm	Chiều cao dòng	Sử dụng
display	Hanken Grotesk	700	1.1	hero, tuyên bố thương hiệu
heading	Hanken Grotesk	600	1.25	tiêu đề mục, tiêu đề card
text	Inter	400	1.6	nội dung chính, mô tả
ui	Inter	500	1.5	nút, input, nhãn
number	Space Grotesk	500	1.3	số liệu, ngữ cảnh monospace

khoảng cách

7 cấp độ trên lưới 4px: xs(4) sm(8) md(16) lg(24) xl(32) 2xl(48) 3xl(64).

bo góc

6 cấp độ: none(2px) sm(4px) md(8px) lg(12px) xl(16px) full(9999px).

cách đọc đặc tả

File đặc tả (DESIGN.md) sử dụng YAML frontmatter với các khóa cấp cao nhất sau:

colors — tất cả giá trị màu sắc được tổ chức theo thương hiệu/ngữ nghĩa
typography — nhóm font với họ, độ đậm, chiều cao dòng
spacing, radius, shadow — định nghĩa thang đo
components — props, trạng thái, biến thể, token theo từng component