---
name: "ZAME STUDIO"
colors:
  primary: "#26314F"
  secondary: "#183D35"
  accent: "#E8913C"
  background: "#FFF9EF"
  surface: "#FFFEFA"
  border: "#EEE3D1"
  text: "#26314F"
  text-muted: "#626B7D"
  success: "#287A56"
  warning: "#9B520F"
  danger: "#B23A48"
typography:
  display:
    fontFamily: "Manrope, Be Vietnam Pro, system-ui, sans-serif"
    fontSize: "56px"
    fontWeight: 800
    lineHeight: 1.08
  heading-lg:
    fontFamily: "Manrope, Be Vietnam Pro, system-ui, sans-serif"
    fontSize: "40px"
    fontWeight: 800
    lineHeight: 1.15
  heading-md:
    fontFamily: "Manrope, Be Vietnam Pro, system-ui, sans-serif"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 1.25
  body-md:
    fontFamily: "Be Vietnam Pro, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: "Be Vietnam Pro, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.5
  code:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.6
spacing:
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  6: "24px"
  8: "32px"
  12: "48px"
  16: "64px"
  24: "96px"
rounded:
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  full: "9999px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFEFA"
    rounded: "{rounded.md}"
    padding: "12px 20px"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
  body-copy:
    textColor: "{colors.text-muted}"
  link-accent:
    textColor: "{colors.accent}"
  status-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFEFA"
  status-warning:
    backgroundColor: "{colors.warning}"
    textColor: "#FFFEFA"
  status-danger:
    backgroundColor: "{colors.danger}"
    textColor: "#FFFEFA"
  divider:
    backgroundColor: "{colors.border}"
---
# DESIGN.md: ZAME STUDIO

## 1. Visual Theme & Atmosphere

ZAME STUDIO là thư viện thực hành dành cho người xây sản phẩm với AI. Giao diện ấm áp, rõ ràng, đáng tin và thân thiện; ưu tiên nội dung, nguồn gốc và khả năng sử dụng. Dùng minh họa chibi của Zame Guide như người bạn đồng hành, với chuyển động nhẹ, vui vẻ. Tránh cảm giác học thuật, hiệu ứng 3D nhựa, trang trí dày hoặc bố cục rập khuôn. Tiếng Việt là mặc định; lựa chọn tiếng Anh nằm trong menu ngôn ngữ.

## 2. Color Palette & Roles

- **Primary `#26314F`**: tiêu đề, điều hướng, nút chính và trạng thái chọn.
- **Secondary `#183D35`**: điểm nhấn xanh đậm cho trạng thái hoặc thành phần phụ.
- **Accent `#E8913C`**: liên kết nổi bật, nhấn nhỏ và chi tiết minh họa.
- **Background `#FFF9EF` / Surface `#FFFEFA`**: nền ấm nhẹ và bề mặt nội dung.
- **Border `#EEE3D1`**: đường phân cách mềm, không tạo khung nặng.
- **Text muted `#626B7D`**: mô tả và thông tin phụ.
- Màu semantic chỉ dành cho trạng thái. Giữ tương phản văn bản theo WCAG AA, tối thiểu 4.5:1 với nội dung thường.

## 3. Typography Rules

Dùng Manrope cho tiêu đề và Be Vietnam Pro cho nội dung, có fallback hệ thống. Dùng font mono cho lệnh và mã. Theo scale trong front matter; tiêu đề ưu tiên dễ đọc, nét chắc, không dùng serif biên tập. Đoạn văn nên giữ khoảng 65 đến 75 ký tự mỗi dòng. Nội dung thường tối thiểu 14px; menu tối thiểu 16px. Tránh viết hoa kéo giãn ở tiêu đề chính và không lạm dụng chữ đậm.

## 4. Component Stylings

