HybReport Design Language System

Bảng tham chiếu Design Token — Phiên bản 2.0

DLS v2 · OPUS-4.6

🎨 Bảng Màu Nền Tảng

Slate (Xám xanh)

50
100
200
300
400
500
600
700
800
900

Blue · Green · Amber · Red · Violet

B100
B500
B600
B700
G100
G500
G600
A100
A500
A600
R100
R500
R600
V100
V500
V600

🏷️ Token Ngữ Nghĩa

TokenGiá trịMục đích
--bg-page#f6f8fbNền trang chính
--bg-surfacergba(255,255,255,0.92)Nền thẻ/card
--border-default#dbe3efViền mặc định
--text-primary#172033Văn bản chính
--text-secondary#475569Văn bản phụ
--text-muted#64748bVăn bản mờ
--action-blue#2563ebHành động chính
--action-success#059669Thành công
--action-danger#dc2626Nguy hiểm/Lỗi
--action-warning#d97706Cảnh báo

✏️ Thang Chữ

Display / 2remTiêu đề lớn
H1 / 1.5remHeading Một
H2 / 1.25remHeading Hai
H3 / 1.1remHeading Ba
Body / 0.95remNội dung văn bản chính thức
Small / 0.85remChú thích nhỏ
Code / 0.8remconst token = 'value';

📐 Khoảng Cách

4px
8px
12px
16px
20px
24px
32px
40px
48px

⬜ Bo Góc

sm · 10px
md · 12px
lg · 14px
xl · 16px
pill · 999px

🌓 Độ Nổi (Elevation)

Shadow SM

0 1px 3px

Shadow MD

0 8px 24px

Shadow LG

0 14px 30px

📊 Bảng Màu Biểu Đồ

10 màu dành cho biểu đồ & trực quan hóa dữ liệu

1
2
3
4
5
6
7
8
9
10