SONO: Mood-Driven Music Discovery Platform
A web platform that helps you discover new music based on your mood
Project Date: Fall 2025
Project Overview
SONO was built around the idea that music and mood are linked, and the product should reflect that connection visually. The design system supports this goal and solves the problem of lack of music connection by providing a clear structure for color, typography, components, and voice, all shaped around a mood-driven experience.
This project was turned in in two “parts,” however, we kept our design consistent throughout. This case study outlines the core elements of the SONO Design System and how they work together to create consistency across product, branding, and content. Having this outlined will help us stay constistent throughout the creation of the project.
My Role
For this project, my main role was leading the direction of the design system as well as the presentation creation.
The Problem
Music discovery platforms often prioritize genres, charts, or algorithms without accounting for how users feel in the moment. This makes it harder for users to emotionally connect with new music or use music as a tool for mood regulation.
SONO addresses this gap by centering discovery around emotional state rather than simple and traditional categories.
Results
The design system successfully translated emotional states into a flexible, cohesive visual language used across presentations, web layouts, and branding materials. The system improved consistency across our team deliverables and clarified future design decisions we will make next semester.
If continued, the next phase would include user testing and improvement of mood-based UI transitions and our AI Chatbot’s capability.
What is SONO?
SONO helps people discover new music based on how they feel in the moment. To bring this idea into the interface, the visual language needed to be flexible, expressive, and organized enough to support a full product ecosystem.
The system focuses on three key parts:
- Mood-driven color
- Clear typographic hierarchy
- A soft, approachable component style
These elements form the base of the brand and inform every design decision across platforms. Because our platform is dedicated to improving users moods, we made all of these choices with the goal to do so.
02. Color System: A Visual Extension of Emotion
The color palette is organized by emotional states. Each color represents a distinct feeling, which allows the interface to shift tone depending on context.
Euphoric
Dreamy, lifted energy.
Used for gradients and backgrounds that need a light, inspired feel.
Melancoly
Nostalgic and reflective.
Used for softer UI moments and calmer visual spaces.
Serene
Clear and balanced.
Used to ground layouts and create a sense of calm.
Flirty
Playful and warm.
Used to create friendly, approachable accents.
Hype
High-energy and bold.
Used for moments that require intensity or excitement.
Get Evietharpe’s stories in your inbox
Join Medium for free to get updates from this writer.
A neutral set of white, off white, black, and charcoal supports these moods and ensures accessibility across all screens.
03. Typography: Structure With Personality
The type system needed to feel expressive without sacrificing usability. SONO uses three main typefaces, each with a specific role.
Milker (Headings)
Used for page titles, hero sections, and large display moments.
Bold, strong, and central to SONO’s visual identity.
Monotail (Subheads and Accents)
Used for labels and secondary headings.
Not used for long text or large headings because the stroke weight is too delicate for readability at scale.
Arial Nova (Body)
Used for all body text.
Clean and neutral, which keeps layouts from feeling overly stylized.
Improper Usage Avoided:
- Monotail as a main heading
- Arial Nova in branded display text
- Script fonts for full paragraphs
- Mixing unrelated typefaces or irregular spacing
This structure keeps the visuals expressive at the top level and simple everywhere else.
04. Logo System and Usage
The SONO logo family includes script marks, icon marks, and full lockups. Usage guidelines ensure clarity and protect the integrity of the mark across different backgrounds and sizes.
Correct Usage:
- Maintain clear spacing
- Use high-contrast backgrounds
- Keep proportions consistent
- Use only approved brand colors
Incorrect Usage:
- Rotating or stretching the logo
- Changing internal elements
- Placing the logo over chaotic or low-contrast backgrounds
- Using unapproved colors
The system is flexible for social, app UI, and marketing while still maintaining structure.
05. Editorial Style and Voice
SONO’s voice is conversational, upbeat, and clear. It is written to sound friendly without being overly casual or emotional.
Mission Statement
SONO helps people discover and share music that reflects how they feel in the moment.
Tagline
Music that fits your mood.
Voice Principles:
- Simple and direct
- Encouraging exploration
- Audience-focused
- Positive and warm
Grammar and platform rules support consistency across social copy, in-app text, and marketing messages.
06. UI Components
The UI uses rounded, approachable shapes that pair well with soft gradients. Each component includes usage rules and attributes to maintain consistency.
Core Components:
- Primary Action Button
- Search Bar
- Profile Icon
- Statistics Card
- Contact Input Field
Each component is designed for clarity and ease of use, even on colorful or gradient-heavy backgrounds.
07. Pattern Library
The pattern library defines recurring layouts and interaction models.
Included Patterns
- Navigation Bar
- Mood Calendar
- Modal Styles
- Gradient Background Templates
These patterns help establish predictability across the product while supporting SONO’s expressive aesthetic.
08. Assets and Tools
The system includes reusable assets such as icons, background elements, UI stickers, and social templates.
The toolkit that supports creation includes Figma, Canva, GitHub, VS Code, and Vue frameworks for development.
Conclusion
Through compiling this design, I learned that there is far more to the process than simply selecting aesthetic colors and elements. Design requires an understanding of human behavior and emotional response. We wanted SONO to feel therapeutic and effortless, so every decision needed to support that experience.
The SONO Design System creates a structured environment for a brand built around emotion. Because the app’s mission is to be therapeutic, it was a key takeaway for us that these choices were especially important. Our system allows the interface to shift moods without losing consistency, supports clear communication, and provides a cohesive foundation for future product development.
Based on how the design system has presented itself so far across our presentations, website, and other materials, I believe we did a strong job establishing that foundation. I’m excited to continue building on it over the coming months as the product evolves.
