Rửa bát sau bữa tối
Chia Việc, nhất quán từ việc nhỏ.
Ivory/forest là nền và chữ. Sage, peach, lavender là bề mặt chức năng. Avenir Next/system sans giữ tiếng Việt dễ đọc. Không có kiểu giao diện riêng cho gia đình hoặc ở ghép.
Màu có thể chuyển sang React Native
bg
#f8f5ecsurface
#fefdfafg
#1b3727muted
#525f54border
#d3d2c2accent
#4a7856sage
#d7e7d3peach
#fae3d3lavender
#ebe5f4success
#1f4a2awarn
#673b1bdanger
#862721on-primary
#faf9f1Hex là kết quả chuyển từ OKLch gốc, không palette đoán. Trong native chọn light/dark trước khi resolve aliases. State colors đi cùng nhãn/icon.
Kiểu chữ và nhịp khoảng cách
| Vai trò | Quy tắc |
|---|---|
| Tiêu đề | Avenir Next → Söhne → system sans; 32/20/18px, weight600. H1 tracking −.02em, line-height1.2. |
| Nội dung | SF Pro Text/system sans ·16px/1.55 ·400. UI emphasize550. |
| Phụ/chú thích | 13px/1.5, tracking .01em. Uppercase12px tracking .08em. |
| Spacing | 4/8/12/16/20/24/32/48. Phone gutter20, 16 ở360px. |
| Controls | 48px thường; month full-bleed 7×48 fit336px. Border control đủ tương phản. |
Một hành động chính, trạng thái rõ
Hover đổi nền giữ cặp chữ/nền; focus ring forest/foreground; disabled mới giảm tương phản.
Một thẻ việc xuyên suốt
Đã xác nhận · chỉ canonical event mới ghi points
Chờ duyệt / đồng bộ · chưa cộng điểm
Cần kiểm tra lại · giữ draft, không tự ghi đè
Biểu mẫu, proposal và destructive
Label luôn nhìn thấy, input16px, validations ngay trường và summary thông báo. ChoiceGroup hỗ trợ keyboard. Proposal diff trước→sau, recipient/due/recurrence/effort/permissions/conflicts. Destructive luôn review dependencies và exact target trước confirm; confirmation không tự cấp quyền.
Navigation và calendar
Adult: Hôm nay, Không gian, Lịch, Thành viên. Child: Việc của con, Thành tích. Active nền sage + chữ/icon + aria-current. List là agenda nhóm theo ngày; Calendar là month grid cùng selected-day agenda. Toggle giữ context chung.
Accessibility và adaptation
- Safe-area bottom, vertical reflow; long copy không clipped/nowrap. At360px month grid vẫn đủ48px; nav không che actions.
- Font scaling phải tăng chiều cao intrinsic trong native; không cố định text boxes.
- Color pairs: body ≥4.5, large/icon ≥3; state icon và label luôn có.
- OS reduced motion disables animation; focus ring visible, modal focus trapped by native dialog.
- Dark mode thay cả pair chữ/nền; artwork full frame 400:290, không crop nội dung.