<>Design system là một tập hợp có cấu trúc các components, styles và hướng dẫn có thể tái sử dụng, đảm bảo tính nhất quán, hiệu quả và khả năng mở rộng trong thiết kế UI/UX. Nó bao gồm các yếu tố như colors, typography, spacing, components (buttons, inputs, cards), motion guidelines, và quy tắc trợ năng, cho phép các nhóm duy trì ngôn ngữ thiết kế gắn kết trong các dự án.
1️⃣ Foundations
🎨 Colors
– Primary Colors (Brand colors)
– Secondary Colors
– Background Colors
– Text Colors (Headings, Body, Captions, etc.)
– Status Colors (Success, Warning, Error)
🔤 Typography
– Font Families (Brand-approved fonts)
– Headings (H1, H2, H3, etc.)
– Body Text (Paragraphs, Captions)
– Line Height & Letter Spacing Guidelines
📏 Spacing & Layout
– Grid Systems (Column-based layouts)
– Margin & Padding Guidelines
– Auto Layout for Responsive Design
🌟 Shadows & Elevation
– Tạo chiều sâu khác nhau cho các element.
– Thường dùng cho Cards, Modals, Buttons
🔲 Border Radius
– Các bo góc chuẩn (Small, Medium, Large)
2️⃣ Components
🔘 Buttons
– Primary Button
– Secondary Button
– Disabled State
– Icon Button
📝 Inputs & Forms
– Text Fields (Single-line, Multi-line)
– Checkboxes & Radio Buttons
– Dropdowns & Select Menus
– Sliders & Toggles
📦 Cards & Containers
– Product Cards
– Profile Cards
– Information Blocks
🔝 Navigation Elements
– Menus (Top bar, Side menu)
– Tabs & Breadcrumbs
– Pagination
💬 Modals & Dialogs
– Pop-ups & Cảnh báo
– Các thông báo xác nhận
💡 Tooltips & Popovers
– Hover-based Information
– Guidelines for Usability
3️⃣ Design Tokens (Variables)
🎨 Color Tokens
– Primary / Secondary / Background / Text / Status
🔠 Typography Tokens
– Heading / Body / Caption / Button Text
📏 Spacing Tokens
– Small / Medium / Large / Extra Large
🌟 Elevation Tokens
– Shadow Levels (Depth 1, 2, 3, etc.)
4️⃣ Iconography & Illustrations
🖼 Icons
– System Icons (Navigation, Actions, Status)
– Social Media Icons
🎭 Illustrations
– Custom Artwork for Branding
– Guidelines for Usage
5️⃣ Motion & Interaction Guidelines
⚡ Micro-interactions
– Button Hover & Click Effects
– Toggle Switch Animations
🎬 Transitions & Animations
– Page Transitions
– Loading Effects
6️⃣ Accessibility Guidelines
🔍 Contrast Ratios
– Ensuring Readability
⌨️ Keyboard Navigation
– Tab Order & Focus States
🗣 Screen Reader Support
– ARIA Labels & Assistive Text
7️⃣ Branding Guidelines
🏷 Logos & Brand Identity
– Logo Variations
– Correct & Incorrect Usage
📝 Tone of Voice & Writing Style
– Guidelines for Consistent Messaging
📸 Imagery & Visual Style
– Approved Photography & Graphics
8️⃣ Variants & Auto Layout
🔄 Variants
– Different States of a Component (Default, Hover, Disabled)
📐 Auto Layout
– Dynamic Resizing for Responsiveness
9️⃣ Documentation & Guidelines
📖 Usage Rules
– Do’s and Don’ts for Components
