HybReport Design Language System

Bảng tham chiếu Design Token — Phiên bản OPUS-4.6

Bảng Màu Cơ Bản
Slate
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
Blue
500#3b82f6
600#2563eb
700#1d4ed8
Green
500#22c55e
600#16a34a
Amber · Red · Violet · Cyan
Amber 500#f59e0b
Red 500#ef4444
Red 600#dc2626
Violet 500#8b5cf6
Cyan 500#06b6d4
Token Ngữ Nghĩa
TokenGiá trịMô tả
bg-page#f6f8fbNền trang
bg-surface#ffffffNền bề mặt (card)
bg-elevated#ffffffNền nâng cao (modal, popover)
bg-muted#f8fafcNền phụ, nhạt
border-default#e2e8f0Viền mặc định
border-subtle#f1f5f9Viền nhẹ
border-strong#cbd5e1Viền đậm
text-primary#0f172aVăn bản chính
text-secondary#475569Văn bản phụ
text-muted#64748bVăn bản mờ
text-placeholder#94a3b8Placeholder
action-primary#2563ebHành động chính
action-success#059669Thành công
action-danger#dc2626Nguy hiểm / Lỗi
action-warning#d97706Cảnh báo
focus-ringrgba(37,99,235,0.25)Vòng focus
Thang Kiểu Chữ
Tiêu đề trang — Page Title
Inter 16px / 700
Tiêu đề mục — Section Header
Inter 13px / 600
Nhãn vi mô — Micro Label
Inter 10px / 700 / uppercase / 0.06em
Nội dung thường — Body text mặc định
Inter 13px / 400
Nội dung đậm — Body strong
Inter 13px / 600
BADGE
Inter 10px / 700
const token = "monospace";
JetBrains Mono 12px / 400
Khoảng Cách (Spacing)
4px
8px
12px
16px
20px
24px
32px
Bo Góc (Radius)
sm
4px
md
6px
lg
10px
xl
14px
pill
999px
Độ Nâng (Elevation)
sm
0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.03)
md
0 2px 6px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04)
lg
0 4px 12px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.05)
xl
0 8px 24px rgba(0,0,0,.09), 0 16px 48px rgba(0,0,0,.06)
Bảng Màu Biểu Đồ (Data Viz)
#3b82f6
#10b981
#f59e0b
#ef4444
#8b5cf6
#06b6d4
#f97316
#ec4899
#14b8a6
#6366f1

HybReport DLS · Token Reference · Tạo bởi OPUS-4.6 · 2026-05-17