Spotify in Beige

First UI project introducing a lighter, accessibility-focused UI concept that reimagines Spotify with a calm, beige visual identity.

Role

UI Designer — Visual Concept

Industry

Music & Streaming

Duration

2 Weeks

Problem

This project was my first introduction to interface design. I recreated Spotify’s existing interface in Figma to better understand layout structure, spacing, and component systems, then explored an alternative “Beige” color theme focused on warmth and visual calm.

Goal

To explore how a beige-based light mode could enhance user comfort, accessibility, and aesthetic personalization while maintaining Spotify’s clean, modern brand identity.

Research Insights

One-third of users prefer light mode, and another third regularly switch depending on environment.

  • Light interfaces improve readability in bright conditions and can reduce eye strain.

  • Beige tones create a warm and calming visual environment, but require careful contrast choices to stay accessible.

Problem

This project was my first introduction to interface design. I recreated Spotify’s existing interface in Figma to better understand layout structure, spacing, and component systems, then explored an alternative “Beige” color theme focused on warmth and visual calm.

Goal

To explore how a beige-based light mode could enhance user comfort, accessibility, and aesthetic personalization while maintaining Spotify’s clean, modern brand identity.

Research Insights

One-third of users prefer light mode, and another third regularly switch depending on environment.

  • Light interfaces improve readability in bright conditions and can reduce eye strain.

  • Beige tones create a warm and calming visual environment, but require careful contrast choices to stay accessible.

a cell phone on a white block
a cell phone on a white block
two cell phones on a gray surface
two cell phones on a gray surface

Design Approach

  • Adjusted accent colors to maintain clarity, hierarchy, and WCAG-friendly contrast.

  • Introduced a soft beige palette to create a warmer, more inviting daytime experience.

  • Focused on visual balance — warmth without sacrificing legibility.

Potential Challenges

  • Maintaining Spotify’s recognizable visual identity while introducing a new color direction.

  • Ensuring accessible contrast against beige backgrounds.

  • Balancing warmth with clarity, especially for text-heavy screens or album artwork.

Solution

  • A softer, more calming visual experience

  • Improved readability in bright settings

  • A fresh aesthetic that still feels unmistakably “Spotify”

  • Accessible contrast and consistent UI patterns

a pair of cell phones on a concrete block

Reflections

  • Exploring a light, beige-toned palette showed me how color choices can significantly affect mood, readability, and perceived comfort.

  • Recreating an existing interface helped me understand layout structure, spacing, and component consistency at a foundational level.

  • This project taught me the importance of intentional decision-making, even in early visual explorations.

Reflections

  • Exploring a light, beige-toned palette showed me how color choices can significantly affect mood, readability, and perceived comfort.

  • Recreating an existing interface helped me understand layout structure, spacing, and component consistency at a foundational level.

  • This project taught me the importance of intentional decision-making, even in early visual explorations.

Other projects

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Email: kaceychen.design@gmail.com

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Email: kaceychen.design@gmail.com

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Email: kaceychen.design@gmail.com

©2025 by Kacey Chen

©2025 by Kacey Chen

©2025 by Kacey Chen