Xiomara Pannella
← Back to projects

Design system · UI Design

Spotify light mode

A light mode design system for Spotify, built during a UI design course with Memorisely. We rebuilt the core player screens for light while keeping every component accessible and easy to theme.

Team
Xiomara Pannella, Samantha Nguyen
Year
2024
Type
Design system · UI Design
Tools
Figma
Theming with tokens

One component set, two themes. Colour is defined once as tokens, so light and dark stay in sync and both meet contrast.

Press the button to switch the screen’s theme.

Spotify light mode: the Nonstop screen on a white background, with a Drake artist card and a Views album card, each with a green play button.

The brief

Spotify ships dark by default. Our challenge was to design a light mode that felt like the same product: same hierarchy, same warmth, same green, but readable in bright environments and accessible for people who find dark interfaces harder to read.

  • Colors (neutral, primary, secondary)
  • Dimensions
  • Margins
  • Paddings
  • Icons
  • Text
Primitive color palette: a neutral grey scale from white to black, five greens, semantic colors for positive/warning/negative/announcement states, and a wider accent palette (Midnight, Azure, Royal Blue, Klein Blue, Aquamarine, Storm, Maroon, Bright Red, and more), each swatch labelled with its hex value.
The primitive color palette we worked from.

What we built

We rebuilt the core of the player as a small, themeable system: colour, type, and spacing defined as tokens, then applied across a set of reusable components so light and dark are two values of one system rather than two separate designs.

Each component was documented with its states so it could be handed off and reused.

The button component documented as a system: rounded, icon-leading, icon-trailing, and icon-only shapes, each in six colour steps from bright green to dark teal, across default, hover, focus, active, and disabled states, then repeated in white/grey and outlined black variants at three sizes.
The button component: every shape, colour step, size, and state documented together.

What we did

We audited the existing dark UI, mapped every colour to a semantic token (surface, on-surface, accent), then derived a light theme from the same token names so nothing was hard-coded. We checked each pair against WCAG contrast and adjusted values that only passed in one theme.

Search screen, light mode: default, hover, and focused search bars reading “What do you want to play?”, then a filled bar with the query “Olivia Rodrigo” and a clear button.
Search, light mode.
Search screen, dark mode: default, hover, and focused search bars reading “What do you want to play?”, then a filled bar with the query “Olivia Rodrigo” and a clear button.
Search, dark mode.

What we learned

What went well: for the search bar, we managed to finish both the light and dark mode variant components successfully, and we successfully built the animation and variables behind the components.

What didn’t: distinguishing between the active, focus, and filled states. Those three were a little confusing to tell apart.

What could be improved: the way we built the cards, the logical order to do it in, and how to combine so many possibilities into just one component.