Brand library / NEXOFRAME

NexoBox

Brand source · 1.0.0

Nhậ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ọa

Mộ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

Logo primary · SVG Logo inverse · SVG Resolved tokens · light JSON Theme tokens · CSS

HTML

<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.

ÁP DỤNG THEME

Một Button, nhiều nhận diện

Mở playground