🎨 Color Foundations
Click vào ô màu bất kỳ để copy mã HEX.
🔤 Typography Foundation
Heading 1 (32px)
--font-size-h1
--line-height-tight (1.2)
H1. Tiêu đề chính hệ thống văn bản nhiều dòng để kiểm tra độ cao của dòng.
Heading 2 (24px)
--font-size-h2
--line-height-base (1.5)
H2. Tiêu đề vùng nội dung nhiều dòng để kiểm tra độ cao của dòng một cách trực quan nhất.
--font-size-h3
--line-height-base (1.5)
H3. Tiêu đề khối / Box nhỏ nhiều dòng để xem khoảng cách dòng.
Body (16px)
--font-size-body
--line-height-loose (1.75)
Chữ văn bản nội dung thông thường (Body text) sử dụng font chữ Raleway. Khi áp dụng line-height loose (1.75), các đoạn văn dài có nhiều dòng sẽ trở nên thông thoáng, rõ ràng, giúp mắt người đọc không bị mỏi khi lướt qua các tài liệu dài.
Button / Label (14px)
--font-size-button
--line-height-tight (1.2)
LABEL TEXT
Caption (12px)
--font-size-caption
--line-height-base (1.5)
* Text ghi chú hoặc mô tả phụ nhỏ nhiều dòng để kiểm tra giãn dòng caption.
📐 Spacing Foundation
--spacing-xs (4px)
--spacing-sm (8px)
--spacing-md (16px)
--spacing-lg (24px)
--spacing-xl (32px)
🔲 Border Radius Foundation
--radius-sm (4px)
--radius-md (8px)
--radius-lg (12px)
--radius-full (9999px)
👥 Elevation Foundation (Box Shadow)
--elevation-none
None
--elevation-sm
Shadow SM
--elevation-md
Shadow MD
--elevation-lg
Shadow LG
--elevation-xl
Shadow XL
💧 Opacity Foundation
Opaque / Nền đặc (1) --opacity-opaque
High Content / Chữ chính (0.87) --opacity-high
Medium / Chữ phụ (0.6) --opacity-medium
Disabled / Vô hiệu hóa (0.38) --opacity-disabled
Hover State / Phủ nền (0.08) --opacity-hover
Transparent (0) --opacity-transparent