Themes/Spotify
Start building with Spotify

Spotify Design System

Dark with vibrant green energy. Rich blacks with punchy accent colors. Built for immersion.

Dashboard

Total Revenue

$15,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Cards

Move Goal

Set your daily activity goal.

350

Calories/day

Exercise Minutes

Your activity trend this week.

Mon
Tue
Wed
Thu
Fri
Sat
Sun

Forms

Create an account

Enter your email to get started.

Email

example@acme.com

Password

••••••••

Notifications

Manage your notification preferences.

Push notifications
Email digest
Marketing emails

Buttons

CSS Variables — shadcn/ui compatible
:root {
  --background: #121212;
  --foreground: #FFFFFF;
  --card: #181818;
  --card-foreground: #FFFFFF;
  --primary: #1DB954;
  --primary-foreground: #000000;
  --secondary: #282828;
  --secondary-foreground: #FFFFFF;
  --muted: #282828;
  --muted-foreground: #B3B3B3;
  --accent: #1DB954;
  --accent-foreground: #000000;
  --border: #282828;
  --input: #282828;
  --ring: #1DB954;
  --radius: 0.5rem;
}

Color Palette

Primary

#1DB954

Primary Foreground

#000000

Secondary

#282828

Secondary Foreground

#FFFFFF

Background

#121212

Foreground

#FFFFFF

Card

#181818

Card Foreground

#FFFFFF

Border

#282828

Muted

#282828

Muted Foreground

#B3B3B3

Accent

#1DB954

Accent Foreground

#000000