Look closely.
Screenshot the interface until the repeats start showing up.
A reusable setup for a Spotify-inspired interface.
I used AI to structure a Figma study of variables, tokens, text styles, and components.
Independent project. Not official Spotify work or Spotify documentation.
The brief I set myself.
Take an interface I use every day, work out which decisions in it repeat, and rebuild those as something reusable. I reviewed public patterns, used AI to structure the naming, and assembled the Figma file myself.
Name the decisions.
Separate primitives, semantics, variables, and components.
Keep it usable.
Check that changing one token moves what it should, and nothing it shouldn’t.
The type: Inter.
Spotify uses Inter in the product. This study looks at how its hierarchy, scale and rhythm support the interface.
What the type doesInter carries the interface from navigation and metadata through to titles and controls. Its range keeps the system expressive at display sizes while staying clear in the everyday moments.
Inter / product typeface
Make room
for the music.
for the music.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 · ! ? & @
0123456789 · ! ? & @
Display / LargeDiscover
Heading / BaseRecently played
Body / SmallMade for every moment.
Nine collections of Figma evidence.
Buttons, bound to variables.
Every fill, border, radius and label color points at a variable, so a theme change moves all of them at once.
The controls that can’t drift.
Play, pause, skip, progress — the pieces that have to look identical everywhere they appear.
The raw palette.
Nothing here is used directly. Components reach the semantic layer, and the semantic layer reaches this.
Numbers as a scale.
Spacing, radii and sizes as numbered steps, so a gap is chosen from the scale instead of typed into the inspector.
Type, before it has a job.
Families, weights and sizes as a pool. The named text styles below draw from it.
The layer components actually use.
Surface, text, border, accent. Renaming a primitive never reaches this far, which is the whole point of the split.
Spacing with a role attached.
Container padding and stack gaps mapped onto the number primitives, so layout is described rather than measured.
Seven text styles, and no more.
If a size isn’t one of these seven, it isn’t in the system. That constraint is what keeps the interface readable at a glance.
Cards, across three states.
Song and artist cards compared at rest, on hover, and once selected.
Song Card
01 / Default
02 / Hovered
03 / Clicked
Artist Card
01 / Default
02 / Hovered
03 / Clicked
The components, live. Click one.
Pick a study, then hover and click it. The status line reports the state the component is in — most of these change appearance rather than label.
AI was the assistant, not the author.
AI helped organize patterns, tokens, names, and consistency checks. I made the design decisions and assembled the Figma studies.
DISCLAIMER
Independent Spotify-inspired study. Not official Spotify work or documentation.