Tiệm Trà Mơ Ước — Design System

Nút bấm của game: nút lớn 3D ở cuối mỗi hộp thoại, nút nhỏ trong hàng nhập/mua, nút phụ, nút nguy hiểm và nút Xuống Phố ở mặt tiền.

Nút lựa chọn dạng viên thuốc: tab Trà / Topping / Dụng cụ, chọn Theo ngày/tuần/tháng, bộ lọc sao trong đánh giá.

Nút tròn chỉ có icon PNG, dùng cho Tạm dừng, Cài đặt và Kho hàng ở thanh HUD lúc đang bán.

Hàng bấm được trong hộp thoại Cài đặt: icon, nhãn và giá trị hiện tại căn phải.

Công tắc bật/tắt cho các tuỳ chọn Cài đặt như Nhạc nền, Âm thanh, Rung.

Lưới ô chọn màu giao diện, mỗi ô là một vòng tròn chia đôi (nền / màu nhấn) của chính theme đó.

Ô nhập mã giãn chữ, căn giữa: mã PIN, mã quà, mã sao lưu 8 số; biến thể tên quán dùng chữ thường.

Ô nhập giá bán theo nghìn đồng, có đơn vị "k" phía sau, dùng trong tab Giá bán của chủ quán.

Thanh kéo chọn một giá trị trong khoảng, dùng cho âm lượng và tốc độ ngày (4/5/6 phút).

Ô tăng/giảm số lượng gồm nút −, ô nhập số và nút +, dùng khi lên kế hoạch số phần mỗi món.

Dải tab kiểu bìa hồ sơ ở màn chuẩn bị (Kho, KPI nhân viên, Đóng thuế…), tab đang chọn nối liền với pane bên dưới.

Hàng nút chuyển trang ở danh sách dài như Đánh giá của khách: ◀ 1 2 3 … 8 ▶.

Mái hiên sọc hồng trắng ngay dưới HUD, viền vỏ sò rủ xuống phía dưới.

Bảng phấn xanh "Menu hôm nay" ở màn chuẩn bị: món, giá bán, topping và phụ phí size L.

Thanh trên cùng của game: nút tròn và ngày ở trái, tên quán với tiền két ở giữa, sao đánh giá cùng nút Xuống Phố ở phải.

Biển tên quán: tấm giấy kem viền gỗ ở đầu màn chuẩn bị (bấm để đổi tên), và biển gỗ tối ở cửa tiệm trên màn Xuống Phố.

Màn chào khi mở game: tranh tiệm trà vẽ tay, tên game, tagline, dòng chủ quán, thanh loading rồi nút "Vào tiệm".

Chân dung nhân vật dùng chung cho khách, nhân viên và bạn bè: ảnh tròn hoặc vuông bo góc, tên, vai trò và huy hiệu tâm trạng; mặt khách cắt từ atlas assets/Sprites/faces.webp.

Linh vật mèo đứng ở mặt tiền: chạm để chào mời khách, có bong bóng lời nhắc, nhãn nhỏ phía dưới và trạng thái hồi chiêu đếm ngược.

Thẻ shipper giao đơn online: ảnh hoặc mặt shipper, tên và trạng thái đơn (đang lấy hàng, đang giao, đã giao); kèm marker nhỏ cho bản đồ giao hàng.

Mặt khách hình tròn viền 2px: ảnh nhân vật vẽ tay hoặc emoji, dùng trên thẻ khách, đánh giá và danh sách nhân viên.

Nhãn nhỏ cạnh tên món hoặc số liệu: tag "Mới", hạn dùng, hết hàng, pill khuyến mãi và pill số.

Ô lưu ý nhỏ: sự kiện trong ngày, khoản vay gợi ý, dự báo khách, cảnh báo nhẹ và thông báo lên cấp.

Thẻ nền panel viền 2px bo 14: thẻ "Mục tiêu ngày" với các dòng tiến độ, trạng thái hoàn thành và thẻ két tiền (till).

Hàng danh sách món/nguyên liệu: icon 30px, tên và dòng phụ ở giữa, điều khiển ở bên phải (tab Kho, danh sách nâng cấp).

Sổ sách / biên lai cuối ngày: tiêu đề mục, các dòng thu chi, bảng kê theo món và dòng tổng; số căn phải, chữ số đều cột.

Thanh tiến độ mảnh: tiến độ mục tiêu ngày, độ kiên nhẫn của khách và thanh doanh thu trong bảng kê.

Hiển thị điểm sao: dòng sao + số (tt-rating) và khối tổng hợp đánh giá có 5 thanh phân bố bấm lọc được (tt-rating-summary).

Một đánh giá của khách: mặt/ảnh khách, tên, ngày, số sao, nội dung và (nếu có) lời phản hồi của chủ quán.

Hàng 3 ô số liệu nhỏ (khách, ly bán, doanh thu), dùng ở đầu tổng kết ngày và trên bảng điều khiển.

Hàng bạn bè / bảng xếp hạng: hạng (1–3 có huy hiệu cúp), avatar, tên quán, sao, doanh thu, món ruột và nút Thách đấu / Gửi quà.

Thẻ quà / lì xì từ bạn bè: icon, tên quà, giá trị, người gửi, nút Nhận, cùng lưới chọn mức lì xì và ô nhập mã quà.

Thẻ đơn online qua app (Soppi, Tóp Tóp, Biiiii, Gờ Ráp): nguồn, món, số tiền sau phí 20%, thời gian chờ và nút Nhận / Từ chối.

Hợp đồng đặt tiệc: khách đặt, số ly, cọc, tiền trả khi giao, thưởng và hai nút Ký / Bỏ qua.

