Brand library / NEXOFRAME
NexoCRM
Brand source · 1.0.0Coral mang sự ấm áp vào nhận diện quan hệ khách hàng. Hành động dùng Interaction Blue chung của suite.
Quan hệ khách hàng
Gần gũi. Chủ động. Cụ thể.
…Nhận diện & nguyên tắc
Cá tính thương hiệu
Gần gũi. Chủ động. Cụ thể.
Coral thuộc `--nf-semantic-brand-*`; primary action, link, selection và focus dùng cobalt theo DS-020.
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
Coral
…Peach
…Blush
…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 NexoCRM đ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="nexocrm" 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.