Diện mạo mặc định của một công cụ làm nhạc sẽ định hình thể loại nhạc mà người ta tạo ra trên đó. Một công cụ synth tông đen-tím sẽ đẩy người dùng về phía nhạc synth. Một công cụ folk tông giấy ấm sẽ đẩy họ về phía nhạc folk. Chúng tôi muốn aisonggen trung tính với thể loại, vì vậy nó có bốn chủ đề cùng đứng ngang nhau ngay ngưỡng cửa.
Bốn tâm trạng mà chúng tôi chọn
- Sonic Teal — chủ đề mặc định, mát lạnh và sạch sẽ. Trông giống bên trong một phòng mastering sau nửa đêm. Hợp với ambient, techno, bất kỳ thứ gì mà bài hát mang tính kiến trúc nhiều hơn câu chuyện.
- Neon Orange — chủ đề ồn ào, nóng bỏng. Mặc định của thương hiệu. Trông như cửa thoát của một club lúc 2 giờ sáng. Hợp với trap, hyperpop, bất kỳ thứ gì mà năng lượng là điểm chính.
- Studio Black — chủ đề trầm lặng đắt tiền. Tông than chì và vàng. Trông như một amp guitar bọc da. Hợp với jazz, soul, các bản singer-songwriter muốn được nhìn nhận nghiêm túc.
- Electric Magenta — chủ đề nghịch ngợm. Hồng và crôm. Trông như bên trong một MV thời Y2K. Hợp với pop, dance, bất kỳ thứ gì mà sự đùa cợt được phép hiển nhiên.
Cái giá của các chủ đề
Thiết kế cho một chủ đề là một nghìn quyết định nhỏ về độ tương
phản, thứ bậc và điểm nhấn. Thiết kế cho bốn chủ đề là cùng một
nghìn quyết định ấy, nhân lên bốn lần — và tất cả phải đáp xuống
cùng một component mà không vỡ. Cách chúng tôi giải quyết là đưa
mọi màu sắc vào hệ thống token, để bản thân các component không
bao giờ chạm vào mã hex, mà chỉ chạm vào vai trò: --primary,
--accent, --bg-elevated. Các chủ đề thay đổi giá trị; các
component không hề thay đổi.
Điều mà nó mang lại cho chúng tôi
Điều chúng tôi không ngờ tới: người dùng bắt đầu chọn chủ đề theo bối cảnh thể loại, không phải theo gu cá nhân. Một producer làm beat trap sẽ chuyển sang Neon Orange ngay cả khi mặc định của họ là Sonic Teal. Bộ chuyển chủ đề thôi không còn là một dropdown setting nữa và trở thành một phần của workflow — một cách đặt căn phòng vào đúng tâm trạng cho bài hát mà bạn đang viết.
Một lưu ý về khả năng tiếp cận
Cả bốn chủ đề đều đạt chuẩn WCAG AA về độ tương phản chữ và viền focus. Không chủ đề nào dựa duy nhất vào màu sắc để biểu thị trạng thái — mọi trạng thái active đều thay đổi cả hình dạng, độ dày, hoặc vị trí. Một người dùng không phân biệt được màu Sonic Teal và Neon Orange vẫn phải nhận ra được rằng một nút đang được nhấn.