- **Button**: nền primary cho hành động chính; nút phụ nền trong hoặc surface, viền border. Radius md, vùng bấm tối thiểu 44px. Có hover, active, focus-visible, disabled và loading.
- **Input**: nhãn rõ ràng phía trên, viền border, nền surface; focus có viền primary và focus ring. Báo lỗi bằng chữ và màu, không chỉ bằng màu.
- **Card**: surface, viền nhẹ, radius lg, shadow sm. Hover nâng nhẹ hoặc đổi viền; không phóng to mạnh.
- **Navigation**: tương phản rõ, chữ đủ lớn và đậm vừa; hover đổi màu, dịch chuyển tối đa 2px và hiện gạch nhấn ngắn. Menu mobile dùng nút có nhãn truy cập.
- **Agent**: mascot Zame Guide có lời chào theo giờ Việt Nam. Cho phép tương tác bằng chuột, chạm và bàn phím. Tôn trọng `prefers-reduced-motion`.
- Dùng lại Tailwind, shadcn/ui và Radix component đã có trong dự án trước khi tạo component khác.

## 5. Layout Principles

Container tối đa 1240px, padding ngang 16px đến 24px trên màn nhỏ và 40px trên màn rộng. Dùng lưới linh hoạt, khoảng cách theo thang 4px. Mỗi section có tiêu đề và mô tả gọn. Căn trái nội dung để dễ quét; chỉ căn giữa khi bố cục ngắn và có chủ đích. Không để thanh công cụ, code hoặc bảng gây tràn ngang.

## 6. Depth & Elevation

Nền là cấp 0; card ở cấp 1 dùng shadow sm; dropdown và popover ở cấp 2 dùng shadow md; modal ở cấp 3 dùng shadow lg cùng lớp phủ. Ưu tiên viền mảnh và màu nền phân cấp. Không xếp nhiều hơn hai bóng trên cùng một phần tử.

## 7. Do’s and Don’ts

**Nên làm:** dùng token trong front matter; giữ nguồn GitHub và ngày cập nhật rõ; cung cấp focus state, nhãn, alt text và trạng thái loading/empty/error; giữ lời văn thực tế và ngắn gọn.

**Tránh:** tự thêm màu, font hoặc spacing ngoài token; dùng gradient tím xanh mặc định, emoji thay icon, bóng nặng, viền sáng bóng hoặc hình ảnh trông như nhựa; bỏ outline bàn phím; dùng màu duy nhất để truyền đạt trạng thái; dùng gạch ngang dài trong nội dung giao diện.

## 8. Responsive Behavior

Thiết kế mobile-first và rà soát ở 375px, 768px, 1280px. Trên màn nhỏ, lưới thành một cột, điều hướng thu gọn, tiêu đề giảm theo tỉ lệ và mascot không che nội dung. Vùng chạm tối thiểu 44×44px. Media giữ đúng tỉ lệ và tải trì hoãn khi phù hợp. Kiểm tra zoom, bàn phím và reduced motion.

## 9. Agent Prompt Guide

Trước khi sửa giao diện, đọc file này và `AGENTS.md`. Tái sử dụng component và token đang có. Ví dụ: “Đọc DESIGN.md trước khi làm. Thiết kế trang theo đúng token, responsive tại 375/768/1280, có hover và focus-visible, giữ nội dung tiếng Việt và không thêm màu ngoài hệ thống.” Khi hoàn tất, chạy lint/build và kiểm tra Lighthouse, axe hoặc Playwright theo quy tắc dự án. Cập nhật file này khi design system thay đổi.

## Nhập và kiểm tra

Đặt file tại thư mục gốc dự án. Trong `AGENTS.md`, yêu cầu coding agent đọc `DESIGN.md` trước mọi thay đổi UI. Có thể thêm các Skill tham khảo như UI/UX Pro Max, Vercel Web Design Guidelines và Anthropic Frontend Design; chúng bổ trợ quy trình, không thay thế token thương hiệu.

```bash
npm install -g uipro-cli
uipro init --ai codex
npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent codex
npx -y skills add anthropics/skills --skill frontend-design --agent codex
npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
npx @google/design.md export --format dtcg DESIGN.md > tokens.json
```

Định dạng và khóa YAML của Google Labs DESIGN.md còn có thể đổi. Kiểm tra tài liệu của spec hiện hành nếu lệnh lint/export báo lỗi. Giữ file đồng bộ với Figma hoặc design system thực tế; DESIGN.md hướng dẫn agent nhưng không tự xác minh code đã tuân thủ.