Toàn bộ token nằm trong tokens.css. Mỗi component hiển thị song song ở Light và Dark. Xem các màn hình dùng chúng tại App UI.
Tên đề xuất Xu: ngắn, đọc giống nhau ở cả tiếng Việt và tiếng Anh. Logo là đồng xu có ba vạch sóng âm bên trong, thể hiện "nói để quản lý tiền". Màu nền là đỏ san hô primary.
Khi người dùng chưa có ảnh, avatar hiện 1–2 chữ cái đầu của tên trên nền be. Ảnh thật (nếu có) dùng cùng khung tròn và viền 2px. Trợ lý dùng logo làm avatar trong hội thoại.
Phong cách theo ảnh tham chiếu. Nền be xám ấm, thẻ trắng. Khối nổi bật và thanh điều hướng dùng màu than đen. Đỏ san hô chỉ dành cho hành động chính và nút trợ lý. Be đậm hơn dùng cho badge trạng thái.
Code chỉ dùng tên token, không dùng mã màu trực tiếp. Giá trị ở đây được đọc từ tokens.css.
| Token | Vai trò | Light | Dark |
|---|
Font do nhóm thiết kế Việt Nam làm. Dấu chồng (ế, ở, ữ) cân đối và chữ Latin tiếng Anh vẫn hiện đại. Có đủ độ đậm 100–900, giấy phép OFL nên đóng gói được vào app. Số tiền dùng chữ số đều độ rộng (tabular). Cỡ chữ nhỏ nhất là 12px.
Light dùng đổ bóng mềm. Dark thay đổ bóng bằng viền 1px để tách lớp.
12 danh mục có sẵn cho người dùng mới. Mỗi danh mục có một icon dễ nhận ra và một cặp màu nền/icon. Tên có cả tiếng Việt và tiếng Anh để sẵn sàng đa ngôn ngữ.
Nút bo tròn hoàn toàn. Primary màu san hô, mỗi màn hình chỉ có một nút Primary. Dark dùng cho hành động trung tính. Chiều cao 50 (mặc định) hoặc 40 (nhỏ).
Mỗi trạng thái khác nhau về hình dạng: chờ, vòng nét đứt khi đang kết nối, vầng sáng và sóng âm khi đang nghe, sóng âm trên nền tối khi đang nói.
Thanh dạng viên thuốc màu than đen. Cả 5 tab đều có icon kèm nhãn. Tab đang chọn có nền sáng sau icon và chữ trắng. Nút trợ lý màu san hô nhô lên ở giữa.
Trợ lý không mở màn hình riêng. Bấm nút Nói để bắt đầu (câu đánh thức sẽ thêm sau). Khi đang hoạt động, trợ lý thu gọn thành thanh nổi phía trên thanh điều hướng, nên trang bên dưới vẫn nhìn và chạm được. Khi thu nhỏ trên các màn hình, chỉ câu trả lời của Xu hiện thành phụ đề. Lời người dùng chỉ hiện trong bảng chi tiết, có cả phụ đề trực tiếp của câu đang nói. Phụ đề của Xu hiển thị theo độ dài câu: 2,5 giây + 60ms mỗi ký tự, từ 3 đến 10 giây, thanh mờ dần báo thời gian còn lại. Mọi thao tác ghi đều dừng ở trạng thái Cần bạn xác nhận (nói hoặc chạm Lưu/Sửa). Phần tử trợ lý đang thao tác có viền san hô kèm nhãn. Kết quả sau khi xác nhận hiện thành thông báo ở đầu màn hình.
Số liệu nằm ngay trên cột hoặc ngay cạnh thanh. Cơ cấu theo danh mục dùng thanh ngang xếp hạng thay cho biểu đồ tròn vì số danh mục có thể nhiều: hiện 6 danh mục lớn nhất, phần còn lại gom vào "Xem thêm", phía trên có một thanh 100% tóm tắt. Tiết kiệm có 2 tab: Theo tháng (đường theo từng tháng) và Tích luỹ (đường bậc cộng dồn). Cột đang chọn màu than đen (Dark: kem sáng), các cột khác màu be --bar. Thư viện đề xuất: react-native-gifted-charts.