content design

content design là thiết kế ngôn từ trong giao diện — microcopy, label, error message, empty state. trong 1thay, ngôn từ được thiết kế cùng lúc với component, không phải viết sau.

voice & tone

quy tắc viết

chung

• lowercase toàn bộ — không viết hoa đầu câu trong label, button, placeholder. trừ tên riêng và nhãn hiệu.
• không dấu chấm câu cuối — label và button không kết thúc bằng dấu chấm.
• dùng dấu cách đúng — một dấu cách giữa các từ, không có dấu cách thừa.
• số và đơn vị — cách nhau bằng dấu cách: "24 người", "3 phút", "$84,250".
• ngày tháng — định dạng dd/mm/yyyy: "27/05/2026".

label

• ngắn, 1-3 từ: "email", "họ tên", "mật khẩu mới"
• danh từ hoặc cụm danh từ, không phải câu
• không dùng dấu hai chấm cuối label
• label cho field bắt buộc: không thêm dấu *, dùng helper text nếu cần

placeholder

• mô tả định dạng mong đợi, không lặp lại label
• dùng ví dụ cụ thể: "nhập email, ví dụ: [email protected]"
• không dùng placeholder thay cho label

button

• động từ hành động: "lưu", "xoá", "tải lên", "gửi"
• 1-2 từ, rõ hành động sẽ xảy ra
• không dùng "có" / "không" một mình — dùng "xoá" / "giữ lại"

error & helper text

• nêu lỗi cụ thể + cách sửa: "email không đúng định dạng, ví dụ: [email protected]"
• không đổ lỗi cho người dùng: tránh "bạn đã nhập sai"
• helper text giải thích yêu cầu trước khi người dùng nhập

empty state

• title: mô tả trạng thái hiện tại — "chưa có dữ liệu", "không tìm thấy kết quả"
• description: giải thích tại sao + gợi ý hành động tiếp theo
• action: nút rõ ràng để bắt đầu — "tạo mới", "điều chỉnh bộ lọc"

toast

• 1 dòng, bắt đầu bằng động từ quá khứ
• "đã lưu", "đã gửi lời mời", "có lỗi xảy ra, thử lại"
• tự động ẩn sau 3 giây — đủ để đọc, không cản trở

từ vựng chuẩn

các thuật ngữ dùng thống nhất trong toàn bộ hệ thống.

nguyên tắc thiết kế nội dung

1. nội dung là một phần của design system — không phải thứ viết sau khi code xong. mỗi component có text mẫu.
2. tiếng việt trước, tiếng anh sau — text mặc định là tiếng việt. component hỗ trợ i18n qua props.
3. kiểm tra cùng lúc với code — mỗi story có text thực tế, không dùng lorem ipsum.
4. ngữ cảnh quyết định giọng điệu — error page trang trọng hơn toast. empty state thân thiện hơn form validation.
5. nhất quán từ vựng — một khái niệm, một từ. không dùng "lưu" chỗ này rồi "cập nhật" chỗ kia cho cùng một hành động.