DOL Kid Design System - Basic Guideline

Version: 0.2 (Draft)
Last updated: 2026-03-23
Scope: Baseline visual and UI guideline for KID-first product surfaces

1. Mục tiêu và phạm vi

Tài liệu này chốt baseline guideline cho DOL Kid Design System theo hướng:

• thân thiện với trẻ em,
• rõ ràng cho phụ huynh,
• dễ áp dụng nhanh trong thiết kế hằng ngày.

Tài liệu này ưu tiên trả lời:

• dùng font gì làm default cho KID,
• UI nên cute theo kiểu nào,
• nội dung nên ngắn và nhẹ tới đâu,
• spacing và layout nên thoáng ra sao để phù hợp với KID,
• shape và radius nên mềm tới mức nào để vừa cute vừa dễ dùng.

Scope chính:

• child-facing surfaces,
• mixed parent-child surfaces,
• KID LMS, exercise, discovery, và các card/flow KID-first.

Out of scope:

• parent-only analytics dày đặc,
• data table nặng,
• component microspec chi tiết từng pattern.

2. KID visual direction

KID UI nên theo trục:

• cute but calm
• playful but not noisy
• simple but not empty
• parent-readable, child-loved

Baseline cảm giác:

• dễ gần,
• tươi sáng,
• mềm mại,
• rõ việc cần làm tiếp theo,
• ít áp lực khi nhìn vào một màn hình.

Không nên đi theo hướng:

• gamification ồn ào,
• quá nhiều màu gắt cùng lúc,
• dashboard dày thông tin,
• layout chật để nhét nhiều card.

3. Typography baseline

Dependency: KID dùng chung text scale, size steps, và density system (compact/standard/extended/fit) từ DOL General DS (typography.md §2-5). KID chỉ override font-family thành Quicksand. Khi cần tra scale/size/density rules, xem typography.md.

3.1 Font family

Quicksand là font family mặc định cho KID UI.

Áp dụng mặc định cho:

• heading,
• body,
• label,
• button text,
• tab text,
• empty state và helper text ngắn.

Lý do:

• nét chữ tròn và mềm,
• tạo cảm giác thân thiện, gần gũi,
• hợp với tinh thần KID hơn hệ typography trung tính của DOL Design System tổng.

3.2 Weight rule

• Ưu tiên regular, medium, semibold
• Dùng bold cho CTA hoặc title thật sự quan trọng
• Không dùng light hoặc các weight quá mảnh

3.3 Text density rule

• Ưu tiên câu ngắn và cụm từ ngắn.
• Heading lý tưởng ở mức 1-2 dòng.
• Body copy mặc định ở mức 1-3 dòng.
• Tránh paragraph dài hoặc card chứa quá nhiều text.

3.4 Tone rule

• Ưu tiên sentence case.
• Hạn chế ALL CAPS.
• Không dùng wording nặng tính vận hành như analytics, module matrix, configuration.
• Copy nên rõ hành động và dễ hiểu với cả phụ huynh lẫn bé.

4. Content density rule

KID UI phải low reading load.

Nguyên tắc:

• một screen chỉ nên có 1 mục tiêu chính,
• một khối nội dung chỉ nên có 1 thông điệp chính,
• một thời điểm chỉ nên có 1 CTA chính,
• ưu tiên icon, audio, minh họa, hoặc hint ngắn thay cho prose dài.

Nên làm:

• rút gọn text tới mức cần thiết,
• dùng tiêu đề rõ nghĩa,
• chia nội dung thành block ngắn,
• giữ instruction thật ngắn trước khi bé thao tác.

Không nên:

• nhồi nhiều lời giải thích vào một card,
• đặt 2-3 CTA cùng trọng số,
• dùng card dài kiểu đọc nhiều rồi mới hành động.

4.1 Screen load rule

Một màn hình KID không nên cố hiển thị quá nhiều việc cùng lúc.

Ưu tiên:

• 1 hero task hoặc nội dung chính ở first view,
• 1 section phụ nếu thật sự cần,
• 1 lane hỗ trợ như progress, reward, hoặc hint.

Nếu cần nhiều hơn:

• tách theo step,
• tách theo tab,
• hoặc đẩy phần phụ xuống dưới fold.

Không nên:

• để first view chứa nhiều block cùng trọng số,
• vừa show task, progress, reward, feed, recommendation, và settings ở cùng một màn,
• bắt bé phải đọc rồi so sánh quá nhiều trước khi bấm.

