The default look of a music tool sets the genre of music people make in it. A black-and-purple synth tool nudges people toward synth tracks. A warm-paper folk tool nudges them toward folk tracks. We wanted AISongGen to feel neutral about genre, so it has four themes that all sit equally at the front door.
The four moods we landed on
- Sonic Teal — the cool, clinical default. Looks like the inside of a mastering studio after midnight. Best for ambient, techno, anything where the song is more architecture than story.
- Neon Orange — the loud, hot one. The brand default. Looks like a club exit at 2 a.m. Best for trap, hyperpop, anything where the energy is the point.
- Studio Black — the quiet expensive one. Charcoal and gold. Looks like a guitar amp made of leather. Best for jazz, soul, singer-songwriter takes that want to be taken seriously.
- Electric Magenta — the playful one. Pink and chrome. Looks like the inside of a Y2K music video. Best for pop, dance, anything where the joke is allowed to be obvious.
What the themes cost us
Designing for one theme is a thousand small decisions about
contrast, hierarchy, and emphasis. Designing for four is the same
thousand decisions, four times — and they have to land on the same
component without breaking. The way we made it tractable was to
move every color into a token system, so the components themselves
never reach for a hex code, only for a role: --primary,
--accent, --bg-elevated. The themes change the values; the
components do not change at all.
What it gave us
The thing we did not expect: people started picking themes by genre context, not by personal taste. A producer working on a trap beat would flip into Neon Orange even if their default was Sonic Teal. The theme switcher stopped being a settings dropdown and started being part of the workflow — a way to put the room in the right mood for the song you happened to be writing.
A note on accessibility
All four themes meet WCAG AA on text contrast and focus rings. None of them rely on color alone for state — every active state also changes shape, weight, or position. A user who cannot see the color difference between Sonic Teal and Neon Orange should still be able to tell that a button is pressed.