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.
Files1
View on GitHubSKILL.mdpackages/skills/style-pack-modern-consumer/SKILL.md
GitHubstyle-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.