5. Hierarchy and grouping

KID UI phải tối ưu hierarchy để bé nhìn vào là biết:

• đâu là phần quan trọng nhất,
• đâu là bước tiếp theo,
• đâu là thông tin phụ.

5.1 Visual hierarchy rule

Thứ tự ưu tiên mặc định nên rõ:

• primary action
• current task or hero content
• supporting information
• secondary action
• metadata

Nên tạo hierarchy bằng:

• kích thước,
• khoảng trắng,
• tương phản màu,
• độ đậm chữ,
• vị trí ưu tiên trên màn hình.

Không nên tạo hierarchy bằng:

• thêm quá nhiều màu nổi cùng lúc,
• tăng bold cho mọi thứ,
• nhét nhiều khối cùng trọng số trong một màn.

5.2 Proximity rule

Các element liên quan cùng một nhiệm vụ phải được đặt gần nhau.

Ví dụ:

• title, instruction, và CTA chính của một card nên ở cùng một cụm,
• label, input, helper/error text phải đi cùng nhau,
• answer option cùng một câu hỏi phải nằm trong cùng một nhóm rõ ràng.

Nếu hai nhóm chức năng khác nhau:

• phải tách bằng khoảng trắng rõ,
• hoặc tách bằng card/container riêng,
• hoặc đổi level visual rõ ràng.

5.3 Similarity rule

Các element cùng vai trò phải giống nhau đủ nhiều để bé nhận pattern nhanh.

Áp dụng cho:

• button cùng cấp,
• tab cùng cấp,
• answer option cùng loại,
• card cùng loại trong list,
• status chip hoặc reward badge cùng hệ.

Điều nên nhất quán:

• shape,
• kích thước,
• màu nền,
• icon position,
• text style.

Không nên:

• để cùng một loại action nhưng mỗi nơi một kiểu,
• đổi pattern chỉ để “trông đa dạng”.

5.4 One cluster, one purpose

Mỗi nhóm UI chỉ nên phục vụ 1 purpose chính.

Ví dụ:

• cluster Task: việc cần làm ngay
• cluster Progress: đã đi tới đâu
• cluster Reward: đã đạt gì
• cluster Support: gợi ý thêm hoặc thông tin phụ

Không nên trộn:

• progress + reward + warning + upsell trong cùng một cụm nhỏ,
• hoặc để một card vừa là intro, vừa là menu, vừa là result summary.

6. Layout and spacing

Spacing rộng rãi là default của KID UI.

Lý do:

• giúp UI thở tốt hơn,
• làm vùng bấm rõ hơn,
• giảm cảm giác áp lực cho bé,
• giúp phụ huynh scan nhanh hơn.

6.1 Spacing rhythm khuyến nghị

• khoảng cách rất nhỏ trong micro pattern: 8
• gap trong component hoặc group nhỏ: 12-16
• padding card hoặc panel: 20-24
• gap giữa section chính: 24-32
• page padding: ưu tiên 20+ trên mobile, 32+ trên desktop khi layout cho phép

6.2 Context-aware spacing rule

KID UI nên rộng rãi nhưng không rời rạc.

Nguyên tắc:

• gap giữa các element trong cùng một cụm phải đủ gần để đọc thành một nhóm,
• gap giữa hai cụm chức năng khác nhau phải đủ xa để thấy ranh giới,
• list item không nên tách quá xa nhau nếu bản chất là cùng một danh sách.

Khuyến nghị theo ngữ cảnh:

• item trong list hoặc option cùng nhóm: 8-12
• element trong một card hoặc một cluster nhỏ: 12-16
• khoảng thở giữa các cluster chính trong cùng một section: 16-24
• gap giữa các section chính: 24-32

Rule quyết định:

• nếu hai element cần được đọc là đi cùng nhau, giảm gap
• nếu hai nhóm cần được hiểu là khác nhiệm vụ, tăng gap

6.3 Touch target rule

• tối thiểu 44x44
• ưu tiên 48-56 cho action chính, answer option, tab, và item bé cần bấm thường xuyên

6.4 Layout density rule

• ưu tiên ít block hơn nhưng rõ hơn
• để nhiều khoảng thở giữa section
• không cố lấp đầy màn hình
• tránh 3 hàng card dày đặc cùng trọng số ngay trên first view

6.5 Responsive note

