Giao diện
Brand Guidelines
TL;DR — Use the Sư Tử Con identity extracted from sutucon.com/brand: warm sand canvas, lion-orange primary, deep ink text, Lexend headings, Be Vietnam Pro body, pill buttons with a bottom "ledge". The learner UI shows one idea per screen, Brilliant-style.
Nguồn: https://sutucon.com/brand (trích xuất 20/10/2026). Hãy kiểm tra lại với đội thương hiệu trước khi phát hành chính thức.
Thông điệp
- Tên: Sư Tử Con · Mô tả: Trường học năng lực tương lai.
- Câu chủ đạo: "Con học để tạo ra điều có ích."
- Giọng điệu (suy ra từ nội dung trang): ngắn, trực tiếp, khích lệ, nói thẳng với học viên bằng "em".
Màu sắc
| Token | Hex | |
|---|---|---|
sand | #fbf8f1 | |
cream | #f4ecdc | |
card | #ffffff | |
ink | #172a33 | |
gray | #3f4d55 | |
muted | #5b6870 | |
line | #eadfcb | |
edge | #e6d5b8 | |
soft | #fbebd3 | |
orange | #db6718 | |
orangeStrong | #a84c0f | |
orangeSoft | #fff0e3 | |
gold | #e5ad18 | |
green | #3f7655 | |
greenSoft | #eaf3ec | |
lion | #f58220 | |
cubCream | #f2c077 | |
cocoa | #4a3428 | |
paper | #f4ebdd | |
savanna | #3f5546 | |
midnight | #172a33 | |
danger | #9b342a | |
dangerSoft | #f9ece9 |
- Font tiêu đề / Heading:
"Lexend", "Be Vietnam Pro", Arial, sans-serif - Font nội dung / Body:
"Be Vietnam Pro", Arial, sans-serif - Bo góc / Radius: xs 10px · sm 14px · md 20px · lg 28px · pill 999px
- Shadow:
0 1px 0 #7a3a0c1a, 0 14px 30px -20px #7a3a0c73· Ledge:0 3px 0 #a84c0f
| Vai trò | Token | Dùng cho |
|---|---|---|
| Nền | sand | Nền trang |
| Chữ | ink | Nội dung chính |
| Hành động chính | orange (hover lion, nhấn orangeStrong) | Nút chính, tiến độ |
| Thành công | green / greenSoft | Đúng, hoàn thành |
| Cảnh báo/lỗi | danger / dangerSoft | Chưa đúng |
| Bề mặt | card, cream, soft | Thẻ, chip, khối nhấn |
Kiểu chữ
Tiêu đề Lexend (500–800, tracking −0.02em); nội dung Be Vietnam Pro (400–800). Cỡ chữ màn học: câu hỏi và nội dung chính 24px; đáp án 18px; chú thích 12–14px.
Thành phần
- Nút chính: hình viên thuốc, nền cam, "ledge"
0 3px 0 #a84c0f; khi bấm hạ xuống 3px. Nút thành công dùng xanh lá. - Thẻ: bo 20px, viền
line, bóng mềmshadow. - Khối nhấn lớn: bo 28px, nền
soft. - Đáp án: viền 2px; chọn = cam, đúng = xanh, sai = đỏ nhạt.
Nguyên tắc giao diện học tập (kiểu Brilliant)
- Một màn, một thông tin — một câu hỏi, một ý, hoặc một nhiệm vụ.
- Một nút chính cố định ở đáy; nút bị vô hiệu cho tới khi đủ điều kiện.
- Phản hồi ngay, ở dưới màn hình, bằng màu và lời ngắn.
- Tiến độ liên tục ở trên cùng, không đếm số bước gây áp lực.
- Nhiều khoảng trắng, chữ lớn, không trang trí thừa.
- Nhãn chặng nhỏ ở đầu màn để học viên luôn biết mình đang ở đâu trong chu trình học.
- Không mất công sức: đổi ngôn ngữ không xóa câu đang gõ.
Không nên
Không sao chép mascot/minh họa của thương hiệu khi chưa có file chính thức; không dùng màu ngoài bảng; không đặt nhiều hơn một nút chính trên một màn.