skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-spotify

Apply Spotify's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#ui design#spotify#dark theme
One-click install
npx skills add https://github.com/deepparser/skills --skill design-spotify-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-spotify
Source: https://github.com/deepparser/skills/tree/main/design-spotify
Command: npx skills add https://github.com/deepparser/skills --skill design-spotify-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Spotify's visual identity requires exact design tokens — colors, typography, spacing, shadows, and component geometry — which are tedious to reverse-engineer manually. ## Core Features & Use Cases - Complete Design Token Catalog: Provides Spotify's exact color palette (Spotify Green #1ed760, near-black surfaces #121212–#1f1f1f), typography scale (10px–24px, SpotifyMixUI/CircularSp), spacing, radius, and shadow values. - Component Specifications: Defines pill buttons (500px–9999px radius), circular play controls (50%), cards, pill search inputs, and dark sidebar navigation with precise CSS values. - Visual Reference Previews: Bundled light and dark theme HTML previews let you verify exact visual implementation details and CSS values. - Use Case: When asked to build a music streaming dashboard styled like Spotify, use this Skill to generate a dark-themed interface with pill-shaped buttons, uppercase labels with wide letter-spacing, and heavy elevation shadows. ## Quick Start Use the design-spotify skill to create a dark-themed music player interface styled like Spotify.

Frequently Asked Questions about design-spotify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Spotify?▼

Use near-black backgrounds (#121212–#1f1f1f), Spotify Green (#1ed760) only for play controls and CTAs, pill-shaped buttons (500px–9999px radius), and compact typography in the 10px–24px range. Let album art provide the color while the UI stays achromatic.

What colors does Spotify's design system use?▼

The palette centers on Spotify Green (#1ed760) as the single brand accent over near-black surfaces (#121212, #181818, #1f1f1f). Text uses white (#ffffff) and silver (#b3b3b3), with semantic colors for errors (#f3727f), warnings (#ffa42b), and announcements (#539df5).

What font does Spotify use in its interface?▼

Spotify uses SpotifyMixUI and SpotifyMixUITitle, proprietary fonts from the CircularSp family (Circular by Lineto). The fallback stack includes Helvetica Neue, Arial, and global script fonts covering Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK.

Does this skill include a light theme version of Spotify's design?▼

Yes, the skill bundles both preview.html and preview-dark.html reference files. However, Spotify's identity is fundamentally dark-themed, so the light preview still uses the dark palette as the primary visual reference.

Why do Spotify-style buttons use uppercase text?▼

Spotify applies uppercase with wide letter-spacing (1.4px–2px) on button labels to create a systematic label voice distinct from content text. This is a core part of the brand's compact, functional typography system.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

ai-native-ui

Design conversational AI-native UI layouts with adaptive components and generative loading states.

Community
Intermediate
DITEKmaxDITEKmax

lottie-animations

Render After Effects animations as interactive web assets with lottie-web and dotLottie.

Community
Intermediate
sanky369sanky369
29

layout-system

Design responsive layouts with Flexbox, Grid, container queries, and scalable breakpoints.

Community
Advanced
ai-ecoverseai-ecoverse

apple-music

Execute apple-music shell commands to search catalogs and manage playlists.

Official
Intermediate