H
HàNhóm CTDL · Phòng họp A · 2 giờ trước
Tóm tắtNhóm vừa ôn xong phần cây cân bằng. Ghi chú và ảnh bảng trắng ở dưới, ai vắng thì đọc lại trước buổi sau.
1:50giờ tụ họp
5người tham gia
2ghi chú chung
Design system · v0.1 · đề xuất
Một góc chung cho cả nhóm, gọn như một ứng dụng làm việc
Bản xem trước giao diện của Xóm: thế giới mang màu sắc, giao diện trung tính và lùi về sau. Mọi màu và cỡ chữ ở đây lấy từ token trong packages/ui.
01 · Màu
Trung tính trước, màu sau
Chín phần mười giao diện là thang xám. Màu nhấn indigo cho hành động và focus; vàng cho Xu; đất nung cho khoá phòng. Đổi giao diện sáng/tối ở góc trên để xem cả hai bản.
Nền và chữ
Nhấn và trạng thái
Trạng thái (presence) và vai trò
02 · Chữ
Geist cho giao diện, đủ dấu tiếng Việt
Tiêu đề mảnh và chặt, nhưng giữ khoảng dòng đủ cho dấu chồng như Ấ, Ổ, Ữ. Số và đồng hồ dùng Geist Mono.
6xl · 64
Ở xóm này ấm lắm
4xl · 36
Cùng xây xóm bằng Xu
3xl · 28
Sẵn sàng vào Nhóm CTDL?
xl · 18
Kệ Phòng Giải tích · 12 tài liệu
lg · 16
Nhóm vừa ôn xong phần cây cân bằng. Ghi chú và ảnh bảng trắng ở dưới, ai vắng thì đọc lại trước buổi sau nhé.
md · 14
Phòng đang theo nhịp 50/10, còn 23 phút. Bạn có muốn nhập nhịp không?
sm · 13
Hà, Tuấn và bạn đang chỉnh bảng trắng · đã lưu
xs · 12
2 giờ trước · Phòng họp A · 5 người
mono
18:24 · 1.240 Xu · +5 Xu
eyebrow
Sự kiện sắp tới
03 · Component
Thẻ trong khay, nút như phím bấm mềm
Mỗi component có trạng thái mặc định, hover, nhấn, focus và tắt. Bấm Tab để xem vòng focus.
Nút
Ô nhập
Tên này đã có người dùng. Thử @an.nguyen
Lựa chọn
Nhịp
Chế độ phòng
Làm mờ nền
Ảnh đại diện, trạng thái, vai trò
A
M
H
T
V
LKQ+4
Chủ xómQuản lýKhách● Đang diễn raĐã lưuSắp đầy3
Loại sự kiện: họp · làm việc · giải trí
Menu, tooltip
Bật/tắt mic M
Toast, dialog
Workshop Git bắt đầu sau 10 phút
Sân khấu · 31 người tham gia
Mạng đang yếu. Chuyển sang Tiết kiệm?
Xoá “De-cuong-giai-tich.pdf”?
Tài liệu vào thùng rác 30 ngày rồi xoá hẳn. Người khác sẽ không mở được nữa.
Thông báo xin vào
T
Tuấn muốn vào Phòng họp A
Tự từ chối sau 60 giây
Người trong phòng nhận. Alt + Y chấp nhận, Alt + N từ chối; không cướp focus khi đang gõ chat.
Đã khoá phòng
Ví Xu và “+5 Xu”
1.240
Bấm nút để xem hiệu ứng nhận Xu (giảm chuyển động: chỉ hiện chữ).
Tập trung18:2450/10
Trống, đang tải
Kệ còn trốngTải tài liệu đầu tiên lên để cả phòng cùng xem.
04 · Trong xóm
HUD nổi trên bản đồ, không tranh với thế giới
Thẻ kính mờ cách mép 16 px; nhân vật của mình luôn ở vùng giữa. Bản đồ dưới đây chỉ là giả lập; phong cách thật do 12-world.md quyết định. Thử bấm các nút ở thanh điều khiển.
Nhóm CTDL
Cấp 23.420 quỹ xóm
SảnhLại gần để nói
Tập trung18:2425/5
Bạn
Minh
B
Phòng họp A đang khoá
5 người đang họp · người trong phòng sẽ mở cửa cho bạn
GẦN
Khung trên co theo bề rộng: thu hẹp cửa sổ dưới 760 px để xem bố cục điện thoại (panel thành sheet dưới, dock 5 nút).
05 · Bảng tin
Ai đang ở đâu, nhóm vừa làm gì
Ba cột trên desktop; một cột trên điện thoại. Tóm tắt là bài đăng tự sinh, người dùng sửa rồi mới đăng.
Xóm của tôi
Nhóm CTDL5
CLB Lập trình12
Nhà chung 4 đứa0
Tạo xóm
V
VyCLB Lập trình · hôm qua
Workshop Git tối thứ Năm 20:00 ở Sân khấu. Đã có 31 người trả lời tham gia, ai chưa cài Git thì xem hướng dẫn trên kệ nhé.
Đang online
MMinh · Nhóm CTDL, Sảnh
VVy · đang tập trung
KKhoa · Phòng họp A
Sự kiện sắp tới
Workshop Git
T5, 23/10 · 20:00 · Sân khấu
ATL
Làm đồ án tối
Hôm nay · 21:00 · Góc yên lặng
06 · Kiểm tra thiết bị
Vào xóm trong chưa tới 30 giây
Một màn duy nhất: xem mình, chọn thiết bị, bấm vào. Mọi lựa chọn chỉ lưu trên máy đang dùng.
Nhóm CTDL
Sẵn sàng vào Nhóm CTDL?
HVMHà, Vy, Minh và 5 người khác đang trong xóm
Làm mờ nền
Chỉ trên thiết bị này
07 · Cài đặt
Ba tầng, nói rõ thay đổi đi đâu
Cài đặt tài khoản đi theo bạn sang mọi máy; cài đặt trong xóm chỉ cho một xóm; cài đặt thiết bị chỉ ở máy này.
Tài khoản
Giao diện
Áp dụng trên mọi thiết bịGiao diện
Giảm chuyển động
Bong bóng chat trên bản đồ
Xóm
Nhóm CTDL
Chỉ trong xóm nàyTắt thông báo xóm này
Tắt thông báo chat cả xóm
Ghim xóm lên đầu
Thiết bị này
Video và âm thanh
Chỉ trên thiết bị nàyChất lượng gửi đi
Chất lượng nhận về
Chia sẻ màn hình
Xóm · bản xem trước design system v0.1 (17/10/2026). Nguồn: spec/10-ui.md, spec/11-screens.md, packages/ui/tokens. Bản đồ và nhân vật là hình giả lập. Font Geist, Geist Mono, Source Serif 4 (SIL OFL). Icon theo Lucide (ISC).