Design Principles: Minimalist Premium

Vision: Chuyển dịch hoàn toàn tư duy thiết kế từ phong cách “Layered” (Nhiều lớp) sang “Minimalist Premium” (Tối giản cao cấp). Chúng ta loại bỏ sự “ồn ào” của các hiệu ứng trang trí thừa thãi để đạt được sự tinh tế, sắc sảo và chuyên nghiệp - tương tự như định hướng của Apple, Linear hay Stripe.

---

1. The Silence of Color (Sự Tĩnh Lặng Của Màu Sắc)

Nguyên tắc: Màu sắc không dùng để lấp đầy khoảng trống, mà để dẫn lối sự chú ý.

• White Canvas (Nền trắng tinh khôi): Toàn bộ nền tảng được đưa về màu trắng sạch (White). Loại bỏ các nền xám đục, gradient 7 sắc cầu vồng hay các mảng màu nền đậm (heavy backgrounds). Khoảng trắng (White space) chính là yếu tố sang trọng nhất.
• Monochrome Base (Cấu trúc đơn sắc): Hệ thống màu sắc chủ đạo là Monochrome (Đen, Trắng, Xám Slate). Văn bản phụ, đường kẻ, icon không trọng tâm phải chìm vào nền một cách tinh tế (sử dụng các sắc độ xám trung tính).
• Action Color (Màu hành động): Màu ắc (Accent Color) chỉ được phép xuất hiện khi có yếu tố tương tác (Action) hoặc trạng thái quan trọng (Status). Khi bối cảnh chung “im lặng”, một điểm màu nhỏ sẽ trở thành tiếng nói mạnh mẽ nhất.

2. Extreme Typographic Contrast (Tương Phản Typography Cực Đại)

Nguyên tắc: Tạo ra nhịp điệu thị giác bằng sự đối lập gay gắt nhưng hài hòa về kích thước và trọng lượng.

• Tight & Heavy Headings: Tiêu đề (Headings) mang tính tuyên ngôn. Sử dụng trọng lượng font rất đậm (Bold/Black) kết hợp với khoảng cách chữ được thu hẹp (Tracking-tight). Điều này tạo cảm giác vững chãi, chắc chắn và hiện đại.
• Micro-labels (Nhãn siêu nhỏ): Các thông tin phụ trợ (metadata, nhãn, tag) sử dụng kích thước nhỏ, viết in hoa (Uppercase) và tăng khoảng cách chữ (Tracking-widest). Cách xử lý này tạo ra vẻ đẹp kỹ thuật (technical look), thoáng đãng và không tranh chấp với nội dung chính.
• Visual Rhythm: Sự kết hợp giữa “To-Đậm-Chặt” và “Nhỏ-Thanh-Thưa” tạo ra một nhịp điệu rõ ràng, giúp mắt người dùng quét nội dung nhanh chóng mà không bị mỏi.

3. Borders over Shadows (Đường Nét Thay Vì Bóng Đổ)

Nguyên tắc: Sử dụng sự sắc sảo của đường nét để định hình không gian, thay vì ảo ảnh chiều sâu mờ ảo.

• Subtle Borders: Ưu sử dụng các đường viền siêu mảnh (1px) với màu sắc rất nhạt để phân chia ranh giới các thành phần (Cards, Sections). Nó tạo cảm giác phẳng, hiện đại và minh bạch.
• Soft Shadows (Bóng đổ tương tác): Loại bỏ bóng đổ đen kịt, dày đặc dùng để tạo khối 3D giả. Bóng đổ (Shadow) chỉ nên xuất hiện nhẹ nhàng (loãng, opacity thấp) khi có tương tác (Hover/Lift up) để báo hiệu khả năng bấm được.
• Super Rounded Corners (Bo góc lớn): Tăng độ bo góc của các thành phần (Cards, Modals) lên mức cao. Các đường cong mềm mại tạo cảm giác thân thiện, trôi chảy và mang tính “công nghệ” (hi-tech friendly).

4. Context-Aware UI (Thiết Kế Thấu Hiểu Ngữ Cảnh)

Nguyên tắc: Giao diện không tĩnh tại; nó phải “sống” và phản hồi lại tâm lý người dùng tại thời điểm đó.

• Psychological Mapping: Mỗi thành phần UI phải được thiết kế dựa trên câu hỏi: “Người dùng đang cảm thấy gì?”. (Ví dụ: Tại Dashboard cần sự thúc đẩy -> dùng Checklist; Tại bài học khó cần sự đồng hành -> hiện Classmates).
• Living Indicators: Sử dụng các tín hiệu động (Motion, Pulse) để dẫn dắt sự chú ý vào các sự kiện đang diễn ra (Happening Now). Giao diện phải cho thấy nó đang hoạt động theo thời gian thực.
• Storytelling Elements: Sử dụng visual để kể câu chuyện hành trình (như timeline nối liền, highlight bước hiện tại, làm mờ bước quá khứ). Giúp người dùng luôn định vị được bản thân trong hệ thống.