What is Pandora's primary brand color?

Pandora's brand voltage is a deep teal-to-indigo blue gradient, not a single flat hex. The teal-blue end-stop sits at #035f8d at the top of the page; the indigo end-stop sits at #224099 at the bottom; together they fill the entire viewport as the page background. White text sits on top. There are no other chromatic tones on the captured surface — no green, no Pandora-purple, no warning red. The gradient is the entire brand chrome, which is unusual: most streaming brands hold a flat brand color and overlay it with card chrome (Spotify's green pill on near-black, SoundCloud's orange on white). Pandora dispenses with the chrome entirely on this surface.

What typeface does Pandora use, and what should I use as a substitute?

Pandora runs Avenir Next at weight 400 across every typographic tier observed on the captured page — display at 36px / 48px leading, dek at 24px / 36px leading, body at 15px / 40px leading (the wide leading is the inline-link rhythm), and footer copy at 12px / 22px. Avenir Next is a geometric humanist sans designed by Adrian Frutiger; the fallback stack walks to 'Avenir, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif.' The closest open-source substitute is Nunito Sans at the same weights; Inter is the next-closest if a more contemporary feel is acceptable. There is no weight escalation anywhere — the entire system sits at 400, including the lowercase wordmark.

Why is the entire page a single gradient instead of having a hero section?

The captured surface is Pandora's geo-restricted landing page — accessed from outside the United States, the service returns a one-screen 'unavailable in this country or region' notice rather than the full product. The page's job is to communicate access state and route the visitor to SoundCloud (Pandora's recommended international alternative) and to Pandora support. Because the page has nothing to sell and no chrome to present, the brand-color gradient does the entire visual job — there is no need for a hero card, a feature strip, or a footer link wall beyond the legal footer. The discipline is forced by the page's purpose, but the result is a study in voltage-as-canvas restraint.

Why are there no buttons on the page, just underlined links?

The captured surface has zero rounded surfaces, zero filled buttons, and zero card affordances. Every interactive element is a plain underlined inline link — 'SoundCloud,' 'contact Pandora support,' and the four footer links (About, Blog, Privacy, Terms). The links sit inline within sentence-flow body copy at 15px Avenir Next, white with a single-pixel underline. The treatment matches the geo-block page's tone: this is a 'we'd love to help, please contact us' message, not a marketing splash that needs an emphatic 'Start Listening' CTA. The button-less composition tells the visitor that no transaction is on offer here.

Can I use this DESIGN.md to build a Pandora-styled splash page?

Yes — for a one-screen splash page, gradient-canvas landing, or geo-block notice, the tokens work directly. The agent will reproduce Pandora's specific moves: full-bleed teal-to-indigo gradient, Avenir Next at weight 400 across every tier, centered-text composition with generous vertical whitespace, underline inline links instead of buttons, and a 28px lowercase wordmark anchored top-left. The honest caveat: this DESIGN.md captures only Pandora's geo-restricted surface. The full US listener-facing player (station tiles, song detail, thumb feedback, queue surface) carries a much richer system not represented here. Treat this file as a starting point for splash-page styling, not as the complete Pandora design system.

Pandora Design System

Pandora's marketing canvas as a DESIGN.md file — a single teal-to-indigo gradient floods the page, Avenir Next at weight 400 carries every tier, three underline links substitute f…

About Pandora DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source pandora.com

Music, Video & Streaming

Pandora's public marketing canvas (when accessed from outside the United States, as the headless extractor was) is a single deep-blue gradient that fills the entire viewport — teal-blue at the top, saturated indigo at the bottom — with the lowercase "pandora" wordmark anchored top-left, a 36px Avenir Next display sentence centered mid-canvas, and two underline links carrying every interactive affordance the page provides. There is no card, no chrome, no top-nav, no shadow, no rounded button. The page is the brand color, and the brand color is the page. Where Spotify holds its green to the play-button accent against a near-black canvas and Apple Music runs photography-led card grids on white, Pandora has nothing on the surface but the gradient itself.

The DESIGN.md file packages what's observable into a machine-readable spec. Inside: 4 color tokens (the two gradient end-stops, white ink, and a derived mid-stop), 8 typography tokens all running Avenir Next at weight 400 — display at 36px, dek at 24px, body at 15px, footer at 12px — 2 corner radius tokens (0px and a derived pill, neither rendered on the captured surface), 6 spacing values, and 12 components covering the gradient canvas, the wordmark, the underline link, the centered dek block, the footer link strip, and the copyright row. The component palette is unusually small because the captured surface is unusually small.

Feed this file to an AI tool and it reproduces Pandora's specific moves on a marketing one-pager: full-bleed teal-to-indigo gradient instead of a flat brand color, single typeface across every tier with no weight escalation, underline links instead of pill buttons, and centered-text composition with generous vertical whitespace. The honest framing: this DESIGN.md captures the geo-restricted surface only. The US listener-facing player carries a richer system — radio-station tiles, "thumb up / thumb down" feedback controls, the song-detail surface — none of which is exposed to a non-US extractor. Treat the tokens as a starting point for a Pandora-styled splash page, not as the full product system.

What makes it distinct

Gradient-as-canvasteal-blue #035f8d top to indigo #224099 bottom fills the entire viewport, no card or container
Avenir Next at 400 across every tierdisplay sits at 36px, dek at 24px, body at 15px, footer at 12px, no weight escalation
Underline inline links replace buttonsthree white-underlined link affordances do the work of CTAs on the captured surface
Lowercase wordmark28px white 'pandora' in the top-left, no logo mark, no padlock, just the wordmark on the blue floor
No corner radius, no shadow, no hairlinethe system has nothing to round because the canvas is unbroken

Live at pandora.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

pandora.com

Explore Pandora

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Pandora design system FAQ

Common questions about Pandora's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pandora — official site

Pandora's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.