Design system
Hải Đồ
Sự chính xác của một hãng giao nhận quốc tế: giấy hải đồ xám lạnh, mực navy cảng và một màu cam tín hiệu. Toạ độ, mã cảng UN/LOCODE và nhãn trường vận đơn là chi tiết chữ; thông tin nằm trong ô viền 1px thay cho thẻ đổ bóng; góc vuông. Điểm nhấn là hải đồ tuyến vẽ bằng SVG, bảng lật chữ báo cảng đích và phiếu yêu cầu báo giá dựng như một tờ vận đơn.
Font
Tiêu đề
Libre Franklin
Đưa hàng Việt ra biển lớn
Nội dung
Public Sans
Một đầu mối cho cả lô hàng: booking, đóng hàng, thông quan và giao tận kho người mua.
Số liệu, toạ độ, mã cảng
Chivo Mono
VNHPH 20°51′N 106°41′E → NLRTM
Màu
Giấy hải đồ
#ECEEE9
Nền. CMS: Màu nền
Mực
#0F1B24
Chữ, viền đậm. CMS: Màu chữ
Navy cảng
#10283A
Nút chính, dải CTA, footer. CMS: Màu chính
Cam tín hiệu
#E2541B
Tuyến, đèn trạng thái, nút báo giá, chữ nhấn. CMS: Màu nhấn
Ô vận đơn
nền + 45% trắng
Nền ô nhập, thẻ
Vạch kẻ
chữ 16% trên nền
Viền ô, lưới kinh vĩ (8%)
Thang chữ
H1
Tinh tế trong từng chi tiết
Libre Franklin 600 · 40→84px · -3.5% · lh 0.98
H2
Tinh tế trong từng chi tiết
Libre Franklin 600 · 32→54px · -3%
Số liệu
Tinh tế trong từng chi tiết
Libre Franklin 600 · số đều · -4%
Thân
Tinh tế trong từng chi tiết
Public Sans 400 · 15→16px
Nhãn
Tinh tế trong từng chi tiết
Chivo Mono 500 · 11px · in hoa · +8%
Nhãn trường
Tinh tế trong từng chi tiết
Chivo Mono · 10px · in hoa · +10% · mờ 42%
Bo góc
- Mặc định0px (CMS: Bo góc = Vuông)
- Ô bảng lật chữ2px
Khoảng cách
- Khung nội dung1344px, lề 20 → 40px
- Khoảng section64px → 96px
- Lưới kinh vĩô 96px, vạch 1px
Chuyển động
Hiện dần 600ms cubic-bezier(.2,.8,.2,1): mờ → rõ, nhích 14px, mép dưới mở như cửa container. Tuyến trên hải đồ vẽ dần 2.2s, tàu chạy dọc tuyến, cảng có vòng sóng lan. Bảng lật chữ đổi cảng đích mỗi 4 giây. Vạch kẻ bảng dịch vụ sáng cam theo con trỏ.
Thành phần
- TEU mỗi năm
- 48.000+
- Đúng lịch
- 98,6%