style-pack-modern-consumer

Modern consumer, with Spotify as the reference: dark-leaning, content-first, bold type and artwork-led cards. For media and consumer apps.

SKILL.md

GitHub

style-pack-modern-consumer

A style pack for the design direction: modern consumer (Spotify). Chosen by name in design.md.

The look

  • Reference: Spotify, the owner's stated example. It is a reference for feel, not a brand asset; copy no logo, colour value or artwork.
  • Type: bold headings, compact supporting text, strong hierarchy between title and metadata.
  • Colour: dark surfaces by default where the system allows; content artwork supplies the colour; one accent for the primary action.
  • Spacing: tight card grids with clear shelves and rows.
  • Radius: moderate on cards, full on primary buttons.
  • Density: medium, content-first.
  • Motion: quick, smooth transitions; artwork and playback state animate, chrome does not.

Do and don't

  • Do: make the content the largest thing on screen; keep controls persistent and easy to reach.
  • Don't: add decoration that competes with the artwork, or invent brand colours.

Within the design system

This pack never overrides a token and never replaces a component. It guides the choices the design system leaves open: layout, hierarchy, spacing between groups, emphasis and imagery. How far those choices may depart from today's screens is the departure latitude in design.md; the pack works inside that latitude. Where the system already decides something, the system wins.