Design Principles

Design Principles

Mọi component trong 1thay đều tuân theo những nguyên tắc sau. Không phải quy tắc cứng nhắc — mà là la bàn để ra quyết định thiết kế.

---

1. Hierarchy over decoration

Khoảng cách mang ý nghĩa cấu trúc. Gần = cùng nhóm. Vừa = liên quan. Xa = chương mới.

• Dùng spacing để tạo status và sự bình tĩnh trước khi thêm container mới
• Mỗi section phải trả lời một câu hỏi của người dùng. Nếu section không có nhiệm vụ gì — xóa nó
• Tiêu đề cần deliberate line breaks. Đừng để text wrap một cách ngẫu nhiên

2. Color is functional, not decorative

Một accent color + một neutral family. Nếu mọi thứ đều màu mè, không gì quan trọng cả.

• ❌ Purple-blue gradient làm hero shortcut
• ❌ Flat white pages không có tonal hierarchy
• ❌ Dark mode với neon cyan hoặc violet accent
• ✅ Semantic color system: background, surface, text, muted, border, accent, on-accent, success, warning, error, focus
• ✅ Warm và cool neutrals không trộn lẫn ngẫu nhiên

3. Cards are not a design system

Card chỉ tồn tại khi elevation hoặc enclosure thực sự truyền tải hierarchy.

• ❌ Nested cards — hộp trong hộp trong hộp
• ❌ Decorative shells
• ✅ Dùng lines, dividers, tonal changes trước khi tạo thêm wrapper
• ✅ Trộn carded và uncarded sections để giữ nhịp trang
• ✅ Nếu dùng shadow, tint nó theo mood của trang — không dùng một black blur chung chung

4. Typography does the heavy lifting

• Define roles, not just tags: display, headline, title, body, caption, data/mono
• H1 nên gói gọn trong 1-3 dòng trên desktop. 4 dòng là trần
• Body text ở khoảng 60-70ch. Full-width body copy là sai lầm
• Dùng tabular numerals cho dữ liệu có cấu trúc, giá cả, bảng biểu
• Đừng dùng Inter hoặc system sans mặc định cho toàn bộ identity

5. Motion must earn its place

Motion phải làm rõ, xác nhận, dẫn đường, hoặc tạo affordance. Nếu chỉ để trang trí — giảm hoặc xóa.

• ✅ Transform và opacity. Không animate top, left, width, height
• ❌ transition-all duration-300 ở mọi nơi
• ❌ Fade-up stagger lặp lại trên mọi section
• ❌ hover:scale-105 generic
• Tôn trọng prefers-reduced-motion

6. States are not optional

Luôn thiết kế: loading, empty, hover, active, focus, disabled, error, success.

• Loading state: skeleton hoặc inline progress, không phải empty spinner
• Empty state: giải thích cái gì đang thiếu và người dùng nên làm gì tiếp
• Error state: nói cái gì thất bại, làm sao sửa, và giữ lại effort của người dùng
• Form: labels trên inputs, helper text khi cần, inline validation rõ ràng
• CTA: nói điều gì xảy ra tiếp theo, không dùng “Learn more” hay “Submit” mơ hồ

7. Every page should feel authored

Nếu một startup khác swap logo vào mà không có sự căng thẳng — trang đã thất bại.

• Dùng ít ý tưởng mạnh hơn là nhiều gesture yếu
• Chọn một hướng thẩm mỹ và commit — đừng trộn 3 style world
• Hero phải đọc như một “first scene” hoàn chỉnh
• Navigation phải cảm thấy là một phần của style, không phải layer dán lên trên
• Đừng mặc định: hero centered, 3 feature cards, testimonials, pricing, FAQ, footer CTA

8. Anti-Patterns (AI Tells)

Đây là những dấu hiệu nhận biết UI được sinh ra từ AI một cách generic:

Pattern	Tại sao fail
Purple/indigo accent mặc định	Không có chủ đích thương hiệu
Gradient text trên H1	Shortcut “premium” rẻ tiền
rounded-2xl trên mọi thứ	Thiếu material variety
Hero left-text right-image	Template nhàm chán
3 feature cards bằng nhau dưới hero	Bố cục không có suy nghĩ
Template: hero → features → testimonials → pricing → FAQ → CTA	Công thức máy móc
Logo strip làm filler proof	Thiếu proof thực sự
Dashboard screenshot trong hero không ai đọc được	Hình ảnh vô nghĩa
bg-white hoặc bg-gray-50 không có surface hierarchy	Trang phẳng, không có chiều sâu
Neon glow trên dark mode	”Gamer aesthetic” không chủ đích
Card trong card trong card	Container hell