KID UI tuân theo responsive rule chung của DOL Design System:

• luôn dùng semantic token, không hardcode px theo breakpoint
• hệ thống đã map Desktop/Tablet/Mobile sẵn trong token layer
• chi tiết xem typography.md §6

7. Atomic design grouping

KID UI nên được chia nhóm theo atomic design để dễ maintain và giữ pattern ổn định.

7.1 Atom

Atom là phần tử cơ bản:

• icon,
• text style,
• button,
• input,
• badge,
• avatar,
• progress dot,
• sticker/reward token đơn lẻ.

Rule:

• atom phải đơn chức năng,
• không gánh quá nhiều meaning cùng lúc.

7.2 Molecule

Molecule là nhóm nhỏ của các atom phục vụ một hành vi ngắn:

• labeled input,
• answer option,
• tab item,
• stat chip,
• card header,
• progress summary mini.

Rule:

• molecule phải đọc ra được ngay là “một cụm có nghĩa”.
• các atom bên trong phải đi cùng nhau theo proximity và similarity.

7.3 Organism

Organism là khối UI lớn hơn giải quyết một nhiệm vụ:

• next action hero,
• course card,
• exercise question block,
• reward panel,
• task section,
• tab content section.

Rule:

• organism nên có một trọng tâm rõ,
• một heading rõ,
• một CTA chính nếu cần hành động.

7.4 Screen composition

Screen nên được ghép từ:

• vài organism rõ ràng,
• mỗi organism chứa các molecule ổn định,
• mỗi molecule dùng lại atom nhất quán.

Điều này giúp:

• UI rõ nhóm chức năng,
• dev/design reuse dễ hơn,
• bé và phụ huynh học pattern nhanh hơn.

Không nên:

• thiết kế thẳng ở mức screen mà không có grouping layer,
• hoặc tạo screen bằng nhiều block bespoke khó lặp lại.

8. Shape and component feel

KID UI nên dùng:

• bo góc lớn và mềm,
• card lớn, rõ trọng tâm,
• icon hoặc minh họa nhẹ,
• visual hierarchy rõ bằng kích thước, khoảng trắng, và màu.

Shape nên theo hướng:

• soft-large radius,
• không vuông cứng,
• không pill tròn hoàn toàn trong hầu hết trường hợp.

Cute nên đến từ:

• shape,
• spacing,
• illustration,
• nhịp feedback,

không phải từ:

• thêm quá nhiều sticker,
• thêm quá nhiều icon nhỏ,
• trang trí quá mức ở mọi chỗ.

8.1 Radius principle

KID UI ưu tiên bo góc tròn nhiều để tạo cảm giác mềm và dễ gần, nhưng mặc định không dùng full round.

Rule:

• radius nên đủ lớn để cảm thấy thân thiện,
• nhưng vẫn giữ được cảm giác control ổn định, không quá “kẹo ngọt”,
• cùng một family component nên tăng radius theo height.

8.2 Radius mapping khuyến nghị

Với control và button:

• height 56 -> radius 20
• height 48 -> radius 18
• height 32 -> radius 12

Với card hoặc panel lớn:

• card cao hoặc nổi bật trên 80 -> ưu tiên radius 32
• card trung bình -> ưu tiên radius 24
• card nhỏ hoặc nested panel -> ưu tiên radius 16-20

Nguyên tắc dùng:

• action càng chính, control càng lớn, radius có thể mềm hơn
• danh sách dày hoặc utility item nhỏ không cần radius quá lớn
• radius nên đồng bộ với spacing và padding bên trong, không chỉ tăng ở viền ngoài

9. Semantic colors and behavior

Dù KID UI ưu tiên màu tươi tắn, nhưng cần tuân thủ bảng Báo hiệu Hành Vi:

