Bảng màu (Apple Palette)
10 token màu theo đặc tả Modern Apple Design. Tối ưu độ tương phản và thẩm mỹ sang trọng.
ink
#1d1d1f
muted
#6e6e73
faint
#86868b
line
#d2d2d7
surface
#ffffff
canvas
#f5f5f7
accent
#0071e3
success
#248a3d
warning
#b25000
danger
#d70015
Typography (SF Pro & Inter)
Scale chuẩn phong cách Apple với kerning tracking chặt chẽ.
Display Title — 36px / 600
H1 Heading — 24px / 600
H2 Subtitle — 20px / 600
H3 Section — 16px / 600
Body Regular — 14px / 400. Đoạn văn bản mô tả linh kiện điện tử, thông số datasheet và tính năng nổi bật.
Small Caption — 12px / 400. Metadata, thời gian cập nhật đơn hàng và ghi chú kỹ thuật.
Nút bấm (Apple Pill Buttons)
4 variants × 3 sizes. Tất cả pill shape rounded-full tinh tế, hiệu ứng active bấm nảy.
Primary
Secondary
Danger
Ghost
Trường nhập liệu (Form Inputs)
Tối thiểu 8 ký tự
Nhãn trạng thái (Badges)
Màu sắc hài hoà trên nền nhạt, kích thước nhỏ gọn.
Variants
Small
Breadcrumb
Tabs chuyển đổi
Nội dung danh sách lọc theo tab: all
Bảng dữ liệu (Data Table)
Độ cao cân đối, padding gọn gàng, hỗ trợ hover.
| Tên linh kiện | Trạng thái | Giá | Tồn kho |
|---|---|---|---|
| ATmega328P DIP-28 | published | 45.000 đ | 120 |
| ESP32-WROOM-32D Dual Core | pending | 85.000 đ | 34 |
| LM358N Dual Op-Amp | draft | 12.000 đ | 0 |
Phân trang (Pagination)
Trạng thái rỗng (Empty State)
Chưa có linh kiện nào
Thêm linh kiện đầu tiên để bắt đầu bán hàng trên sàn.
Giỏ hàng trống
Thêm linh kiện vào giỏ để tiến hành đặt hàng.
Skeleton Loading
Product Cards