Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0235phút ước tínhCơ bản đến Thực chiến

2. Xây Dựng Design System Tinh Gọn: Bảng Màu, Typography & Hệ Thống Lưới Khoảng Cách

Thiết lập nền móng thẩm mỹ chuyên nghiệp: Nguyên tắc phối màu 60-30-10, tương phản dễ đọc chuẩn WCAG AAA và tỷ lệ khoảng cách 4px-8px.

📐 3 Quy Tắc Vàng Của Design System

Quy tắc phối màu 60-30-10:

$60\%$ Màu nền chủ đạo (Neutral / Light Gray / Deep Slate).
$30\%$ Màu bề mặt thẻ & chữ chính (Surface & Body text).
$10\%$ Màu điểm nhấn (Accent Color: Indigo, Emerald, Orange) dành riêng cho các nút bấm hành động (CTA).

Typography có thứ bậc (Visual Hierarchy): Tiêu đề H1 (Bold 32-40px), Tiêu đề H2 (Semibold 24px), Đoạn văn Body (15-16px, line-height 1.6).
Spacing System bội số của 8: Mọi khoảng đệm padding, margin, gap đều là bội số của 4 hoặc 8 (8px, 16px, 24px, 32px, 48px).

 example.py
// tailwind.config.js - DESIGN SYSTEM TINH GỌN
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f5f3ff',
          500: '#6366f1', // Màu điểm nhấn chính (Accent)
          700: '#4338ca',
          900: '#312e81',
        },
        surface: {
          light: '#ffffff',
          dark: '#0f172a', // Nền Dark mode chuẩn Slate
        }
      },
      fontFamily: {
        sans: ['Inter', 'Plus Jakarta Sans', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      }
    }
  }
}

Thực hành

Thực hành và tự đánh giá

Tạo một bảng mẫu Style Guide trực quan trong Claude Artifacts hiển thị đầy đủ bảng màu, các cấp độ chữ và bộ nút bấm tiêu chuẩn.

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.