Design Tokens & Component Library
Hệ thống ngôn ngữ thiết kế nhất quán cho Tập đoàn Nido Holdings và các tổ hợp nền tảng cốt lõi (NidoOffice, NidoAgent). Thiết kế theo triết lý kiến trúc tối giản, độ tương phản cao và hiệu năng tức thì.
Tokens & Biến màu sắc chuẩn hóa
Design Tokens
Surfaces & Void
Void
#07090E
--nido-void
Surface Base
#0C0F17
--nido-surface-base
Surface Card
#131722
--nido-surface-card
Surface Elevated
#1A2030
--nido-surface-elevated
Glass Overlay
rgba(17,20,28,0.75)
--nido-surface-glass
Corporate Suite Accents
Nido Core Blue
#3B82F6
--nido-accent-blue
NidoOffice Emerald
#10B981
--nido-brand-nidooffice
NidoAgent Sky
#38BDF8
--nido-brand-nidoagent
NidoEdge Purple
#A855F7
--nido-brand-nidoedge
Enterprise Amber
#F59E0B
--nido-brand-enterprise
Typography & Contrasts
Text Primary
#F8FAFC
--nido-text-primary
Text Secondary
#CBD5E1
--nido-text-secondary
Text Muted
#94A3B8
--nido-text-muted
Text Faint
#64748B
--nido-text-faint
Tương tác & Hành động
Button System
Variants & Styles
Hỗ trợ đầy đủ các ngữ cảnh từ CTA trọng tâm đến nút phụ mờ và cảnh báo.
Sizes & States
Các kích cỡ Small, Medium, Large và trạng thái Loading / Disabled.
Nhãn phân loại & Trạng thái thương hiệu
Badge & Status System
Corporate Suite Badges
Nhãn định danh đặc thù cho từng tổ hợp nền tảng thuộc hệ sinh thái Nido Holdings.
Standard Semantic Badges
Khung chứa thông tin đa tầng
Card Elevation System
Thẻ Glassmorphism
Sử dụng nền kính mờ `backdrop-filter: blur(16px)` tạo cảm giác chiều sâu không gian cao cấp.
Thẻ Tương Tác
Tự động nâng độ cao (lift translateY(-4px)) và đổi màu viền sáng tinh tế khi rê chuột.
Thẻ Viền Phát Sáng
Viền phát quang với shadow màu lam đặc trưng dùng cho các sản phẩm tiêu biểu của Studio.
Trường nhập liệu & Khả năng tiếp cận
Form Controls
Accessible Input & Textarea
Đồng bộ nhãn Accessible Label, trạng thái lỗi aria-invalid và focus ring chuẩn.
Chúng tôi chỉ dùng email này để gửi phản hồi hợp tác.
Định dạng email không hợp lệ. Vui lòng kiểm tra lại.
Tối đa 500 ký tự.
Chuyển đổi ngữ cảnh WAI-ARIA
Tabs & Segmented Controls
Segmented Controls
Hỗ trợ đầy đủ phím mũi tên Arrow Left / Arrow Right để chuyển tab.
Nội dung tab hiện tại:
Tab đang chọn: overview
Variant: Pills
Trình bày chỉ số trọng tâm
Metric Callouts
<15ms
NidoOfficeTốc độ phản hồi
Phân phối nội dung và tác vụ trên mạng lưới Edge.
70%
NidoAgentTự động hóa nghiệp vụ
Điều phối đa tác tử AI kết nối Private RAG.
100%
Zero-TrustChủ quyền dữ liệu
Kiến trúc Zero-Logging & cô lập VPC nội bộ.
99.99%
Enterprise CoreCam kết Uptime SLA
Hạ tầng phân tán sẵn sàng cho doanh nghiệp.
Cửa sổ tương tác native HTML5 dialog
Accessible Modal Dialog
Native Dialog Overlay
Được xây dựng trên thẻ HTML5 <dialog> chuẩn: hỗ trợ phím Escape, click bên ngoài để đóng, bẫy tiêu điểm (focus trap) và hiệu ứng backdrop blur mượt mà.