PANTONIFY©1ED760
Pantonify · Case study

Pantonify

Your music taste, translated into color.

A playful exploration of how our favorite music can become something visual, personal, and shareable.

PANTONE19‑4013
PANTONE18‑3520
PANTONE17‑3802
Illustrative cards · codes from a real export, 31/1/2022
Role
Design & Development
Year
2020
Type
Creative Experiment
Tools
Figma, Next.js, Framer Motion, Spotify API
02 · Context

Beyond the receipt.

Seeing people share their listening habits through Receiptify made me curious about other ways to represent musical identity. Rather than presenting music as a ranked list, I wanted to explore whether something as familiar as color could offer a more expressive interpretation.

The design question

How might someone’s music taste become a visual identity worth sharing?

TOP TRACKS
01
02
03
04
05
06
07
08
09
10
THANK YOU
The inspirationA ranked list (illustrative)
Pantonify result screen: top tracks shown as Pantone swatches
The directionPantonify result screen
03 · Exploration

Finding the right visual language.

I started from the idea of cards, a familiar and shareable shape. A generic card says little about music, though. Pantone swatches felt recognizable and tangible, and set Pantonify apart from other music-sharing formats.

figma · pantonify mockups
Figma mockups of the Pantonify login and swatch result screens
  1. 01Cards, to startCard-based representations were my first interest.
  2. 02Made personalThe format needed to mean something to its owner.
  3. 03Why PantoneA recognizable, physical reference that no other format used.
04 · Making music tangible · A

From hexadecimal values to Pantone.

Hex values felt like technical information. Pantone references connected the experience to something recognizable from the physical world.

DAFT PUNK252829
Give Life Back To Music
Raw hexReads as technical data
DAFT PUNK19-4004 · Tap Shoe
Give Life Back To Music
Pantone-inspiredReads as something real
Illustrative comparison, using values from a real export (31/1/2022).
04 · Making music tangible · B

Let color take center stage.

Album covers were retained at approximately 25% opacity, keeping the source recognizable without distracting from its representative color.

DUA LIPA19-3903 · Shale
Levitating
Artwork at 100%Competes with the color
DUA LIPA19-3903 · Shale
Levitating
Final swatch, artwork at ~25%Color leads, source stays recognizable
04 · Making music tangible · C

Design for effortless sharing.

The goal was to make the path from Spotify authentication to a finished card as minimal as possible, on both desktop and mobile.

  1. Step 01
    Connect SpotifyStart from a single sign-in.
  2. Step 02
    Explore top tracks4 weeks, 6 months or all time.
  3. Step 03
    Generate swatchColors matched to Pantone.
  4. Step 04
    Export imageSave the card, ready to share.
05 · Interaction design

Small moments of delight.

Pantonify was a chance to explore micro-interactions with Framer Motion.

Making the same visual identity hold up from desktop to phone was a lesson in responsive design, and one of the hardest parts of the build.

Pantonify's Framer Motion interactions
Interactions
A Pantonify swatch animating in
Swatch
06 · Technical exploration

From artwork to color.

Built with Next.js, NextAuth, the Spotify Web API, fast-average-color and nearest-pantone. The reasoning mattered more than the plumbing.

  1. 01Spotify authentication
  2. { items: [ … ] }
    02Top tracks
  3. 03Album artwork
  4. #2B2F3B
    04Average color
  5. 19‑4013
    05Nearest Pantone
  6. 06Shareable card
DecisionColor selectionI considered using the dominant color versus the average color before choosing an approach supported by the available color extraction library.
ChallengeImage exportingTurning the swatches into downloadable images proved challenging, and took additional work to generate a shareable result.
PANTONIFY©
PANTONE19‑4013
Random Access Memories
PANTONE18‑3520
If Only
PANTONE17‑3802
The Bamboo Princess
Made for Aymeric, 31/1/2022
07 · Outcome

A finished creative experiment.

  1. 01
    Built and liveDeveloped and made available as a live website.
  2. 02
    Fun for friendsFriends tried Pantonify and described it as fun.
  3. 03
    True to the visionThe finished experience closely matched my initial creative vision.
  4. 04
    Outgrown by the APILater Spotify API restrictions affected the availability of the original experience.
08 · Reflections

What I learned.

01

Designing for multiple screens

Responsive design was one of the hardest aspects of the project, teaching me to think beyond a single static layout.

02

Translating data into emotion

Color offered a way to reinterpret listening data as something expressive, even though a mathematical representation may not always capture the perceived character of an album.

03

Balancing expression and simplicity

The goal was to build a recognizable visual experience without complicating the path to a shareable result.

09 · Closing

Music, translated into color.

A small experiment about turning listening into something you can hold up and share.

View source ↗Next project: Radiosity →