Core Idea This is a personal design system built to visually accompany and archive the songs I love. Every entry begins with a reusable layout – a custom-built music player UI that sits within a consistent framework. While the structure remains the same, the styling (colors, mood, typography) is tailored to each song by sampling directly from the song's cover art. In each post, I write about the song: what it evokes in me, how it lingers, and why it matters. This ongoing series is both a visual archive and emotional journal.
Music Player
Cover Art
summary
I used Adobe Extract Theme to generate a custom color palette directly from the song’s cover art. The extracted colors informed the entire visual direction; used consistently for strokes, fill colors, the soundwave, and the audio player UI.
On Figma, I used the new Glass effect (currently in beta). This introduced a subtle layer of light diffusion and surface texture. A soft drop shadow was also added to enhance depth, to give a tactile feel to the components.
The button and soundwave components were sourced from Figma Glass Playground, then customized to match the extracted color palette.
Song - Mon Amour Je Suis Vaincue
Artist - Mpho Sebina ft. Mopao Mumu
Album - Alkebulan