Thẻ công cụ
Dùng cho các mục trong danh mục, chỉ số, tóm tắt tính năng và bản xem trước nhẹ.
Token
Màu sắc, khoảng cách, bán kính và chuyển động
Token là nguồn chân lý duy nhất được phép cho các nguyên thủy trực quan. Trang mới nên dùng chúng, không định nghĩa lại.
Nền
Bề mặt
Màu nhấn
Bán kính
6 / 10 / 16
Chỉ dùng `sm`, `md`, `lg`.
Khoảng cách
8-32
Hầu hết UI nằm trong dải khoảng cách cốt lõi.
Chuyển động
150-220ms
Hiệu ứng chuyển tiếp nên nhẹ nhàng và nhanh.
Kiểu chữ
Phân cấp dễ đọc với mật độ gọn
H1 trang: nhận diện chính của trang
Phần H2: khối nội dung chính
Nhóm thẻ H3: nhóm phụ
Thẻ H4: tiêu đề thẻ chuẩn
Văn bản dẫn dùng cho phần giới thiệu ngắn của trang và các đoạn giải thích.
Văn bản nội dung là lớp mặc định cho văn bản trợ giúp, mô tả công cụ và giải thích kết quả.
Chú thích dùng cho siêu dữ liệu, bộ đếm, ghi chú trường và phần trợ giúp phụ.
Thẻ
Vùng chứa nội dung được chuẩn hóa
Thẻ danh sách
Dùng cho các hàng kết quả, công cụ liên quan, danh sách chuyển nhanh hoặc khối lịch sử gần đây.
Điều khiển
Nút, trường nhập, pill và ngôn ngữ trạng thái
Mẫu
Bố cục trang có thể tái sử dụng
!
Thông báo chính
Dùng khối thông báo cho văn bản trợ giúp, thông điệp quyền riêng tư hoặc giới hạn của công cụ.
| Lớp | Trường hợp sử dụng |
|---|---|
| Token | Màu sắc, kiểu chữ, khoảng cách, chuyển động |
| Nền tảng | Các thành phần cơ sở về kiểu chữ và bố cục |
| Thành phần | Nút, thẻ, điều khiển biểu mẫu |