JL
Design systems

Spotify

Near-black, one functional green

Design SystemDark theme

Color

  • near-black

    #121212

  • dark-surface

    #181818

  • mid-dark

    #1f1f1f

  • spotify-green

    #1ed760

  • green-border

    #1db954

  • white

    #ffffff

  • light

    #fdfdfd

  • near-white

    #cbcbcb

  • silver

    #b3b3b3

  • negative-red

    #f3727f

  • warning-orange

    #ffa42b

  • announcement-blue

    #539df5

  • dark-card

    #252525

  • mid-card

    #272727

  • border-gray

    #4d4d4d

  • light-border

    #7c7c7c

  • light-surface

    #eeeeee

  • black

    #000000

Typography

title
SpotifyMixUITitle, Figtree, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif
ui
SpotifyMixUI, Figtree, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif

Spotify Mix

  • section-title

    24px / · 700

    section-title

  • feature-heading

    18px / 1.3 · 600

    feature-heading

  • body-bold

    16px / · 700

    body-bold

  • body

    16px / · 400

    body

  • button-uppercase

    14px / 1 · 700 · 1.4px

    button-uppercase

  • button

    14px / · 700 · 0.14px

    button

  • nav-link-bold

    14px / · 700

    nav-link-bold

  • nav-link

    14px / · 400

    nav-link

  • caption-bold

    14px / 1.5 · 700

    caption-bold

  • caption

    14px / · 400

    caption

  • small-bold

    12px / 1.5 · 700

    small-bold

  • small

    12px / · 400

    small

  • badge

    10.5px / 1.33 · 600

    badge

  • micro

    10px / · 400

    micro

Spacing

  • space-1

    1px

  • space-2

    2px

  • space-3

    3px

  • space-4

    4px

  • space-5

    5px

  • space-6

    6px

  • space-8

    8px

  • space-10

    10px

  • space-12

    12px

  • space-14

    14px

  • space-15

    15px

  • space-16

    16px

  • space-20

    20px

Radius

  • radius-2

    2px

  • radius-4

    4px

  • radius-6

    6px

  • radius-8

    8px

  • radius-10

    10px

  • radius-20

    20px

  • radius-100

    100px

  • radius-500

    500px

  • radius-pill

    9999px

  • radius-circle

    50%

Elevation

  • shadow-heavy

    rgba(0,0,0,0.5) 0px 8px 24px

  • shadow-medium

    rgba(0,0,0,0.3) 0px 8px 8px

  • shadow-inset-border

    rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset

Components

  • Buttons

    Pill and circle buttons for every action: dark pill, large dark pill, light pill, outlined pill and the circular play control.

    • A label (one or two words) or, for the circular play control, an accessible name such as aria-label="Play".
    • A variant class: sp-btn--dark, sp-btn--dark-large, sp-btn--light, sp-btn--outlined, or sp-play (add sp-play--green for the primary play control).
    • Add sp-btn--upper for a system label in the button-uppercase style.
    • Use sp-btn--dark (mid-dark, radius-pill, 8px 16px) for nav pills and secondary actions; add is-muted for a silver label.
    • Use sp-btn--dark-large (dark-surface, radius-500, 0 43px) for primary app navigation buttons.
    • Use sp-btn--outlined (1px light-border, 4px 16px 4px 36px) for Follow; the 36px left padding holds an icon.
    • Put a black glyph on the green play control.
    • Don't square a button off; the pill and circle are the identity.
    • Don't use sp-btn--light as a primary in-app button; it is for rare light-mode CTAs.
    • Don't put white on spotify-green (1.92:1).

  • Cards

    Content cards for albums, playlists, artists and shows, set on dark-surface with square artwork on top and two lines of text below.

    • The artwork (an image at radius-6); previews show a solid token block in its place.
    • A title (body-bold, white) and one metadata line (caption, silver).
    • A container grid: 5 columns on desktop, stepping to 3, 2 and 1.
    • Use dark-surface or mid-dark with radius-8 and no visible border.
    • On hover, step the fill to dark-card and add shadow-medium (is-hover).
    • Let the artwork supply all the color.
    • Don't add borders or a colored accent stripe.
    • Don't put spotify-green on the card surface; it belongs only on the play control that appears on hover.

  • Inputs

    The search input: a mid-dark pill with white text and an inset border ring, padded to hold a leading search icon and trailing controls.

    • A placeholder ("What do you want to play?") and an accessible label.
    • The leading search icon, positioned inside the 48px left padding.
    • Use radius-500, 12px 96px 12px 48px padding and shadow-inset-border for the ring.
    • Set placeholder text in silver and typed text in white.
    • Show focus with the solid 2px white outline from the README.
    • Don't draw a raw border-gray border; use the inset shadow.
    • Don't rely on the source's black focus border alone; it is invisible on dark grounds.

  • Navigation

    The dark sidebar: a vertical list of nav items with circular icon slots, white and bold for the active item, silver and regular for the rest.

    • Items, each with a label, a link and an icon in a radius-circle slot.
    • Which item is active (is-active, plus aria-current="page").
    • Sit the sidebar on near-black.
    • Set the active item in nav-link-bold white and inactive items in nav-link silver.
    • Collapse the sidebar on narrow screens and move navigation to a bottom bar on mobile.
    • Don't mark the active item with color alone; it changes weight too.
    • Don't draw a logo here; this system ships none. Set the product name in plain type if one is needed.