Sonic Sessions / Design System
A robust design system enabling seamless scalability
Problem
How might we create a consistent brand UI?
How might we create a consistent brand UI?
Outcome
Designed an identity and design system components in Figma for a consistent UI.
Designed an identity and design system components in Figma for a consistent UI.
Role
UI UX designer
UI UX designer
Project
Personal Experiments
Personal Experiments
Timeline
2 Weeks
2 Weeks
Software
Figma
Figma
Context
Sonic Sessions is a music platform dedicated to spotlighting emerging local artists in NYC. It provides a space for young, up-and-coming talent to showcase their profiles and gigs, making it easy for fans and event organizers to book performances directly.
Sonic Sessions is a music platform dedicated to spotlighting emerging local artists in NYC. It provides a space for young, up-and-coming talent to showcase their profiles and gigs, making it easy for fans and event organizers to book performances directly.
Impact
*Created a comprehensive Figma design system with responsive grids, scalable typography (4 sizes per screen), and versatile colors to launch the brand quickly.
*Designed and tested button variants to figure optimal proportions, font styles, and color combinations—ensuring clarity, consistency, and brand recognition across all interfaces.
Applying the Design System
Here are some screens to show the use of colors, button styles, typography as well as error states.
Eg: Button Styles and Colors
Eg: Error Field Colors
The Brand Identity
The brand identity contained the logo, color and font system.
Logo
Logo Variations
Brand Typography
Brand Typography
Brand Color System
The Design System
The above screens were designed with research collated on a mood board.
It contains UI design inspiration in the form of font pairings, colour palettes, UI design and micro-interactions.
Buttons
Modal
Grid
Icons