O visual padrão de uma ferramenta musical define o gênero de música que as pessoas fazem nela. Uma ferramenta de synth roxa e preta empurra as pessoas para faixas de synth. Uma ferramenta folk em papel marrom empurra para faixas folk. A gente queria que o aisonggen parecesse neutro em relação a gênero, então ele tem quatro temas que ficam todos igualmente na porta de entrada.
Os quatro climas em que a gente parou
- Sonic Teal — o frio e clínico padrão. Parece o interior de um estúdio de masterização depois da meia-noite. Bom para ambient, techno, qualquer coisa em que a música é mais arquitetura do que história.
- Neon Orange — o barulhento e quente. O padrão da marca. Parece a saída de uma balada às 2h. Bom para trap, hyperpop, qualquer coisa em que a energia é o ponto.
- Studio Black — o caro e silencioso. Carvão e dourado. Parece um amplificador de guitarra feito de couro. Bom para jazz, soul, takes de cantor-compositor que querem ser levados a sério.
- Electric Magenta — o brincalhão. Rosa e cromado. Parece o interior de um clipe Y2K. Bom para pop, dance, qualquer coisa em que a piada pode ser óbvia.
O que os temas custaram pra gente
Desenhar para um tema é mil pequenas decisões sobre contraste,
hierarquia e ênfase. Desenhar para quatro são as mesmas mil
decisões, vezes quatro — e elas precisam aterrissar no mesmo
componente sem quebrar. O jeito que a gente tornou isso tratável
foi mover toda cor para um sistema de tokens, então os componentes
em si nunca buscam um código hex, só um papel: --primary,
--accent, --bg-elevated. Os temas mudam os valores; os
componentes não mudam em nada.
O que ele nos deu
A coisa que a gente não esperava: as pessoas começaram a escolher temas por contexto de gênero, não por gosto pessoal. Um produtor trabalhando num beat de trap virava para o Neon Orange mesmo se o padrão dele era Sonic Teal. O seletor de tema deixou de ser um dropdown de configurações e virou parte do fluxo de trabalho — um jeito de colocar a sala no clima certo para a música que você estava escrevendo naquele momento.
Uma nota sobre acessibilidade
Os quatro temas atendem WCAG AA em contraste de texto e anéis de foco. Nenhum deles depende só da cor para indicar estado — todo estado ativo também muda forma, peso ou posição. Um usuário que não consegue ver a diferença de cor entre Sonic Teal e Neon Orange ainda deve conseguir perceber que um botão está pressionado.