Design Tokens & Bảng Màu Nhận Diện
Quy chuẩn thiết kế đồng nhất theo tài liệu docs/design-system/layouts.md với hệ thống màu nông nghiệp số, typography và spacing chuẩn 4px.
1. Hệ màu Thương Hiệu Cốt Lõi (Mục 3.1)
Brand Primary
Màu thương hiệu chính
Brand Dark
Nút hover, tiêu đề nhấn
Brand Light
Nền xanh nhạt, thẻ nổi bật
Background
Nền tổng thể toàn trang
Surface
Card, modal, container
Text Primary
Văn bản nội dung chính
Text Secondary
Nhãn phụ, chú thích
Border
Đường kẻ, khung viền
Warning
Cọc chờ duyệt, cảnh báo
Danger
Lỗi, tranh chấp, hủy
Info / Blue
Thông tin, xuất khẩu
2. Quy Chuẩn 5 Màu Trạng Thái Thửa Đất (Visual Color Map)
Nông dân đang mở bán, thương lái có thể cọc
Có thương lái gửi cọc, đang chờ nông dân xác nhận
Khóa trọn thửa chống cọc đè
Đang hái quả, cân hàng và xuất bảng kê
Khiếu nại đang chờ xử lý
3. Spacing, Bo Góc & Touch Targets (Mục 3.3)
Hệ số khoảng cách (Spacing)
Bội số 4px: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
Bo góc chuẩn (Border Radius)
Input & Button: 8–10px | Card: 12–16px | Modal: 16px
Nông dân thao tác tại ruộng
Vùng chạm tối thiểu 44–48px cho nút bấm trên mobile