spotify-ui-skills

Enforce Spotify-inspired dark mode design constraints with Inter font and 4px grid.

73|9|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill spotify-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spotify-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/spotify
Command: npx skills add https://github.com/ihlamury/design-skills --skill spotify-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for creating user interfaces that are visually consistent with Spotify's distinct dark-mode aesthetic, utilizing their specific typography and spacing principles.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for a dark theme.
  • Consistent Typography: Mandates the use of the 'Inter' font family with defined sizes and weights for headings and body text.
  • Grid-Based Spacing: Adheres to a 4px grid system for consistent spacing and layout.
  • Use Case: When designing a new music player application that aims for a professional, dark-themed look and feel similar to Spotify, these guidelines ensure brand consistency and a polished user experience.

Quick Start

Apply the spotify-ui-skills to design a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about spotify-ui-skills

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

FAQPage Schema
What design system constraints are needed to build a Spotify-inspired dark mode interface?▼

Building a Spotify-inspired dark mode interface requires specific color palettes, the Inter font family with defined styles, and a 4px grid system for spacing. These constraints ensure visual consistency, covering borders, components, interactive states, and animation guidelines.

How do I implement consistent typography and spacing for a dark mode music player UI?▼

To implement consistent typography and spacing for a dark mode UI, mandate the Inter font family with defined weights for text, and adhere strictly to a 4px grid system for all layout spacing to maintain a polished, professional user experience.

Does this Spotify UI design system enforce specific guidelines for interactive states and animations?▼

Yes, the Spotify UI design system enforces specific guidelines for interactive states and animations. Alongside dark backgrounds and a 4px grid, it includes rules for borders and components to ensure a visually consistent user experience.

Can I use these Spotify design guidelines for a new music player application?▼

Yes, you can use these Spotify design guidelines for a new music player application. The constraints provide a professional, dark-themed look and feel utilizing specific typography and spacing principles to ensure brand consistency.

What is the best way to ensure visual consistency when building Spotify-inspired interfaces?▼

The best way to ensure visual consistency in Spotify-inspired interfaces is by applying opinionated constraints. This involves using specific dark color palettes, Inter typography styles, and a strict 4px grid system for layout, borders, and components.