Design System — vominhhuy.com
Tài liệu tham chiếu trực quan cho website cá nhân của Võ Minh Huy. Mọi token, motif và component dưới đây được render bằng đúng CSS production trong css/design-system.css. Đọc trang này trước khi code để giữ nhất quán: tông tối/sang, duotone lime (dữ liệu/hệ thống) + ember (hành động/mệnh Hỏa), chữ Be Vietnam Pro + IBM Plex Mono.
Màu sắc
Nền than đen, 2 accent: lime cho dữ liệu, ember cho hành động.Quy tắc: LIME = terminal, workflow, label mono, link, dấu ✓ — mọi thứ "dữ liệu/hệ thống". EMBER (gradient) = chỉ dùng cho nút hành động chính và ánh sáng nền ấm. Nền đen giữ nguyên. Ngũ hành: Mộc/xanh sinh Hỏa/đỏ.
Typography
Be Vietnam Pro (sans, hỗ trợ tiếng Việt) + IBM Plex Mono (label kỹ thuật).letter-spacing −.03em
letter-spacing −.02em
line-height 1.6–1.78
color --text / --muted
12px · letter-spacing .12–.16em
uppercase · prefix //
Import: family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600
Spacing & Radii
Bo góc và nhịp khoảng cách thống nhất.| Token | Giá trị | Dùng cho |
|---|---|---|
| radius · button | 9–11px | Nút, input, chip nhỏ |
| radius · card | 12–20px | Card, panel, modal |
| radius · pill | 100px | Badge, tag, nút tròn |
| container | min(1180px, 100% − 48px) | Bề rộng nội dung, căn giữa |
| section padding | 64–100px (dọc) | Khoảng cách giữa các khối |
| card padding | 22–30px | Đệm trong card |
| grid gap | 1px (hairline) · 14–24px | Lưới liền mạch / lưới rời |
| nav height | 64px | Header sticky |
| hit target | ≥ 38–44px | Nút bấm tối thiểu |
Lưới nền & Glow
Hai motif nền đặc trưng tạo chiều sâu "kỹ thuật".Lưới mờ phủ toàn trang, mask radial ở đỉnh. Chỉ trang trí — không cản nội dung.
Quầng sáng ember sau hero & khối CTA. Bán kính ~340–460px, đặt qua ::before.
Eyebrow / Label
Nhãn mono mở đầu mọi section — chữ ký của hệ thống.Eyebrow luôn IBM Plex Mono, uppercase, letter-spacing .12–.16em, thường prefix // và dùng snake_case tiếng Việt cho chất "code".
Terminal card
Motif chủ đạo: biến chuyên môn trừu tượng thành thứ "chạy được".Dùng cho: hero (index), callout trong bài viết, trạng thái rỗng (404 / search). Thanh 3 chấm #2c3138, body mono, con trỏ lime nhấp nháy 1.1s.
Buttons
Primary luôn là gradient ember. Ghost cho hành động phụ.Primary --fire-grad + chữ --fire-ink, hover nâng −2px + glow ember. Ghost viền --line, hover viền lime. Nút mono cho khu vực "kỹ thuật" (nav, terminal).
Badges / Pills
Trạng thái, nhãn loại, tag.Cards
Bề mặt --bg-1, viền hairline, hover nâng + viền lime.Marketing Automation
Tự động hoá vận hành: email, nurturing, chấm điểm lead, báo cáo.
Website Development
Web tốc độ cao, chuẩn SEO, gắn liền mục tiêu chuyển đổi.
Pattern lưới: dùng gap:1px; background:--line cho lưới liền mạch (hairline divider), hoặc gap:14–24px cho card rời. Hover: translateY(-3px) + border-color:--acc-line.
Form & Input
Nền chìm --bg-2, focus viền lime.Accordion
Curriculum & FAQ. Toggle max-height .3s.Bấm để mở/đóng. Curriculum cho phép mở nhiều mục; FAQ chỉ mở một mục (single-open).
State qua class .open + max-height transition. Mũi tên xoay 180°, đổi sang lime khi mở.
Image placeholder
Chỗ chờ ảnh thật — class .ph với data-label.Mọi ảnh chưa có dùng <div class="ph" data-label="mô tả"> — nền sọc chéo + nhãn mô tả nội dung cần đặt. Thay bằng <img> khi có asset thật.
Animation
Tinh tế, có mục đích — luôn tôn trọng prefers-reduced-motion.| Hiệu ứng | Thông số | Dùng ở |
|---|---|---|
| reveal on scroll | opacity 0→1 + translateY 16–18px · .6s | Mọi section (IntersectionObserver) |
| count-up | cubic-out · ~1.4s | Số liệu thống kê |
| hover lift | translateY(-2/-3px) · .15–.2s | Nút, card |
| cursor blink | steps(1) · 1.1s | Terminal |
| pulse (live dot) | opacity · 1.6–2s loop | Chấm trạng thái |
| accordion | max-height · .3s ease | Curriculum, FAQ |
| node run | chấm lime chạy dọc · 3s loop | Workflow (index) |
Không dùng scrollIntoView (gây lỗi) — dùng scrollTo({behavior:'smooth'}). Mọi animation trang trí dừng khi prefers-reduced-motion: reduce.
Tone & Voice
Cách viết chữ trên giao diện.• Xưng "mình / Huy", gọi người đọc là "bạn" — gần gũi, chuyên gia nhưng không xa cách.
• Câu ngắn, chủ động, hướng kết quả: "biến việc thủ công thành hệ thống chạy 24/7".
• Label kỹ thuật dùng snake_case + prefix // để giữ chất automation.
• Tránh sáo rỗng, không nhồi số liệu vô nghĩa. Một câu đắt hơn ba câu thừa.
Do & Don't
Giữ hệ thống nhất quán.- Dùng gradient ember cho mọi nút hành động chính
- Lime cho dữ liệu, terminal, label, link, dấu ✓
- Eyebrow mono mở đầu mỗi section
- Viền hairline --line, nền card --bg-1
- Khoảng trắng rộng rãi, một điểm nhấn mỗi màn
- Không trộn màu lạ ngoài lime/ember/charcoal
- Không dùng ember cho text dài hay nền lớn
- Không bo góc quá tròn (>20px) cho card
- Không emoji trang trí (trừ khi có chủ đích)
- Không gradient nền sặc sỡ, không đổ bóng nặng