Quy chuẩn thiết kế
một nền tảng
mọi phòng ban
iNET Design System cung cấp nguyên tắc thiết kế, UI components đã chuẩn hóa và công cụ tự động hóa giúp đồng bộ trải nghiệm số toàn hệ thống, tăng tốc phát triển cho mọi phòng ban.
Portal Hub: Phân Khu Theo Vai Trò
Bất kể bạn thuộc phòng ban nào, iNET Design System đều có khu vực tài nguyên chuyên biệt tối ưu hóa công việc hàng ngày.
Developer & Outsource
Component code sẵn sàng, tài liệu API, hướng dẫn tích hợp Storybook cho đa tech-stack.
- 45 Vi* Components · 4 Design Styles
- 29 MCP Tools · 216 CSS Tokens
- Storybook 10 · Nuxt 3 · Vue 3
Marketing & Sale
Quy chuẩn Banner, PowerPoint template và mẫu nội dung truyền thông chuẩn thương hiệu.
- Quy định phối màu banner
- Template trình chiếu iNET
- AI Prompt cho content
Brand & HR
Logo chuẩn đa định dạng, mascot Cú iNET, chữ ký email và tài liệu nội bộ.
- Trọn bộ Logo iNET
- Mascot Cú iNET 2026
- Email signature chuẩn
Designers (In & Out)
Quy tắc Grid, bảng màu chính/thứ cấp, kiểu chữ và logic bố cục chuẩn iNET.
- Nguyên lý bố cục UI/UX
- Figma guide (Tham chiếu)
- SVG icon library
Quy chuẩn cốt lõi
Trích xuất từ Brand Guidelines v2.0 của iNET. Nhấp vào màu để sao chép HEX.
Bảng màu thương hiệu chuẩn
Click để copy HEXMàu chủ đạo (Primary)
Màu UI & Thứ cấp
Nhận diện kiểu chữ
Tối ưu cho giao diện web & mobile iNET. Hỗ trợ đầy đủ tiếng Việt.
Tiêu đề dùng Black / ExtraBold
font-weight: 800–900
Nội dung dùng Regular (400) để tăng trải nghiệm đọc dễ chịu và rành mạch.
JetBrains Mono
Token names, code snippets, mono labels
Nguyên tắc sử dụng Logo & Khoảng trắng
Xem Brand Style Guide đầy đủKích thước tối thiểu
Vùng trống bảo vệ (Clear Space)
Duy trì vùng trống xung quanh logo bằng chiều cao của chữ "i" trong logo. Không đặt bất kỳ yếu tố nào vào vùng này.
Do / Don't
- Dùng trên nền trắng hoặc tối với độ tương phản đủ
- Giữ nguyên tỷ lệ gốc của logo
- Kéo dãn hoặc làm méo logo
- Thay đổi màu sắc của logo
- Đặt trên nền phức tạp, nhiều màu
UI Playground
Khám phá 216 design tokens, 5 DNA themes và bộ công cụ CLI + MCP Server của iNET Design System.
/* Dùng token trong CSS */
.my-btn { background: var(--brand-primary); }
.my-card { padding: var(--sp-16); border-radius: var(--radius-lg); }Nhật ký Cập nhật & Lộ trình
Theo dõi tiến trình phát triển iNET Design System.
viui-cli v1.2.1 — DNA Automation + One* Series Tokens
MCP auto-wire, One* Series Product Color Tokens, Feedback Widget Security Hardening, export identity token.
viui-cli v1.0.0 — 50 Vi* Components + Storybook 10
Ra mắt Storybook 10.3.5 tại viui.inet.vn/storybook, 50 Vi* components, Admin App v1, 34 story files, Guardian + MCP Server infrastructure.
viui-cli v2.0.0 — viui check + AI Generator
Pre-commit DNA gate, advanced theming AAA a11y, npm publish @hobui/viui-cli, AI page generator với Anthropic Claude SDK.