Nexi / Lens
Lens V2 · 1.0.0Lens là hướng nhận diện V2 của Nexi. Khung Iris và hạt Apricot tạo điểm nhìn; nhân vật hỗ trợ bên trong sản phẩm.
…Nhận diện & nguyên tắc
Cá tính thương hiệu
Bình tĩnh. Giải thích rõ. Tôn trọng quyết định.
Nexi không đổi theme của sản phẩm chủ. Apricot là điểm nhấn trang trí, không phải màu nút hoặc trạng thái.
- Typeface
- Be Vietnam Pro
- Logo tối thiểu
- 32 px cao
- Symbol tối thiểu
- 24 px
- Clear space
- 20 đơn vị master
Symbol chính thức không có gương mặt; avatar có gương mặt. Hạt Apricot giữ vị trí cố định. Dùng endorsement ở chiều cao từ 96 px, mascot toàn thân từ 80 px.
Bảng màu nhận diện
Iris
…Pearl
…Apricot
…Lilac
…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
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ọa
Mình giúp bạn hiểu bước tiếp theo.
Xem giải thích và nguồn trước khi đưa ra quyết định.
Biểu cảm có ngữ cảnh
Chào đón
Giải thích
Đang xử lý
Đang chờ
Cần xem xét
Đã hoàn thànhBiểu cảm phải khớp trạng thái thực tế. Chỉ dùng “Đã hoàn thành” sau khi hệ thống xác nhận kết quả.
Semantic tokens
| Token | Giá trị | |
|---|---|---|
nexiV2.semantic.surface.base | … | |
nexiV2.semantic.surface.canvas | … | |
nexiV2.semantic.text.primary | … | |
nexiV2.semantic.text.secondary | … | |
nexiV2.semantic.text.muted | … | |
nexiV2.semantic.border.subtle | … | |
nexiV2.semantic.action.primary.background | … | |
nexiV2.semantic.action.primary.foreground | … | |
nexiV2.semantic.brand.accent | … | |
nexiV2.semantic.brand.on-accent | … | |
nexiV2.semantic.brand.soft | … | |
nexiV2.semantic.brand.on-soft | … | |
nexiV2.semantic.brand.palette-1 | … | |
nexiV2.semantic.brand.palette-2 | … | |
nexiV2.semantic.brand.palette-3 | … | |
nexiV2.semantic.brand.palette-4 | … |
Giá trị đọc từ theme Nexi đ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/nexi/css/nexi-v2.tokens.css">
<div data-nexi-v2 data-nexi-mode="light">
<!-- Nexi nằm trong sản phẩm chủ -->
</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.