• Blue: Hành động chính yếu (Primary Action), Trạng thái Tab Active, Call to Action chính.
• Emerald: Hoàn thành (Success), Đã xong, Lời khen.
• Amber / Yellow: Đang làm dở dang (In-progress), Cần chú ý, Hạn chót.
• Purple: Yếu tố Gamification, Huy hiệu, Dấu ấn Cá nhân.
• Slate: Thông tin phụ, text không tương tác, viền inactive mặc định. Tuyệt đối không xài màu Black/Đen thuần (#000).

9.1 English Skill Semantic Colors

Để đồng bộ hoá trải nghiệm trên toàn bộ nền tảng DOL, các kỹ năng Tiếng Anh và dạng bài đánh giá trong KID UI được quy định màu sắc như sau (áp dụng cho Tag, Pill, Icon, Badge, Tint nền):

• Reading: Emerald / Green (Xanh lá)
• Listening: Blue (Xanh dương)
• Writing: Amber / Yellow (Vàng kem)
• Speaking: Rose / Red (Đỏ hồng)
• Tổng hợp / Full Test: Purple (Tím)

9.2 Surface theme và Border rule

KID UI luôn xây dựng trên nền trắng (bg-white), không dùng nền xám (bg-slate-50, bg-gray-50, v.v.) làm background chính.

Quy tắc nền (Background):

• Tất cả surface (page, shell, panel) phải dùng bg-white hoặc transparent làm nền mặc định.
• Nền xám nhạt (bg-slate-50, bg-blue-50, v.v.) chỉ dùng cho các zone nhỏ bên trong card hoặc section con - không phải cho background của toàn trang.
• Tuyệt đối không trộn dark theme với light theme. Không có navbar/header màu tối (bg-slate-900, bg-gray-900) đặt cạnh content sáng.
• Nếu cần phân biệt vùng (ví dụ: navbar vs. content), dùng border-b và backdrop-blur thay vì đổi tone nền.

Quy tắc viền (Border):

• Mặc định, các component dạng thẻ nội dung (Card), List Item, hoặc Panel Box trên nền trắng phải dùng viền đậm vừa (đề xuất: border-slate-200) thay vì viền quá nhạt (border-slate-100).
• Lý do: Đặc thù KID UI loại bỏ các khối shadow phức tạp và không bọc trong box nền xám, do đó viền card cần đủ độ tương phản để bé nhận diện giới hạn của khối thông tin một cách rõ ràng nhất mà không bị “chìm” vào màn hình.

Tổng kết:

• Parent Hub, LMS, và tất cả KID surface đều tuân theo cùng theme palette.
• Đảm bảo cảm giác tươi sáng và nhất quán xuyên suốt.
• Tránh xung đột thị giác khi chuyển giữa các khu vực.
• Giữ brand identity KID luôn rõ ràng, không bị pha loãng bởi dark theme vay mượn từ hệ thống khác.

10. Interaction and affordance (Interaction Khối)

Thay vì sử dụng các hệ thống đổ bóng (box-shadow) phức tạp dễ gây cảm giác lộn xộn, KID UI áp dụng cơ chế chỉ báo tương tác bằng viền đáy (border-bottom block).

Quy tắc Vàng:

“Nếu nhấn vào được (Clickable) → có khối viền đáy dày. Nếu chỉ để xem (Display Only) → phẳng hoàn toàn.”

• Trạng thái Tĩnh (Default): Các phần tử Clickable (Nút bấm, Card tương tác, Pill đang active) bắt buộc sử dụng border-bottom dày từ 3px đến 4px với màu tối hơn màu nền. Các phần tử Display Only (Card thông tin tĩnh, Widget thống kê) phải phẳng hoàn toàn, chỉ dùng border 1px mỏng, tuyệt đối KHÔNG dùng classes shadow.
• Trạng thái Tương tác (Pressed / Active): Khi click/chạm vào phần tử có khối, viền đáy sẽ giảm về 1px (active:border-b-[1px]) - bằng với border xung quanh - chứ KHÔNG biến mất hoàn toàn (border-b-transparent). Đồng thời phần tử “chìm” xuống bằng Transform để duy trì Box Model, triệt tiêu lỗi Layout Shift.
  • Công thức: translate-y = block_height - 1px. Ví dụ: block border-b-[4px] → active:border-b-[1px] active:translate-y-[3px]; block border-b-[3px] → active:border-b-[1px] active:translate-y-[2px].
  • Lý do: Khi border-bottom biến mất hoàn toàn, phần tử trông như mất viền, tạo cảm giác bị “vỡ” UI. Giữ lại 1px tạo sự đồng nhất viền khi nhấn.

11. Motion and feedback

Motion của KID UI phải có mục đích:

• giúp hiểu task,
• xác nhận thao tác,
• tạo reward moment ngắn,
• giữ nhịp vui nhưng không gây rối.

Rule cơ bản:

• feedback phải nhanh và rõ,
• correction phải nhẹ,
• celebration nên ngắn,
• animation không được làm chậm task chính.

12. Do and Dont

Do:

• dùng Quicksand làm font family mặc định cho KID UI
• dùng border-bottom dày để báo hiệu phần tử có thể CLICK được (nút, card)
• dọn dẹp sạch sẽ các box-shadow không cần thiết, phần tử Flat thì để phẳng hoàn toàn
• phối màu rực rỡ nhưng theo Semantic Behavior (Blue=CTA, Emerald=Success…)
• giữ copy ngắn và dễ hiểu
• giữ first view nhẹ và không nhồi quá nhiều khối thông tin
• làm hierarchy rõ ngay ở first view
• nhóm element cùng chức năng thật gần nhau
• giữ pattern giống nhau cho element cùng vai trò
• dùng spacing rộng rãi nhưng theo đúng ngữ cảnh list, cluster, section
• dùng radius lớn và mềm, nhưng không mặc định full-round
• map radius theo height và vai trò của component
• giữ control đủ to tạo cảm giác thân thiện và dễ bấm
• ưu tiên 1 CTA chính mỗi block
• dùng màu và minh họa để tạo warmth, không dùng noise
• chia screen theo atom -> molecule -> organism rõ ràng
• giữ tinh thần cute but calm

Dont:

• KHÔNG dùng box-shadow lung tung để tạo độ nổi, làm rác màn hình
• KHÔNG làm drop shadow cho nút bấm, hãy dùng border-bottom block
• không nhồi text dài
• không nhồi quá nhiều block cùng trọng số vào một màn hình
• không để nhiều block cùng trọng số cạnh nhau mà không có hierarchy
• không trộn nhiều chức năng khác nhau vào cùng một cluster
• không đổi pattern của cùng một loại element chỉ để trang trí
• không làm grid/card quá chật
• không tách item trong cùng một list quá xa nhau
• không dùng radius nhỏ làm UI bị cứng, nhưng cũng lạm dụng pill shape cho mọi thứ
• không biến KID UI thành dashboard dày thông tin
• không lạm dụng ALL CAPS
• không dùng motion chỉ để “cho vui”
• không tạo cảm giác thi cử hoặc áp lực ở child-facing layer nếu không thật sự cần
• KHÔNG dùng nền xám (bg-slate-50) hoặc nền tối (bg-slate-900) cho background toàn trang - luôn dùng bg-white
• KHÔNG trộn dark theme và light theme trong cùng một surface (ví dụ: navbar tối + content sáng)

13. Quick checklist trước handoff

• Đã dùng Quicksand làm font mặc định cho surface này chưa?
• Copy đã đủ ngắn để bé hoặc phụ huynh scan nhanh chưa?
• First view đã đủ nhẹ chưa, hay vẫn đang có quá nhiều khối cùng lúc?
• Hierarchy đã đủ rõ để nhìn vào là biết đâu là việc chính chưa?
• Các element cùng nhiệm vụ đã được nhóm gần nhau chưa?
• Các element cùng vai trò đã giữ cùng pattern chưa?
• Screen đã được chia thành các cụm atom -> molecule -> organism rõ chưa?
• Mỗi block đã có đúng một việc chính cần làm chưa?
• Spacing đã đủ thoáng chưa, và đã đúng nhịp giữa list, cluster, và section chưa?
• Touch target có đủ lớn để bé bấm dễ không?
• Radius của control/card đã đủ mềm và phù hợp với height chưa?
• Cute đã đến từ shape/spacing/illustration chưa, hay đang đến từ trang trí quá mức?
• UI có giữ được cảm giác playful but calm không?

14. Related docs

KID Design System:

• docs/kid/README.md
• docs/kid/Design System Report/README.md

General DOL Design System (shared foundation):

• ../../ds-guideline/typography.md - typography scale, density, responsive
• ../../ds-guideline/color.md - semantic text color hierarchy
• ../../ds-guideline/radius.md - radius token mapping
• ../../ds-guideline/spacing.md - spacing tokens, atomic grouping

Design System tổng quan:

• docs/overview.md

KID UX Design:

• docs/Domains/DOL Kid/UX Design/Learning Experience/LMS/KID_LMS_Exercise_Playful_Foundations_00_Overview.md
• docs/Domains/DOL Kid/UX Design/Learning Experience/LMS/KID_LMS_Home.md

Canonical workflow:

• GUIDELINES_MASTER.md (root repo)