Brand library / NEXOFRAME
NexoPay
Brand source · 1.0.0Cobalt định hướng các thao tác tài chính. Số tiền, đối tượng và trạng thái luôn đi cùng ngữ cảnh rõ ràng.
Thanh toán
Chính xác. Minh bạch. Đáng tin.
…Nhận diện & nguyên tắc
Cá tính thương hiệu
Chính xác. Minh bạch. Đáng tin.
Cobalt là màu thương hiệu, không thay thế trạng thái thông tin hay quyền thực hiện giao dịch.
QUY CHUẨN TỪ KIT
- Typeface
- Be Vietnam Pro
- Logo tối thiểu
- 32 px cao
- Symbol tối thiểu
- 24 px
- Clear space
- 24 đơn vị master
Bảng màu nhận diện
Cobalt
…Sky
…Ice
…Ink
…Màu nhận diện không thay cho semantic token. Brand và primary action dùng màu riêng của sản phẩm; link, selection và focus dùng Interaction Blue chung của suite.
Typography
BE VIETNAM PRO / VIETNAMESE FIRST
Aa Ăă Ââ Đđ
Thiết kế để hiểu. Xây dựng để dùng.
Chữ rõ ràng cho nội dung, thao tác và dữ liệu sản phẩm.
| Vai trò | Size / line-height | Weight |
|---|---|---|
| Display | 48 / 60 px | 700 |
| Heading 1 | 32 / 42 px | 700 |
| Heading 2 | 24 / 34 px | 600 |
| Body | 16 / 26 px | 400 |
| UI / Button | 14 / 22 px | 500 |
| Caption | 12 / 18 px | 400 |
Nhận diện trong giao diện
Giao diện minh họaMột việc rõ ràng. Một bước tiếp theo.
Nội dung, trạng thái và hành động giữ chung cấu trúc giữa các sản phẩm.
Thử nhấn nút để kiểm tra phản hồi.
Semantic tokens
| Token | Giá trị | |
|---|---|---|
semantic.surface.base | … | |
semantic.surface.canvas | … | |
semantic.text.primary | … | |
semantic.text.secondary | … | |
semantic.text.muted | … | |
semantic.border.subtle | … | |
semantic.action.primary.background | … | |
semantic.action.primary.foreground | … | |
semantic.brand.accent | … | |
semantic.brand.on-accent | … | |
semantic.brand.soft | … | |
semantic.brand.on-soft | … | |
semantic.brand.palette-1 | … | |
semantic.brand.palette-2 | … | |
semantic.brand.palette-3 | … | |
semantic.brand.palette-4 | … |
Giá trị đọc từ theme NexoPay đang hiển thị. Theme Nexi dùng namespace riêng --nexi-v2-*.
Tài sản & triển khai
<link rel="stylesheet" href="./brand/nexoframe/css/nexoframe.tokens.css">
<div data-nexo-product="nexopay" data-nexo-mode="light">
<!-- Component dùng --nf-* tokens -->
</div>Giữ nguyên tỉ lệ, màu và đường vector gốc. Clear space tính từ biên nhìn thấy, không tính từ khung xuất file. Font đi kèm giấy phép OFL.