Media design systems

Media design systems give product teams and coding agents a concise way to study a visual language before implementation. Each entry below links to a complete DESIGN.md — palette roles, typography behavior, spacing, surfaces, and interaction patterns — ready to drop into an AI coding workflow.

Media interfaces put content first and chrome second. Spotify’s album-art-driven darkness and Pinterest’s masonry-grid neutrality both solve the same problem: the UI must frame ever-changing, user-generated visuals without competing against them.

The techniques documented in these files: near-black canvases that make cover art glow, palettes that stay neutral so content provides the color, and typography that stays legible over unpredictable imagery. Essential reading before building any feed, gallery, or player.

Treat these media design systems as a design brief, not an official vendor kit: every analysis is independent, and trademarks belong to their owners. Compare token choices below, or return to the full library for other categories.