Spotify brand & design guidelines
Public rules for using Spotify’s logo, icon and attribution in third-party apps. Logo files are on the newsroom media kit (newsroom.spotify.com/media-kit/logo-and-brand-assets). Tip: note how clear-space, minimum size and color rules are stated: copy that structure for your own guidelines.
Summary
Public rules for using Spotify’s logo, icon and attribution in third-party apps. Logo files are on the newsroom media kit (newsroom.spotify.com/media-kit/logo-and-brand-assets). Tip: note how clear-space, minimum size and color rules are stated: copy that structure for your own guidelines.
What it is
A company’s public brand page: how its logo, color and type may be used.
Who it’s for
Designers learning how mature brands document identity, and anyone who must use that brand’s assets correctly.
Key takeaways
- Captured Spotify’s design guidelines: a documentation layout with left navigation, a purple header bar and diagrams of attribution rules.
- Color: monochrome light theme; dominant colors #FFFFFF, #412E6F, #A8BCC5 (ESTIMATED from our capture).
- Layout: documentation pattern, corporate, structured mood.
Best practices to borrow
- Keep chrome neutral and let content carry color.
- Use a left nav tree, a readable center column and an on-page table of contents.
- Respect clear-space, minimum size and color rules when you use this brand’s assets.
Palette preview
Link-only entry: no third-party images are reproduced; the hero above is our own palette render. Open the source for visuals.
Dominant palette from our captures
Measured by us from our screenshot(s) of https://developer.spotify.com/documentation/design (median-cut quantization; share = % of pixels). Approximate and not official.
Layout pattern: Documentation
Observed by us on the captured page(s). See all entries by layout.
How to apply it: Use a left nav tree, a readable center column and an on-page table of contents.
Other entries with this layout: Apple Human Interface Guidelines, Vercel brand assets (Geist), DiceBear · Lorelei, DiceBear · Notionists (Notion-style avatars), Anthropic ‘frontend-design’ skill.
Our analysis
Captured Spotify’s design guidelines: a documentation layout with left navigation, a purple header bar and diagrams of attribution rules.
Similar to this
Ranked by shared color theme, layout, category, type and mood tags.
DESIGN.md for AI coding agents
Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.
# DESIGN.md · Spotify brand & design guidelines (LG-005) > Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens. ## Overview - Type: Brand Guidelines · Category: H. Logos and Brand Identity - Platforms: Web - Color theme: Monochrome light · Layout pattern: Documentation · Mood: Corporate, structured - License / terms: Spotify trademarks; follow the guidelines; link only Public rules for using Spotify’s logo, icon and attribution in third-party apps. Logo files are on the newsroom media kit (newsroom.spotify.com/media-kit/logo-and-brand-assets). Tip: note how clear-space, minimum size and color rules are stated: copy that structure for your own guidelines. ### Analysis (ours) Captured Spotify’s design guidelines: a documentation layout with left navigation, a purple header bar and diagrams of attribution rules. ## Color tokens No official color tokens documented for this entry. ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official: - `#FFFFFF` ~49% - `#412E6F` ~12% - `#A8BCC5` ~11% - `#D9E7E4` ~5% ## Typography No official type scale documented for this entry; use the product’s own typography guidance. ## Spacing, radii, shadows Not documented for this entry. Do not invent values; derive from your own design system. ## Components No component inventory documented for this entry. ## Layout rules - Observed layout pattern: **Documentation** (from our captures). ## Do’s and don’ts - Do: Keep chrome neutral and let content (images, icons, type) carry color. - Don’t: Don’t introduce decorative color that competes with content. - Do: follow the source’s license/terms listed above. - Don’t: present ESTIMATED colors as official tokens. ## Sources - https://developer.spotify.com/documentation/design - Library entry: https://design-library-byt.pages.dev/entry/LG-005