Cảm hứng Apple WWDC26
Thiết kế calm-first cho giao diện SEOMONEY
Bộ hướng dẫn thương hiệu lấy cảm hứng từ ngôn ngữ thiết kế WWDC26: rõ ràng, yên tĩnh, biên tập. Dùng làm tham chiếu cho mọi trang công cụ và dashboard trong tương lai.
Giống như E-DNA, trang này là documentation, không thay đổi style toàn cục và tái sử dụng theme tokens sẵn có.
01 — Nguyên tắc
Design Principles
Ba nguyên tắc dẫn dắt mọi quyết định giao diện. Khi phân vân, ưu tiên theo thứ tự Clarity → Calm → Editorial.
Clarity — Nội dung dẫn dắt
Mọi quyết định thị giác phục vụ thông điệp. Bớt flourish, thêm cấu trúc. Người đọc nhận ngay mục đích trang.
Calm — Khoảng trắng là tính năng
White space có chủ đích, không phải đồ thừa. Nhịp điệu yên tĩnh giúp đọc lâu không mỏi. Tránh "wall of widgets".
Editorial — Nhịp biên tập
Ít widget, mạnh section. Hero lớn, navigation gom theo nhóm, highlight card grid, status module calm. Không cảm giác link-cloud.
02 — Kiểu chữ
Typography
Hilda cho tiêu đề (display), Manrope/Inter cho thân bài, mono cho số liệu. Tỷ lệ nhất quán, không quá nhiều họ font.
Specimen
Quy tắc
- Tỷ lệ: clamp() cho mọi tiêu đề lớn — co trên mobile, mở trên desktop.
- Letter-spacing: -0.02em đến -0.03em cho display, 0 cho thân.
- Số liệu: font-family mono +
font-variant-numeric: tabular-numsđể cột số thẳng hàng. - Không bao giờ dùng font decorations (comic, script) cho giao diện dashboard.
03 — Bố cục
Layout Grammar
Cấu trúc trang lặp lại, dự đoán được. Người dùng học một lần, dùng mọi nơi.
1. Large hero
Tiêu đề + lede + stats. Mở trang bằng mục đích rõ, không widget rác ngay đầu.
2. Grouped navigation
Menu theo nhóm danh mục phẳng, không dropdown nhiều tầng. Phẳng = mượt.
3. Highlight card grid
auto-fill, minmax(300px,1fr) — responsive tự nhiên, mobile hạ xuống 1 cột.
4. Calm status modules
Tính trạng thái (uptime, deploy) tĩnh, nhỏ, không nhấp nháy. Trạng thái ≠ alarm.
5. Clear content rails
Sticky TOC rail trái/phải khi đủ rộng, inline scroll-x khi hẹp — giữ ngữ cảnh.
Spacing scale
--wd-1..8: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64px — cấp số nhân 1.5× đơn giản.- Max-width: 1240px cho trang document, 1180px cho catalog grid.
- Radius: 4px (calm), 10px (card), 999px (chip/pill).
04 — Màu
Color Tokens
Tái sử dụng theme tokens, không invent màu mới. Màu là tín hiệu phụ, không bao giờ là tín hiệu duy nhất.
Quy tắc: tối đa 1 accent + neutral trên mỗi màn hình. Tránh gradient nhiều màu cho nền dashboard.
05 — Thành phần
Component System
Vài nguyên tố lặp lại, kết hợp được thành mọi trang. Demo thực tế ở dưới.
Hero card + grid card + filter chip
WWDC26
Khung hero: eyebrow + tiêu đề lớn + lede + stats. Dùng cho trang danh mục.
Session #201
Meet the new Liquid Glass design — 24:09 · Design
Session #202
What's new in SwiftUI — 32:42 · SwiftUI
Quy ước đặt tên
- BEM-like:
.wwdc__card,.wwdc__card--title(block__element--modifier). - Một namespace mỗi trang:
.hw-(home wwdc),.wd-(wwdc dok),.edna-— tránh đụng kiểu dáng toàn cục. - State classes:
--active,--disabled,is-hiddenqua thuộc tínhhidden.
06 — Checklist
Do / Don't
Danh sách rút gọn. Khi review trang mới, kiểm tra nhanh bảng này.
Nên làm
- Dùng spacing scale & clamp() cho mọi kích thước
- Thiết kế cho 360px trước, mở rộng lên
- Sticky rail cho TOC khi đủ rộng
- Tabular-nums cho cột số liệu
- Một accent + neutral mỗi màn hình
- Nội dung dẫn dắt, bớt flourish
Không làm
- Pattern dashboard crypto/fintech (đèn nhấp nháy)
- Màu làm tín hiệu duy nhất (cần nhãn/icon)
- Link-cloud hay wall of widgets
- Dropdown nhiều tầng
- Gradient nhiều màu cho nền dashboard
- Font decoration (comic, script)
- Widget rác ngay đầu hero