Brand library / NEXOFRAME

NexoCrew

Brand source · 1.0.0

Jade cho trải nghiệm cộng tác với Human AI. Luôn tách bạch việc được giao, quyền được cấp và kết quả thực tế.

Nhân sự số

Có trách nhiệm. Dễ giao việc. Dễ kiểm soát.…

Nhận diện & nguyên tắc

Cá tính thương hiệu

Có trách nhiệm. Dễ giao việc. Dễ kiểm soát.

Không dùng màu Jade để tự ngụ ý “đã hoàn thành”. Trạng thái công việc phải có nhãn và bằng chứng.

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

Jade

…

Mint

…

Mist

…

Deep Jade

…

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 NexoCrew đ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="nexocrew" 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