Brand library / NEXOFRAME
NexoBox
Brand source · 1.0.0Nhận diện gốc của hệ sinh thái. Ink tạo nền trung tính để thông tin và sản phẩm dẫn dắt trải nghiệm.
Hệ sinh thái sản phẩm
Điềm tĩnh. Rõ ràng. Có hệ thống.
…Nhận diện & nguyên tắc
Cá tính thương hiệu
Điềm tĩnh. Rõ ràng. Có hệ thống.
Giữ khoảng trống 24 đơn vị quanh biên nhìn thấy của logo. Không bóp méo khung N hoặc thay 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
Ink
…Slate
…Cloud
…White
…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 NexoBox đ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="nexobox" 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.