Colors
Color palette dưới dạng CSS variables. Dùng var(--blue-500) thay vì hardcode hex.
Blue scale
Ink (text)
Accent (yellow)
Semantic
Neutrals
Typography
2 font families: Inter (body) và Space Grotesk (display/headings).
Display H1 / Space Grotesk
Display H2
Display H3
Body large — Inter 17px, ink-soft. Dùng cho lead paragraphs trong section heads.
Body regular — Inter 15px, ink. Mặc định cho text content.
Body small — Inter 13px, ink-mute. Dùng cho metadata, captions.
font-family: var(--font-body); /* Inter */
font-family: var(--font-display); /* Space Grotesk */
font-family: var(--font-mono); /* Space Grotesk (mono context) */
Shadows & Radii
3 elevation levels và 5 border radius scales.
Radii
Buttons
3 variants: primary (dark), accent (yellow), ghost (outline). Tất cả đều có ripple hover effect.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-ghost">Ghost</button>
Badge pill
Live indicator với pulse animation, dùng cho hero — "Đang mở đăng ký", "Live now", v.v.
<span class="badge-pill">
<span class="pulse"></span> Text here
</span>
Section heads
Cấu trúc tiêu đề chuẩn cho mỗi section: eyebrow + h2 + tagline.
Tiêu đề section ở đây
Mô tả ngắn, thường 1-2 dòng để dẫn dắt vào nội dung bên dưới.
Forms
Inline form (horizontal) với input + submit button. Message states cho success/error.
On light background
Message states
On dark background
Override .form-message.success và .error cho dark theme (xem cách [IELTS-Coaching.html](IELTS-Coaching.html) làm trong section .cta-final).
FAQ accordion
Dùng native <details> element — không cần JavaScript.
Câu hỏi đầu tiên?
Trả lời chi tiết ở đây. Có thể nhiều dòng và format markdown nếu cần.
Câu hỏi thứ hai (đang mở)?
Khi bạn click vào summary, dấu + sẽ đổi thành dấu –.
Info trigger
Icon button nhỏ để mở modal/tooltip, đặt inline cạnh text.
Học phí đã bao gồm tài liệu và 1 buổi test trình độ .
Modal
Backdrop + card structure. Click button bên dưới để xem demo.
Reveal on scroll
Thêm class .reveal + toggle .in bằng IntersectionObserver. Variants: .from-left, .from-right, .zoom, delays .delay-1 → .delay-4.
<div class="reveal">Fade up</div>
<div class="reveal from-left delay-2">Slide from left</div>
<div class="reveal zoom delay-3">Zoom in</div>
All tokens reference
Bảng tham chiếu nhanh tất cả CSS variables. File: design-system/tokens.css
| Category | Token | Value |
|---|---|---|
| Font | --font-body | Inter, sans-serif |
| Font | --font-display | Space Grotesk, sans-serif |
| Shadow | --shadow-sm | 0 10px 25px -15px rgba(27,63,178,.35) |
| Shadow | --shadow-md | 0 18px 40px -20px rgba(27,63,178,.4) |
| Shadow | --shadow-lg | 0 30px 60px -25px rgba(27,63,178,.35) |
| Radius | --radius-sm | 8px |
| Radius | --radius-md | 14px |
| Radius | --radius-lg | 22px |
| Radius | --radius-xl | 28px |
| Radius | --radius-pill | 999px |
| Layout | --container-max | 1180px |
| Layout | --container-pad | 24px |
| Line | --line | rgba(47,91,224,.18) |