Sổ tiết kiệm Tà Tưa Bank: số dư, lãi 1%/ngày, kỳ hạn, ngày đáo hạn, tiến độ và nút Gửi / Rút; có biến thể khoản vay.

Thẻ nhân viên trong tab Nhân viên và KPI: avatar, tên, vai trò, lương/ngày, buff KPI, thanh chu kỳ, nút Thuê / Cho nghỉ; kèm widget nhân viên Gen Z dưới quầy.

Thẻ nâng cấp trong tab Nâng cấp: icon, tên, hiệu ứng, cấp hiện tại / tối đa, giá và nút Mua.

Banner cảnh báo nội tuyến nằm trong trang, có icon, tiêu đề, nội dung, tối đa 2 nút và nút đóng ×: "Kho sắp hết trân châu đen — còn 3 phần", "Đã đóng thuế, khách tăng 10% suốt chu kỳ 72h".

Bong bóng lời thoại: lời khách trong thẻ khách và ở quầy, lời linh vật ở mặt tiền. Khối dùng lại được, kích thước theo chữ nên chạy ở mọi cỡ DOM.

Bong bóng hướng dẫn màu xanh dương kèm vòng nhấp nháy quanh phần tử cần thao tác ("Nhấn giữ hũ trà để rót, thả tay ở vạch xanh").

Đồng hồ đếm ngược dạng pill đổi màu theo trạng thái: thuế 72h "Còn 23:59:12", hồi chiêu "Hồi chiêu 4:59", ca đêm.

Hộp thoại modal trên nền mờ: hỏi xác nhận ("Đóng thuế 72h?"), tổng kết ngày, và thông báo "Lời nhắn từ Dev".

Khung viền đứt báo "chưa có gì ở đây": ô khách trống trong làn, ô không dữ liệu, và dòng "Đang chờ khách…" ở quầy.

Khung chờ cho hàng danh sách, thẻ và chỉ số KPI khi dữ liệu đang tải.

Chỉ báo đang tải theo motif trân châu: ba viên trân châu nảy lần lượt.

Thông báo nổi ngắn ở dưới màn hình ("Đã nhập 10 trân châu đen", "Khách phát hiện tờ tiền giả!"), tự tắt sau khoảng 2,5 giây; có thể kèm icon, số tiền thưởng lớn và nút hành động như "Hoàn tác".

Chú thích ngắn cho nút icon và chỉ số, ví dụ "Hồi chiêu 5 phút".

Cảnh báo khẩn toàn màn có đếm ngược (tố cáo tiền giả, thuế quá hạn): lớp phủ tối nhấp nháy viền, huy hiệu, tiêu đề, thanh thời gian, thẻ phạt với số tiền lớn và nút chọn.

Nhóm chọn cỡ ly M hoặc L: hình ly vẽ bằng clip-path, kèm phụ phí "Size L +7k".

Thẻ đơn của một khách trong làn khách: mặt và tên nổi lên mép trên, lời gọi món, các ô thành phần đã đủ ✓, thanh kiên nhẫn và nút mời về ×.

Ô khay topping, foam và nguyên liệu trên quầy pha: ảnh cắt từ tranh quầy, badge số lượng, và các trạng thái khách đang gọi, đã chọn, hết, bị khoá.

Thanh kiên nhẫn của khách đang đứng giữa quầy: nhãn "KIÊN NHẪN" và thanh viền đậm vơi dần, xanh rồi vàng rồi đỏ.

Đồng hồ rót trà ở quầy: giữ tay để rót, thả khi mức trà tới vạch xanh ở khoảng 80%.

Bàn cược Bầu Cua 6 ô linh vật Bầu · Cua · Tôm · Cá · Gà · Nai: ảnh, tên, badge tiền đã cược, nút bớt cược và ô trúng ×1/×2/×3 sau khi mở bát.

Hàng chip chọn mức cược 10k / 50k / 100k / 500k / 1tr / Tất tay, dùng chung cho Bầu Cua và Xì Dách: mỗi mệnh giá một màu, chip đang chọn nhấc lên và có vòng pink.

Tay bài của một người chơi hoặc nhà cái: các thẻ chồng lệch nhau kèm nhãn kết quả đúng chữ của game: Xì Bàng!, Xì Dách!, Ngũ Linh (Nđ), Quá chén (Nđ), N điểm (Chưa đủ tuổi), N điểm.

Đĩa xóc sứ xanh với bát úp (xocdia.png) và 3 xúc xắc mặt linh vật: mặc định mở sẵn hiện 3 mặt (như game), úp bát chỉ khi đang lắc, kèm nút Lắc.

Banner kết quả ván: thắng, thua, hoà (hoặc thông báo trung tính) với biểu tượng, nhãn chữ, số tiền ± và dòng chi tiết, dùng chung cho Bầu Cua và Xì Dách.

Đầu cửa sổ minigame: tiêu đề, nút đóng và thanh ví nỉ xanh hiện tiền két cùng tổng cược đang đặt, dùng chung cho Bầu Cua và Xì Dách.

Thẻ trân châu của Xì Dách Trân Châu: giá trị và biểu tượng loại trân châu ở hai góc, biểu tượng lớn ở giữa, có mặt úp hình ly trà sữa; ba cỡ thường, lớn và mini.

Ghế của một khách quen ở bàn Xì Dách: avatar, tên, tiền góp vui, tay bài, trạng thái (đang suy nghĩ, đã dừng, quá chén, thắng, thua) và nút "So điểm".

Khung bàn Xì Dách Trân Châu, người chơi làm nhà cái: ví, mốc cược, các ghế khách, khu nhà cái, thanh nút Bốc Thêm / Dừng Bốc / So Toàn Bàn / Ván mới, banner diễn biến và bảng luật.