light · bold · sans · dense · audio · waveform · social
SoundCloud
Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI.
By webdesignhot · soundcloud.com
$ npx design-md add soundcloud
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#f2f2f2 - bg-deep
#ffffff - bg-dark
#333333 - bg-band
#fafafa - surface
#ffffff - surface-strong
#f7f7f7 - surface-soft
#f8f8f8 - surface-pro
#333333 - text AAA · 11.3
#333333 - text-strong
#1f1f1f - text-subdued
#666666 - text-muted
#999999 - text-link
#ff5500 - text-disabled
#cccccc - text-on-dark
#ffffff - brand — · 2.9
#ff5500 - brand-hover
#ff6e1f - brand-active
#cc4400 - brand-deep
#a83600 - on-brand
#ffffff - accent-brand-2
#f50 - border — · 1.1
#e5e5e5 - border-soft
#eeeeee - border-strong — · 1.4
#cccccc - border-on-dark
#444444 - waveform-played
#ff5500 - waveform-unplayed
#999999 - waveform-buffered
#cccccc - waveform-hover
#ff8e62 - playhead
#ff5500 - comment-marker
#ff5500 - shadow-card
rgba(0,0,0,0.08) - shadow-modal
rgba(0,0,0,0.2) - success
#5cd363 - warning
#ffba00 - danger
#cc0000 - danger-text
#cc0000 - info
#3399ff - badge-pro
#ff5500 - badge-go-plus
#7711d4 - verified-blue
#0099ff - repost-green
#5cd363 - like-orange
#ff5500
Ship faster than ever.
display-xl "Interstate" 48px w700 -0.01em
Ship faster than ever.
display-lg "Interstate" 32px w700 0
Ship faster than ever.
display-md "Interstate" 24px w700 0
Ship faster than ever.
display-sm "Interstate" 20px w700 0
The quick brown fox jumps over the lazy dog.
title-md "Interstate" 16px w700 0
The quick brown fox jumps over the lazy dog.
title-sm "Interstate" 14px w700 0
The quick brown fox jumps over the lazy dog.
subtitle "Interstate" 14px w400 0
The quick brown fox jumps over the lazy dog.
body-md "Interstate" 14px w400 0
The quick brown fox jumps over the lazy dog.
button-lg "Interstate" 14px w700 0
The quick brown fox jumps over the lazy dog.
nav-link "Interstate" 14px w400 0
The quick brown fox jumps over the lazy dog.
body-sm "Interstate" 12px w400 0
The quick brown fox jumps over the lazy dog.
button-md "Interstate" 12px w700 0
The quick brown fox jumps over the lazy dog.
metadata "Interstate" 12px w400 0
The quick brown fox jumps over the lazy dog.
comment-text "Interstate" 12px w400 0
OUR DESIGN SYSTEM
caption "Interstate" 11px w400 0
The quick brown fox jumps over the lazy dog.
waveform-time "Interstate" 11px w700 0
The quick brown fox jumps over the lazy dog.
badge "Interstate" 10px w700 0.04em
- step-0 4px
- step-1 8px
- step-2 10px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 30px
- step-8 36px
- step-9 48px
- step-10 60px
- step-11 80px
- step-12 120px
- none
0px - micro
2px - sm
3px - md
4px - lg
6px - xl
8px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: SoundCloud
tagline: Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI.
author: webdesignhot
source_url: https://soundcloud.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media, social]
tags: [light, bold, sans, dense, audio, waveform, social]
preview_swatch: ['#f2f2f2', '#ff5500', '#333333']
related: [spotify, suno, threads-app]
description: 'SoundCloud is the original audio-social UI: a paper-grey `#f2f2f2` canvas (one of the few light-default streaming brands), the unmistakable SoundCloud Orange `#ff5500` rationed for the Play button, the active waveform-played region, the wordmark, and Like-heart accents, and Interstate sans (since 2013) carrying display headlines at 700 weight with neutral tracking. The defining UI element is the horizontal waveform — the page renders every track as a 70px-tall stereo amplitude waveform with the played portion in solid orange, the unplayed portion in mid-grey, and the playhead a thin vertical line. Comments anchor as avatars stuck to the timestamp on the waveform itself. Type is workhorse, density is feed-like, and orange is the wayfinding signal so every "Play" reads as the only action.'
colors:
bg: '#f2f2f2' # canvas — SoundCloud signature paper-grey
bg-deep: '#ffffff' # card surface (white above the grey ground)
bg-dark: '#333333' # rare dark-mode surface (pro/premium pages)
bg-band: '#fafafa' # alt band on long-scroll feeds
surface: '#ffffff' # default card, feed item
surface-strong: '#f7f7f7' # hovered surface, comments well
surface-soft: '#f8f8f8' # alt band, table-row stripe
surface-pro: '#333333' # SoundCloud Pro feature band (dark)
text: '#333333' # primary text — soft black, not pure
text-strong: '#1f1f1f' # display
text-subdued: '#666666' # secondary metadata, "by Artist"
text-muted: '#999999' # tertiary, timestamps
text-link: '#ff5500' # link orange — same as brand
text-disabled: '#cccccc'
text-on-dark: '#ffffff' # white text on dark-mode pro band
brand: '#ff5500' # SoundCloud Orange — defining brand colour
brand-hover: '#ff6e1f' # marginally brighter on hover
brand-active: '#cc4400' # press / pointer-down
brand-deep: '#a83600' # archived deep variant
on-brand: '#ffffff'
accent-brand-2: '#f50' # 3-char alias of brand orange used in legacy CSS
border: '#e5e5e5' # default light hairline
border-soft: '#eeeeee' # softer divider
border-strong: '#cccccc' # focused input outline
border-on-dark: '#444444' # divider on dark surface
waveform-played: '#ff5500' # played region of waveform — orange
waveform-unplayed: '#999999' # unplayed region — mid-grey
waveform-buffered: '#cccccc' # downloaded but unplayed (rare display)
waveform-hover: '#ff8e62' # waveform peak hover state
playhead: '#ff5500' # vertical playhead line on waveform
comment-marker: '#ff5500' # comment-anchor dot on waveform
shadow-card: 'rgba(0,0,0,0.08)'
shadow-modal: 'rgba(0,0,0,0.2)'
success: '#5cd363' # verified, upload-success
warning: '#ffba00' # processing, encoding
danger: '#cc0000' # error, copyright takedown
danger-text: '#cc0000'
info: '#3399ff' # informational link blue (rare)
badge-pro: '#ff5500' # Pro/Pro Unlimited tier badge
badge-go-plus: '#7711d4' # Go+ subscriber tag (purple)
verified-blue: '#0099ff' # verified-creator checkmark
repost-green: '#5cd363' # repost-arrow accent
like-orange: '#ff5500' # filled-heart liked state
typography:
display:
family: '"Interstate", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [400, 500, 700, 900]
opentype-features: ['tnum']
body:
family: '"Interstate", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [400, 500, 700]
mono:
family: 'Menlo, Consolas, "Roboto Mono", SFMono-Regular, monospace'
weights: [400]
scale:
display-xl: { size: 48, weight: 700, lineHeight: 1.1, tracking: '-0.01em', family: display, notes: 'Marketing landing hero' }
display-lg: { size: 32, weight: 700, lineHeight: 1.15, tracking: '0', family: display, notes: 'Profile page name' }
display-md: { size: 24, weight: 700, lineHeight: 1.2, tracking: '0', family: display, notes: 'Track title in player' }
display-sm: { size: 20, weight: 700, lineHeight: 1.3, tracking: '0', family: display, notes: 'Section header "Tracks I''m following"' }
title-md: { size: 16, weight: 700, lineHeight: 1.3, tracking: '0', family: display, notes: 'Track title in feed item' }
title-sm: { size: 14, weight: 700, lineHeight: 1.3, tracking: '0', family: display, notes: 'Sidebar nav label' }
subtitle: { size: 14, weight: 400, lineHeight: 1.3, tracking: '0', family: body, notes: '"by Artist" subtitle below track title' }
body-md: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body, notes: 'Default body, comment text' }
body-sm: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: body, notes: 'Secondary metadata' }
button-md: { size: 12, weight: 700, lineHeight: 1.0, tracking: '0', family: body, notes: 'Like / Repost / Share / Follow' }
button-lg: { size: 14, weight: 700, lineHeight: 1.0, tracking: '0', family: body, notes: 'Primary CTA' }
caption: { size: 11, weight: 400, lineHeight: 1.3, tracking: '0', family: body, notes: 'Timestamps, fine print' }
metadata: { size: 12, weight: 400, lineHeight: 1.3, tracking: '0', family: body, opentype: ['tnum'], notes: 'Play count, listen count, duration' }
waveform-time: { size: 11, weight: 700, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'], notes: 'Time labels at start/end of waveform' }
badge: { size: 10, weight: 700, lineHeight: 1.0, tracking: '0.04em', family: body, transform: uppercase, notes: '"PRO", "GO+", "VERIFIED"' }
nav-link: { size: 14, weight: 400, lineHeight: 1.0, tracking: '0', family: body, notes: 'Top nav, sidebar links' }
comment-text: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: body, notes: 'Comment body anchored to waveform timestamp' }
radius:
none: 0 # waveform — flush
micro: 2 # play-count badge
sm: 3 # default button radius (small, distinctive)
md: 4 # input, card content
lg: 6 # modal corners
xl: 8 # rare; some featured cards
pill: 9999 # filter pills, tags
spacing:
base: 4
scale: [4, 8, 10, 12, 16, 20, 24, 30, 36, 48, 60, 80, 120]
layout:
page-width: 1240 # historic SoundCloud constraint
content-max: 1100
sidebar-width: 230 # right-rail "You / Following / Charts"
feed-width: 760 # main feed column
player-bar-height: 50 # pinned bottom-of-viewport player
waveform-height: 70 # canonical full-track waveform tall
waveform-mini-height: 30 # mini-waveform in feed items
components:
button-primary-solid:
bg: '#ff5500'
color: '#ffffff'
radius: 3
padding: '0 12px'
height: 28
font: button-md
weight: 700
use: 'Primary action — Sign up, Try Pro, Upload. Small, dense, characteristic 3px radius.'
button-primary-large:
bg: '#ff5500'
color: '#ffffff'
radius: 3
padding: '0 24px'
height: 38
font: button-lg
weight: 700
use: 'Marketing landing CTA — slightly taller variant.'
button-outline:
bg: 'transparent'
color: '#333333'
border: '1px solid #cccccc'
radius: 3
padding: '0 12px'
height: 28
font: button-md
weight: 700
use: 'Secondary action — Follow, Share, Repost. Outlined neutral.'
button-outline-active:
bg: '#ff5500'
color: '#ffffff'
border: '1px solid #ff5500'
radius: 3
use: 'Pressed/active outline button — Following (after follow).'
button-text:
bg: 'transparent'
color: '#333333'
border: 'none'
padding: '0 8px'
height: 28
use: 'Tertiary text-only — Cancel, More, See All.'
button-icon:
bg: 'transparent'
color: '#666666'
border: 'none'
height: 28
width: 28
use: 'Icon-only utility — Like, Repost, Share, More. Hover lifts to #333333.'
button-icon-active:
bg: 'transparent'
color: '#ff5500'
use: 'Liked / Reposted — icon flips to brand orange.'
button-play-circle:
bg: 'rgba(0,0,0,0.5)'
color: '#ffffff'
radius: '50%'
height: 50
width: 50
use: 'Translucent circular Play button overlaid on track artwork (feed item).'
button-play-circle-large:
bg: '#ff5500'
color: '#ffffff'
radius: '50%'
height: 70
width: 70
use: 'Solid orange circular Play on track page hero.'
waveform-track:
bg: 'transparent'
color: '#333333'
height: 70
use: 'Canonical full-track waveform — orange played region, grey unplayed, vertical playhead line.'
waveform-mini:
bg: 'transparent'
color: '#333333'
height: 30
use: 'Compressed waveform inside feed-item rows.'
waveform-comment-marker:
bg: '#ff5500'
color: '#ffffff'
radius: '50%'
height: 16
width: 16
use: 'Avatar-anchored comment dot on waveform timeline; click reveals comment.'
card-feed-item:
bg: '#ffffff'
color: '#333333'
radius: 4
border: '1px solid #e5e5e5'
padding: 16
use: 'Default feed item — track artwork left, title + artist + waveform + actions right.'
card-track-page:
bg: '#ffffff'
color: '#333333'
radius: 4
border: '1px solid #e5e5e5'
use: 'Full track page — large artwork + title + 70px waveform + comments well below.'
card-profile:
bg: 'linear-gradient(180deg, var(--user-banner) 0%, #ffffff 280px)'
color: '#333333'
use: 'Profile hero — user-uploaded banner image fades into white card.'
badge-pro:
bg: '#ff5500'
color: '#ffffff'
radius: 2
padding: '1px 4px'
font: badge
use: '"PRO" tag next to Pro creator names.'
badge-go-plus:
bg: '#7711d4'
color: '#ffffff'
radius: 2
padding: '1px 4px'
use: '"GO+" tag for Go+ subscribers.'
badge-verified:
color: '#0099ff'
use: 'Blue checkmark glyph next to verified creator names.'
badge-play-count:
bg: 'rgba(0,0,0,0.6)'
color: '#ffffff'
radius: 2
padding: '1px 4px'
use: 'Translucent black play-count chip on track artwork.'
comment-row:
bg: '#f7f7f7'
color: '#333333'
radius: 4
padding: '8px 12px'
use: 'Comment in the comments well — avatar + username + comment-text + timestamp.'
comment-anchored:
bg: 'transparent'
color: '#333333'
use: 'Avatar bubble pinned to a waveform timestamp — visible on track-page waveform.'
input-text:
bg: '#ffffff'
color: '#333333'
radius: 3
border: '1px solid #cccccc'
height: 28
padding: '0 12px'
use: 'Default text input.'
input-search:
bg: '#ffffff'
color: '#333333'
radius: 3
border: '1px solid #cccccc'
height: 28
padding: '0 12px 0 32px'
use: 'Top-bar search with magnifier icon left.'
input-comment:
bg: '#ffffff'
color: '#333333'
radius: 3
border: '1px solid #cccccc'
height: 36
padding: '8px 12px'
placeholder-color: '#999999'
use: '"Write a comment" input above comments well — focuses on click into waveform.'
player-bar:
bg: '#ffffff'
color: '#333333'
height: 50
border-top: '1px solid #e5e5e5'
use: 'Pinned bottom-of-viewport mini player — Play/Pause + transport + mini waveform + title + Like + volume + queue.'
scrubber-mini:
bg: '#cccccc'
fill: '#ff5500'
height: 3
use: 'Mini scrubber inside player bar; full waveform replaces it on track page.'
top-nav-bar:
bg: '#ffffff'
color: '#333333'
height: 50
border-bottom: '1px solid #e5e5e5'
use: 'Persistent top nav — orange wordmark, Home / Stream / Library, search field, Upload, profile.'
modal-dialog:
bg: '#ffffff'
color: '#333333'
radius: 6
shadow: '0 10px 30px rgba(0,0,0,0.2)'
use: 'Settings, share dialogs.'
toast:
bg: '#333333'
color: '#ffffff'
radius: 3
padding: '12px 16px'
use: 'Confirmation — "Liked", "Reposted", "Added to Likes". Dark inverted, contrasts against page.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
ease-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 300
duration-waveform-fill: 60 # incremental waveform-fill update tied to playhead
reduced-motion: 'respects prefers-reduced-motion: waveform-fill becomes step-update on second boundaries instead of frame-by-frame; comment-marker bounce is suppressed; like-heart pop becomes instant; toast fades instead of slides.'
breakpoints:
mobile: 480
tablet: 768
desktop: 1024
wide: 1240
shadows:
none: 'none'
card-rest: 'none'
card-hover: '0 2px 8px rgba(0,0,0,0.08)'
modal: '0 10px 30px rgba(0,0,0,0.2)'
popover: '0 4px 12px rgba(0,0,0,0.15)'
ring: '0 0 0 2px #ff5500'
accessibility:
contrast-text-on-bg: 12.6 # #333333 on #f2f2f2 — AAA
contrast-text-strong-on-bg: 16.7 # #1f1f1f on #f2f2f2 — AAA
contrast-text-subdued-on-bg: 5.4 # #666666 on #f2f2f2 — AA at body
contrast-text-on-brand: 3.5 # white on #ff5500 — AA only for large text (18px+/bold) or 14px+/700
focus-ring: '2px solid #ff5500 with 2px offset'
reduced-motion-honored: true
caption-track: 'no captions on most music; podcast tracks support transcripts'
audio-description: 'audio is the content; player a11y emphasises keyboard control'
dark-mode: optional # SoundCloud is light-default; some pro/premium pages use dark surfaces
---
## 1. Visual Theme & Atmosphere
SoundCloud is the audio-social outlier — the only major streaming-music brand that has stayed light-default for nearly 20 years. The canvas is a paper-grey `#f2f2f2` (a classic "off-white" warmer than `#fff` and more daylit than typical app greys), with cards floating above as `#ffffff` panels. This light-on-light layered architecture is rare in 2026 streaming and intentional: SoundCloud was born in 2007 as a creator's-audio-portfolio tool, and the paper-canvas metaphor — "this is your demo upload, presented like a manuscript" — has been preserved through every redesign.
The signature is the Orange. `#ff5500` is one of the most chromatically distinctive brand colours in tech — saturated, almost sunset, more red-orange than amber. It is rationed to: the wordmark, the played portion of every waveform, the playhead vertical line, the Play button, the Like-heart filled state, and the comment-anchor dots on the waveform timeline. Everywhere else is monochrome — soft black `#333333`, mid-grey `#666666`, light hairline `#e5e5e5`. The orange is wayfinding: wherever orange is, that is what you can play, like, or interact with.
The defining UI element is the **horizontal waveform**. Every track on SoundCloud renders as a 70px-tall stereo amplitude waveform — top half mirrored to the bottom half, pixels coloured according to playback state: orange `#ff5500` for played, grey `#999999` for unplayed, with a thin vertical orange line marking the current playhead position. Comments (which on SoundCloud are time-anchored to specific seconds in the track) appear as tiny avatar dots stuck to specific x-positions on the waveform. Hover any moment of a song and a tooltip shows the comment + commenter at that timestamp. This waveform-as-timeline-as-comment-thread is SoundCloud's most-imitated and most-distinctive single contribution to UI design.
Interstate, the brand's display sans (in use since 2013, replacing the older Trade Gothic), is a workhorse American-signage geometric. It runs heavy at the top (700 weight at 16–48px) and modest below (400, 12–14px). Tracking is neutral 0em — SoundCloud refuses the negative-tracked discipline of Spotify and Stripe, partly because Interstate's letterforms are wider than Inter or Circular and partly because the brand's lineage is signage, not editorial. Type is functional, not expressive.
Density is the third axis. The Stream feed (the "home" experience) renders 5–7 feed items above the fold on a 1024px display, each item a 760px-wide card with track artwork left + waveform + actions right. Each feed item carries the full waveform with comment markers, the Play/Like/Repost/Share/More action row, and a 2-line description. Below every card is the comments well — a vertically scrolling list of time-anchored comments. The page is information-dense but airy — cards are bordered (`1px #e5e5e5`) with no shadows at rest, separated by 16–24px gaps.
**Key Characteristics:**
- Light paper canvas `#f2f2f2` with white `#ffffff` floating cards — light-default, rare in modern streaming.
- Single voltage of brand orange `#ff5500` reserved for waveform-played, Play, Like, wordmark, and comment markers.
- The 70px-tall horizontal waveform is the defining UI element — orange/grey amplitude bars with vertical playhead line.
- Comments are time-anchored to waveform timestamps — avatar dots stick to seconds in the song.
- Interstate sans at 700 weight with **neutral 0em tracking** — workhorse American-signage geometric.
- Small 3px button radius — distinctive against modern 4–8px norms; signals legacy 2010s-era origin retained.
- Pinned 50px-tall bottom mini-player with mini-waveform scrubber persistent across navigation.
- Right-rail 230px sidebar with "Following / Charts / Stations / Trending Now".
- Toast confirmations are dark `#333333` against the light canvas — inverted contrast.
- Light-default; some Pro/Premium pages use dark `#333333` surfaces but they are out-of-product marketing.
## 2. Color Palette & Roles
### Primary
- **Paper Grey** (`#f2f2f2`): The defining canvas. Warmer than `#fff`, lighter than typical app greys — paper-portfolio metaphor from 2007 brand origin.
- **Card White** (`#ffffff`): Floating card surface above the paper canvas.
- **Soft Black** (`#333333`): Primary text. Not pure black — softer for long reading sessions.
- **SoundCloud Orange** (`#ff5500`): The brand's defining hue. Wordmark, Play, Like, waveform-played, playhead, comment markers.
### Brand & Light
- **Orange Hover** (`#ff6e1f`): Marginally brighter on pointer-over.
- **Orange Active** (`#cc4400`): Pressed state.
- **Orange Deep** (`#a83600`): Archived gradient terminus, legacy promo.
- **Display Strong** (`#1f1f1f`): Display headlines that demand maximum contrast.
### Accent
- **Repost Green** (`#5cd363`): Repost-arrow accent + verified-success.
- **Verified Blue** (`#0099ff`): Verified creator checkmark.
- **Go+ Purple** (`#7711d4`): Go+ subscriber-tier badge.
- **Info Blue** (`#3399ff`): Informational link blue (rare in product).
### Interactive
- **CTA Orange** (`#ff5500`): Primary action.
- **Outline Neutral** (`1px solid #cccccc` on transparent): Secondary action.
- **Active Outline** (`1px solid #ff5500` + `#ff5500` bg): Pressed Following / Liked state.
- **Disabled** (`#cccccc` text on `#f2f2f2` bg): Non-interactive control.
### Neutral Scale
- **Display Strong** (`#1f1f1f`): Display headlines, profile names.
- **Primary Text** (`#333333`): Body, track titles, comment text. Soft black.
- **Subdued** (`#666666`): "by Artist" subtitle, secondary metadata. AA at body.
- **Muted** (`#999999`): Tertiary captions, timestamps, unplayed waveform.
- **Disabled** (`#cccccc`): Disabled menu items, focused-input border, scrubber rail.
- **Border Default** (`#e5e5e5`): Card border, top-nav bottom border, divider.
- **Border Soft** (`#eeeeee`): Lighter divider, table-row separator.
### Surface & Borders
- **Surface Card** (`#ffffff`): Default card.
- **Surface Strong** (`#f7f7f7`): Hovered surface, comments well.
- **Surface Soft** (`#f8f8f8`): Alt band on long-scroll feeds.
- **Surface Pro** (`#333333`): Dark Pro/Premium feature band — out-of-product marketing.
- **Border Strong** (`#cccccc`): Focused input outline.
### Waveform Colors
- **Played** (`#ff5500`): Orange amplitude bars left of playhead.
- **Unplayed** (`#999999`): Grey amplitude bars right of playhead.
- **Buffered** (`#cccccc`): Optional indicator for downloaded-but-unplayed (rare display).
- **Hover** (`#ff8e62`): Lighter orange on hover-over a waveform peak.
- **Playhead** (`#ff5500`): Vertical 1px orange line marking current playback position.
### Shadow Colors
- **Card Hover** (`rgba(0,0,0,0.08)`): Soft drop on card hover — light shadows on light canvas need low opacity.
- **Modal** (`rgba(0,0,0,0.2)`): Heavier under dialogs.
- **Popover** (`rgba(0,0,0,0.15)`): Mid-weight under context menus.
### Semantic
- **Success** (`#5cd363`): Verified, upload-success.
- **Warning** (`#ffba00`): Processing, encoding-in-progress.
- **Danger** (`#cc0000`): Error, copyright-takedown red.
- **Info** (`#3399ff`): Informational link.
## 3. Typography Rules
### Font Family
- **Primary**: `"Interstate"` — display-and-text family by Tobias Frere-Jones (1993). Adopted by SoundCloud in 2013, replacing Trade Gothic. Fallback chain: `"Helvetica Neue", Helvetica, Arial, sans-serif`.
- **Mono**: `Menlo, Consolas, "Roboto Mono", SFMono-Regular, monospace` — used in dev-doc surfaces, embed-code copy boxes, never in player.
- **OpenType Features**: `tnum` on the metadata row so play counts, durations, and timestamps align — particularly important on the waveform's start/end time labels.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| Display XL | Interstate | 48px | 700 | 1.1 | -0.01em | -- | Marketing landing hero |
| Display LG | Interstate | 32px | 700 | 1.15 | 0 | -- | Profile page name |
| Display MD | Interstate | 24px | 700 | 1.2 | 0 | -- | Track title in player |
| Display SM | Interstate | 20px | 700 | 1.3 | 0 | -- | Section header "Tracks I'm following" |
| Title MD | Interstate | 16px | 700 | 1.3 | 0 | -- | Track title in feed item |
| Title SM | Interstate | 14px | 700 | 1.3 | 0 | -- | Sidebar nav label, button label |
| Subtitle | Interstate | 14px | 400 | 1.3 | 0 | -- | "by Artist" beneath track title |
| Body MD | Interstate | 14px | 400 | 1.5 | 0 | -- | Default body, modal text |
| Body SM | Interstate | 12px | 400 | 1.4 | 0 | -- | Secondary metadata |
| Button MD | Interstate | 12px | 700 | 1.0 | 0 | -- | Like / Repost / Share / Follow |
| Button LG | Interstate | 14px | 700 | 1.0 | 0 | -- | Primary CTA |
| Caption | Interstate | 11px | 400 | 1.3 | 0 | -- | Timestamps, fine print |
| Metadata | Interstate | 12px | 400 | 1.3 | 0 | tnum | Play count, duration |
| Waveform Time | Interstate | 11px | 700 | 1.0 | 0 | tnum | Time labels at start/end of waveform |
| Badge | Interstate | 10px | 700 | 1.0 | 0.04em | -- | Uppercase "PRO", "GO+", "VERIFIED" |
| Nav Link | Interstate | 14px | 400 | 1.0 | 0 | -- | Top nav, sidebar links |
| Comment Text | Interstate | 12px | 400 | 1.4 | 0 | -- | Comment body anchored to waveform |
### Principles
- **Workhorse signage type, not editorial.** Interstate is Tobias Frere-Jones's American highway-signage geometric (1993) — wider letterforms than Helvetica or Inter. SoundCloud uses it because it scans at small sizes, not because it's expressive.
- **Neutral tracking, no negative.** SoundCloud refuses tight-tracked display. 0em across all sizes. The wider Interstate letterforms already feel snug; tightening would cramp them.
- **Tabular numerals on time and counts.** Waveform time labels (0:00 / 4:32), play counts (1.2K listens), and durations all use `tnum` so columns align in feed scrolling.
- **One family, no italics.** Interstate ships italic and condensed cuts but they are essentially never used in product. Single roman, single voice.
- **Display sizes stop at 700.** No 900-weight black even at 48px display — SoundCloud's loudest weight is 700, which keeps the typography quieter than Spotify or Wrapped-style streaming.
- **Sentence case for everything.** Section headers, modal titles, button labels — all "Tracks I'm following", not "TRACKS I'M FOLLOWING". Uppercase belongs only to small badges.
## 4. Component Stylings
### Buttons
**Primary (Orange Solid)**
- Background: `#ff5500`. Text: `#ffffff`. Radius: `3px`. Padding: `0 12px`. Height: `28px`. Font: Interstate 12px / 700.
- Hover: `#ff6e1f`.
- Active: `#cc4400`.
- Use: "Sign up", "Try Pro", "Upload", "Send" (in comment input).
**Primary Large**
- Background: `#ff5500`. Text: `#ffffff`. Radius: `3px`. Padding: `0 24px`. Height: `38px`. Font: 14px / 700.
- Use: Marketing landing CTA — slightly taller variant.
**Outline (Neutral)**
- Background: `transparent`. Text: `#333333`. Border: `1px solid #cccccc`. Radius: `3px`. Padding: `0 12px`. Height: `28px`. Font: 12px / 700.
- Hover: bg `#f7f7f7`.
- Use: Follow, Share, Repost, Edit. Outlined neutral, not orange.
**Outline Active**
- Background: `#ff5500`. Color: `#ffffff`. Border: `1px solid #ff5500`.
- Use: "Following" state (after pressing Follow), "Liked" state (after pressing Like).
**Text**
- Background: `transparent`. Color: `#333333`. No border. Padding: `0 8px`. Height: `28px`.
- Hover: text `#1f1f1f`.
- Use: Cancel, See All, Show More.
**Icon (Default)**
- Background: `transparent`. Color: `#666666`. No border. Size: `28 × 28`.
- Hover: color `#333333`.
- Use: Like, Repost, Share, More — feed-item action row.
**Icon (Active)**
- Color: `#ff5500`. Glyph filled state.
- Use: Liked / Reposted (post-press state).
**Play Circle (Translucent Overlay)**
- Background: `rgba(0,0,0,0.5)`. Color: `#ffffff`. Radius: `50%`. Size: `50 × 50`.
- Use: Floating Play button overlaid on track artwork in feed item.
**Play Circle (Solid Orange)**
- Background: `#ff5500`. Color: `#ffffff`. Radius: `50%`. Size: `70 × 70`.
- Use: Big Play on track-page hero — paired with the artwork-flush waveform.
### Waveform
**Full Track Waveform**
- Height: `70px`. Background: `transparent`.
- Top half: amplitude peaks pointing up. Bottom half: mirrored. Both halves coloured per playback state.
- Played region (left of playhead): `#ff5500` orange.
- Unplayed region (right): `#999999` grey.
- Playhead: `1px solid #ff5500` vertical line.
- Hover: 1px-wide vertical light-orange `#ff8e62` highlight tracks the cursor with tooltip showing timestamp + comment if any.
**Mini Waveform (Feed-Item)**
- Height: `30px`. Same colour conventions, smaller amplitude resolution.
- Use: Inline waveform inside each feed-item card.
**Comment Marker**
- A 16×16 circular avatar of the commenter, anchored at the timestamp x-position on the waveform. On hover, expands and shows the comment text in a tooltip above.
- Use: Time-anchored comments — SoundCloud's defining social mechanic.
**Time Labels**
- 11px / 700 `#333333` `tnum` digits at the start (0:00) and end (4:32) of the waveform, anchored just below the bottom-half mirror.
### Cards & Tiles
**Feed Item**
- Background: `#ffffff`. Color: `#333333`. Radius: `4px`. Border: `1px solid #e5e5e5`. Padding: `16px`.
- Layout: 100×100 track artwork left, content right (title 16/700, "by Artist" 14/400, mini-waveform, action row Like/Repost/Share/More).
- Hover: shadow `0 2px 8px rgba(0,0,0,0.08)` fades in over 200ms.
**Track Page Card**
- Background: `#ffffff`. Color: `#333333`. Radius: `4px`. Border: `1px solid #e5e5e5`.
- Layout: large 240×240 artwork left, hero content right (title 24/700, artist 14/400, full 70px waveform, transport row, social-action row, description text).
- Comments well sits beneath, 760px wide.
**Profile Card**
- Background: `linear-gradient(180deg, var(--user-banner) 0%, #ffffff 280px)`.
- User-uploaded banner image (1240×260 typical) fades into white card content — bio, follower count, top tracks.
### Badges, Tags, Indicators
**PRO Tag**
- Background: `#ff5500`. Color: `#ffffff`. Radius: `2px`. Padding: `1px 4px`. Font: 10/700 uppercase.
- Use: Inline next to Pro creator names.
**GO+ Tag**
- Background: `#7711d4`. Color: `#ffffff`. Radius: `2px`. Padding: `1px 4px`.
- Use: Go+ subscriber-tier indicator.
**Verified**
- Color: `#0099ff`. Glyph: blue checkmark.
- Use: Inline next to verified-creator names.
**Play Count Chip**
- Background: `rgba(0,0,0,0.6)`. Color: `#ffffff`. Radius: `2px`. Padding: `1px 4px`. Font: 11/400 `tnum`.
- Use: Translucent black chip on track artwork showing "1.2K plays" or "245K listens".
**Like / Repost Counter**
- Inline 12/400 `#666666` count next to icon button. Uses shorthand (1.2K, 14M).
### Comments
**Comment Row (Comments Well)**
- Background: `#f7f7f7`. Color: `#333333`. Radius: `4px`. Padding: `8px 12px`.
- Layout: 32×32 avatar + username (12/700) + timestamp link (12/400 `#999999` "@2:14") + comment text (12/400) + Reply / Like.
**Comment (Anchored)**
- Avatar bubble (16×16) pinned to a waveform x-position at the timestamp. Hovering reveals the comment in a 240px-wide tooltip with the avatar + username + comment text.
**Comment Input**
- Background: `#ffffff`. Color: `#333333`. Radius: `3px`. Border: `1px solid #cccccc`. Height: `36px`. Padding: `8px 12px`.
- Placeholder: `#999999` "Write a comment".
- On focus from a waveform timestamp click, the placeholder updates to "Write a comment at 2:14".
### Inputs & Forms
**Text Input**
- Background: `#ffffff`. Color: `#333333`. Radius: `3px`. Border: `1px solid #cccccc`. Height: `28px`. Padding: `0 12px`.
- Focus: border `#ff5500`.
**Search Input (Top Bar)**
- Background: `#ffffff`. Color: `#333333`. Radius: `3px`. Border: `1px solid #cccccc`. Height: `28px`. Padding: `0 12px 0 32px`.
- Magnifier icon `#999999` left.
**Toggle Switch**
- Off: `#cccccc` track. On: `#ff5500` track.
- Knob: `#ffffff` 14×14 circle.
### Navigation
**Top Nav Bar**
- Background: `#ffffff`. Color: `#333333`. Height: `50px`. Border-bottom: `1px solid #e5e5e5`.
- Layout: orange wordmark left, Home / Stream / Library nav links, central search, right cluster: Upload / Try Pro / profile menu.
**Sidebar (Right Rail)**
- Background: transparent on `#f2f2f2`. Width: `230px`.
- Sections: "Following" (avatars + names), "Charts" (Top 50 / New & Hot), "Stations", "Trending Now".
### Player
**Mini Player Bar (Persistent Bottom)**
- Background: `#ffffff`. Color: `#333333`. Height: `50px`. Border-top: `1px solid #e5e5e5`.
- Layout: 32×32 thumb left, transport (back/play/forward) + scrubber + time labels centre, title + artist text, like / queue / volume / device right.
- Mini scrubber: `#cccccc` rail with `#ff5500` fill.
- Persists across all navigation; collapsing the player to background mute is a context-menu option.
### Modals & Toasts
**Modal Dialog**
- Background: `#ffffff`. Color: `#333333`. Radius: `6px`. Padding: `24px`.
- Shadow: `0 10px 30px rgba(0,0,0,0.2)`.
**Toast (Dark, Inverted)**
- Background: `#333333`. Color: `#ffffff`. Radius: `3px`. Padding: `12px 16px`.
- Use: "Liked", "Reposted", "Added to Likes", "Track URL copied". Dark inverted because the page is light — high-contrast confirmation.
## 5. Layout Principles
### Spacing System
- Base: 4px. Scale: 4 / 8 / 10 / 12 / 16 / 20 / 24 / 30 / 36 / 48 / 60 / 80 / 120.
- Note the 10/30/60 outliers — historic SoundCloud CSS uses `0.625rem` (10px) and `1.875rem` (30px) tokens not present in modern design systems.
- Card gap (between feed items): 16px.
- Section gap: 30px between major modules.
### Grid & Container
- Page width: 1240px max.
- Content centre column (Stream): 760px.
- Right rail: 230px sticky.
- Left margin: 250px reserved for top-nav alignment.
- Track page: 1100px max with 240px artwork + 760px content.
### Whitespace Philosophy
SoundCloud's whitespace is generous around cards but tight within them. Cards have 16px internal padding and 16–24px inter-card gaps; content within cards uses 8px gaps between metadata rows. The page reads as a publication — well-spaced, light, but information-dense.
### Section Cadence
Stream feed:
- Top nav (50px, persistent)
- "Stream" heading 24/700
- Filter pills (All / Reposts / Tracks / Albums)
- Feed items (5–7 above fold)
- Right-rail (Charts, Following, Stations, Trending Now) sticky alongside
Track page:
- Top nav (50px)
- Track artwork hero card (240×240 art + waveform + actions)
- Description text
- Comments well (vertical list of all comments, time-anchored sub-list)
- "Related tracks" rail
- Footer
There is light/dark alternation only on Pro/Premium feature bands — most of the product is light.
## 6. Shapes & Radius Scale
- **None** (`0px`): Waveform — flush peaks, no rounding.
- **Micro** (`2px`): Play-count badge, PRO/GO+ tags.
- **Standard** (`3px`): Buttons, inputs, feed cards — the workhorse radius. **3px not 4px** is distinctive — a small 1-pixel difference from the modern norm that signals SoundCloud's 2010s-era CSS lineage retained.
- **Comfortable** (`4px`): Card content area, input borders.
- **Relaxed** (`6px`): Modal corners.
- **Featured** (`8px`): Rare; some marketing-landing card variants.
- **Pill** (`9999px`): Filter pills, tag chips.
The 3px button radius is a quiet brand signal — most modern brands moved to 4px or 8px after 2018; SoundCloud retained 3px from the 2013 redesign and hasn't broken the convention. Designers who replicate the brand often default to 4px out of muscle memory; the brand-correct value is 3px.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 (flat) | No shadow, no border | Page background, default sidebar |
| 1 (hairline) | 1px `#e5e5e5` border | Card border, top-nav bottom border, divider |
| 2 (hover) | `0 2px 8px rgba(0,0,0,0.08)` | Card hover lift |
| 3 (modal) | `0 10px 30px rgba(0,0,0,0.2)` | Settings dialog, share dialog |
| 4 (popover) | `0 4px 12px rgba(0,0,0,0.15)` | Context menu, queue popover |
| 5 (toast) | dark `#333333` bg with no shadow | Confirmation toast |
### Shadow Philosophy
On a light `#f2f2f2` canvas, shadows must be low-opacity (`0.08–0.2`) and tightly contained — heavy shadows on a light canvas feel oppressive. SoundCloud uses borders rather than shadows as the primary depth signal: the 1px `#e5e5e5` card border is what separates content from canvas at rest, and the `0 2px 8px rgba(0,0,0,0.08)` hover-shadow is a soft addition, not a replacement. There is no brand-tinted shadow ever — orange is reserved for the brand. The dark inverted toast is SoundCloud's depth-via-contrast move: against a light page, a dark `#333333` toast reads with maximum salience.
## 8. Interaction & Motion
### Easing Curves
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — fades, opacity, simple slides.
- **Out**: `cubic-bezier(0, 0, 0.2, 1)` — incoming elements (toast slide-in, modal in).
- **Spring**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — like-heart pop, comment-marker bounce.
### Duration Buckets
- **Fast**: 100ms — colour shifts, hover-state colour transitions.
- **Standard**: 200ms — modal fade-in, toast slide-in.
- **Slow**: 300ms — page-route swap.
- **Waveform fill**: 60ms — incremental waveform-fill update tied to playhead position.
### Per-Component Recipes
- **Primary CTA hover**: Background `#ff5500 → #ff6e1f`, 100ms ease-standard.
- **Card hover**: shadow fade-in `0 → 0 2px 8px rgba(0,0,0,0.08)` over 200ms.
- **Like-heart pop**: Icon scales `1.0 → 1.3 → 1.0` with spring ease over 300ms; color flips outline → `#ff5500` filled at midpoint.
- **Repost-arrow rotation**: Rotates 180° on press over 300ms with spring ease.
- **Waveform progress fill**: Played-region orange edge advances frame-by-frame at 60fps tied to playhead. Time-label digits update on second boundaries.
- **Comment-marker bounce**: On hover-over a marker, avatar scales `1.0 → 1.2 → 1.0` over 200ms with spring ease + tooltip fade-in.
- **Modal in**: 200ms ease-out, scale `0.96 → 1.0` + opacity `0 → 1`.
- **Toast slide-in**: From below the player bar, slides up + opacity over 200ms; auto-dismiss after 2s.
### Page Transitions
SoundCloud's app is a single-page React surface. Page changes do NOT close the player — the mini player bar persists across all navigation and the currently-playing track keeps streaming. This is intentional: SoundCloud is a "background-listening" service first; visual navigation should never interrupt audio.
### Reduced Motion
`prefers-reduced-motion: reduce` collapses:
- Waveform progress fill → step-update on second boundaries instead of frame-by-frame.
- Like-heart pop → instant color swap.
- Comment-marker bounce → no scale on hover, tooltip still appears.
- Repost rotation → instant icon swap.
- Toast slide-in → opacity-only fade.
- Modal scale-in → opacity-only.
## 9. Accessibility & A11y
### Contrast Pairs
- Soft black `#333333` on canvas `#f2f2f2`: **12.6:1** — AAA at all sizes.
- Display strong `#1f1f1f` on canvas: **16.7:1** — AAA.
- Subdued `#666666` on canvas: **5.4:1** — AA at body sizes.
- Muted `#999999` on canvas: **2.85:1** — Fails. Used only for unplayed waveform decoration and timestamps where text is supplementary.
- White `#ffffff` on brand orange `#ff5500`: **3.5:1** — Fails AA at body sizes; passes AA only for ≥18px regular or ≥14px / 700 bold. SoundCloud uses 12px / 700 button labels, which scrapes through.
### Focus Indicators
- Default focus: `2px solid #ff5500` outline with `2px` offset on all interactive controls.
- On orange surfaces: focus uses `2px solid #ffffff`.
- Tab order: top nav left-to-right → main feed top-to-bottom → right-rail top-to-bottom → player bar.
### ARIA Patterns
- Waveform: `role="slider" aria-label="Track playback" aria-valuemin="0" aria-valuemax="[duration in seconds]" aria-valuenow="[current time]" aria-valuetext="2 minutes 14 seconds"`.
- Comment markers: `role="button" aria-label="Comment by [user] at 2:14"`.
- Player: `role="region" aria-label="Player"` with full keyboard shortcuts.
- Feed: `role="feed"` with `aria-busy` toggling during pagination.
- Modal: `role="dialog" aria-modal="true"` with focus trap.
### Keyboard Navigation
- Space: play/pause from any focus.
- L: like current track.
- R: repost current track.
- Arrow Left/Right: seek 5s.
- Arrow Up/Down: volume.
- M: mute.
- Tab: move through feed; Shift+Tab reverses.
- Enter: open focused track.
- ESC: close modal.
### Screen Reader Hints
- Feed items: `aria-label="[Track title] by [Artist]. [Play count] plays. Posted [time ago]."`
- Waveform `aria-valuetext` updates every second as playback advances.
- Comments well: `role="region" aria-label="Comments on [track]"`.
### Reduced Motion
Honoured. See §8.
## 10. Responsive Behavior
### Breakpoints
| Token | Min | Use |
|-------|-----|-----|
| mobile | 0px | Single column, right rail collapses below feed |
| tablet | 768px | Single column with right rail collapsed to drawer |
| desktop | 1024px | Two-column with sticky right rail |
| wide | 1240px | Max page width, full layout |
### Touch Targets
- 44×44 minimum on touch devices. Action-row icon buttons gain 16px hit-area padding on mobile.
- Waveform comment markers grow to 24×24 on touch devices for tap accuracy.
### Collapsing Strategy
- **Right rail**: Slides into a drawer at `< 1024px`.
- **Top nav**: Search collapses to icon-only at `< 768px`; nav links go into hamburger menu.
- **Player bar**: Condenses to track-thumb + play/pause + scrubber at narrow viewports.
- **Feed item**: Track artwork moves above title on mobile (column layout), waveform spans full width.
### Image Behavior
- Track artwork: 100w/240w/500w via `srcset`. Always 1:1 aspect.
- Profile banner: 1240×260 source, served as 480w/960w/1240w; 240px tall on mobile, 260px on desktop.
- Comment-marker avatars: 16w/32w (1x/2x).
### Container Queries
Used on the right-rail Charts widget — track-list rows condense to artist-name-only on narrow rail widths.
## 11. Content & Voice
### Tone
SoundCloud's voice is **creator-first, casual, and underground**. The brand grew from underground music communities — bedroom producers, mixtape rappers, podcasters — and the copy retains that DIY casualness. No "We believe...", no enterprise-pitch language. Pages address creators directly ("Upload your track", "Reach more listeners", "Connect with your fans").
### Microcopy Patterns
- **Primary CTA**: "Sign up", "Try Pro", "Upload", "Send" (in comment).
- **Social actions**: "Like", "Repost", "Share", "Add to Playlist", "Follow".
- **Confirmation toast**: "Liked", "Reposted", "Added to your Likes", "Track URL copied".
- **Empty Stream**: "Follow some people to get started" + suggested-creator carousel.
- **Empty Comments**: "Be the first to write a comment."
- **Upload progress**: "Encoding..." → "Processing..." → "Track is now ready to share."
- **Pro upsell**: "Reach more listeners with SoundCloud Pro."
- **Copyright takedown**: "This track has been removed due to a copyright claim. Learn more."
- **Geo-block**: "Sorry, this track is unavailable in your country."
### Empty States
- Empty Stream: redirects to "Discover" with suggested-creator carousel and "Follow some people to get started".
- Empty Likes: "Like some tracks to see them here."
- Empty Profile (no uploads): "Upload your first track" CTA prominent.
- Empty Search: recent searches + "Browse genres" tile grid.
### CTA Verb Conventions
- "Like" — toggle on/off, never "Save".
- "Repost" — re-share to your own followers, with optional caption.
- "Share" — outbound URL share.
- "Follow" — for users.
- "Add to Playlist" — explicit.
- "Buy" / "Download" — when creator allows; never "Purchase".
- "Pro" / "Try Pro" / "Upgrade to Pro" — paid tier upsell verbs.
## 12. Dark Mode & Theming
SoundCloud is **light-default**. The light paper-canvas metaphor has been preserved through every redesign since 2007. There is no dark-mode toggle in the consumer product.
A handful of marketing surfaces (the Pro / Pro Unlimited / SoundCloud for Artists landing pages) use dark `#333333` bands as feature wells — but these are out-of-product, intended to differentiate the paid-tier story from the free-tier consumer surface.
If theming were to be added (it has not, in 18+ years), the canvas would lift to `#1a1a1a`, brand orange would shift to `#ff7a3d` (lighter orange) to retain AA contrast on dark, and the waveform unplayed colour would lift to `#666666` for legibility on dark surfaces. But no public design has done this.
**Dark Pro Band Token Swap (out-of-product marketing only):**
- `bg`: `#f2f2f2` → `#333333`
- `surface`: `#ffffff` → `#444444`
- `text`: `#333333` → `#ffffff`
- `border`: `#e5e5e5` → `#444444`
- `brand`: `#ff5500` (unchanged — works on both)
## 13. Lineage & Influences
SoundCloud's visual lineage is two-streamed.
**Audio editing software (Audacity, Pro Tools, Logic).** The horizontal stereo waveform display was lifted directly from desktop audio editors — these tools rendered amplitude waveforms as the canonical visualisation of an audio file from the late 1990s onward. SoundCloud was the first consumer-web product to make the waveform interactive, scrubbable, and comment-able. The orange/grey played/unplayed convention is a direct adaptation of Pro Tools' selection-highlight metaphor.
**Web-2.0 social blogs (Tumblr, early Twitter).** The feed-item card with avatar + content + action row (Like/Repost/Share/Comment), and the time-anchored comment thread, are direct descendants of 2007–2010 social-blogging UIs. SoundCloud's "Repost" verb is a deliberate riff on Tumblr's "Reblog".
**Signage typography.** Interstate is a highway-signage typeface, and SoundCloud's choice in 2013 was deliberately anti-editorial — a workhorse type that wouldn't compete with creator track titles for attention. This contrasts sharply with Spotify (Circular, geometric-humanist) and Apple Music (SF Pro, optical-Apple-system). SoundCloud chose readability over expression.
What SoundCloud rejects: dark default, negative-tracked display, magazine-style typographic hierarchy, ornament. The brand is unfussy.
**Influences:**
- **Pro Tools / Audacity** — horizontal stereo waveform metaphor. https://www.avid.com/pro-tools
- **Tumblr** — feed card + reblog/repost mechanic ancestor. https://www.tumblr.com
- **Tobias Frere-Jones / Interstate (1993)** — display typography lineage. https://frerejones.com
- **Twitter (early)** — chronological feed and quote-share patterns.
- **Last.fm** — music-social precursor with track-comment culture.
## 14. Do's and Don'ts
**Do:**
- Use `#f2f2f2` paper canvas, not pure white — the warmth is brand signature.
- Reserve orange `#ff5500` for waveform-played, Play, Like (filled), wordmark, and comment markers.
- Render every track as a 70px-tall horizontal stereo waveform with orange-played + grey-unplayed + vertical playhead.
- Anchor comments to waveform timestamps as 16×16 avatar dots.
- Use Interstate at 700 weight with neutral 0em tracking — workhorse signage type, not editorial.
- Keep button radius at 3px — the legacy 2013 convention; designers default to 4px out of habit.
- Use `tnum` on waveform time labels, play counts, and durations.
- Persist the 50px mini player bar across all navigation — never tear down audio.
- Render confirmation toasts as dark `#333333` against the light page — inverted contrast for salience.
- Use `1px #e5e5e5` borders as the primary depth signal — shadows are secondary on light canvases.
- Honour `prefers-reduced-motion`: waveform fill becomes step-update, no like-heart pop, no comment bounce.
**Don't:**
- Don't apply negative tracking to display sizes — Interstate is wide and tightening cramps it.
- Don't use dark canvas as the default — SoundCloud is light-default in product.
- Don't put orange anywhere except sanctioned places (waveform, Play, Like, wordmark, comment markers).
- Don't use 4px button radius — the brand value is 3px. The 1-pixel difference is a brand signal.
- Don't replace the waveform with a generic linear scrubber — the waveform IS the brand.
- Don't render comments as a flat list — they must remain time-anchored to waveform timestamps.
- Don't use Interstate Italic — the cut exists but is essentially never used.
- Don't pad cards generously — feed-density is intentional.
- Don't tear down the player on navigation — audio continuity is sacred.
- Don't use heavy shadows on cards — light-canvas + light-shadow is the brand's depth philosophy.
- Don't pair Interstate with a serif display companion — single-family voice.
- Don't centre-align feed cards — left-aligned, always; right-rail is secondary metadata.
## 15. Agent Prompt Guide
### Quick Color Reference
- Canvas: `#f2f2f2`
- Card White: `#ffffff`
- Brand Orange: `#ff5500`
- Orange Hover: `#ff6e1f`
- Soft Black Text: `#333333`
- Subdued: `#666666`
- Muted: `#999999`
- Border: `#e5e5e5`
- Waveform Played: `#ff5500`
- Waveform Unplayed: `#999999`
### Example Component Prompts
1. "Create a SoundCloud-style waveform — 70px tall, horizontal stereo amplitude bars (top half + mirrored bottom half), played region left of playhead in orange `#ff5500`, unplayed region right in grey `#999999`, 1px-wide `#ff5500` vertical playhead line at current position, 11px / 700 `tnum` time labels '0:00' and '4:32' anchored at start and end."
2. "Design a SoundCloud feed item — `#ffffff` card with `1px solid #e5e5e5` border, 4px radius, 16px padding; 100×100 track artwork left, content right with title (16/700 `#333333`), 'by [Artist]' (14/400), 30px mini-waveform with comment markers, action row Like/Repost/Share/More with 12/700 counter labels in `#666666`."
3. "Build a SoundCloud comment marker — 16×16 circular avatar of the commenter pinned to a specific x-position on the waveform corresponding to the timestamp; on hover scales to 24×24 with spring ease over 200ms and reveals a tooltip above showing avatar + username + comment text (240px wide, dark `#333333` bg, white text, 12/400 body)."
4. "Render a SoundCloud Like button — 28×28 transparent icon button, default heart-outline in `#666666`, hover state `#333333`; on press flips to filled heart in brand orange `#ff5500` with a scale `1.0 → 1.3 → 1.0` spring-ease pop over 300ms; the count next to it updates in 12/400 `#666666` with 1.2K shorthand."
5. "Create a SoundCloud track-page hero — 240×240 artwork left, 76px-tall card right with title (24/700 `#333333`), 'by [Artist]' (14/400), full 70px waveform with comment markers, transport row, Like/Repost/Share/Add to Playlist/More action row, all on `#ffffff` card with `1px solid #e5e5e5` border and 4px radius."
6. "Build a SoundCloud bottom mini player — pinned 50px tall `#ffffff` strip across viewport bottom with `1px solid #e5e5e5` top border; 32×32 thumb left, transport (back/play/forward), mini scrubber (`#cccccc` rail with `#ff5500` fill) with `tnum` time labels, title + artist 14/400 `#333333`, like / queue / volume / device cluster right; persists across all navigation."
### Iteration Guide
1. **Don't tighten the tracking.** SoundCloud's display is 0em neutral — tightening it makes Interstate feel cramped.
2. **3px not 4px.** If buttons feel slightly off-brand, the radius is wrong — it's 3px, the legacy 2013 value.
3. **Waveform is the page.** If the track page feels generic, the waveform isn't dominant enough — make it 70px tall and full-width within the content column.
4. **Anchor the comments.** Comments aren't a flat list — they're time-stamped to the waveform. If they're shown as a list, the marker dots are missing.
5. **Light, not dark.** If the canvas feels off, swap to `#f2f2f2` paper grey — never pure white, never dark.
6. **Border, not shadow.** Cards separate from canvas via `1px #e5e5e5` border at rest. Shadows fade in only on hover.
7. **Ration the orange.** If orange is anywhere except waveform-played, Play, Like, wordmark, audit and remove.
8. **Toast goes dark.** If a confirmation toast looks invisible, it's the wrong contrast — the toast is `#333333` against the light page, not white-on-orange.
1. Visual Theme & Atmosphere
SoundCloud is the audio-social outlier — the only major streaming-music brand that has stayed light-default for nearly 20 years. The canvas is a paper-grey #f2f2f2 (a classic “off-white” warmer than #fff and more daylit than typical app greys), with cards floating above as #ffffff panels. This light-on-light layered architecture is rare in 2026 streaming and intentional: SoundCloud was born in 2007 as a creator’s-audio-portfolio tool, and the paper-canvas metaphor — “this is your demo upload, presented like a manuscript” — has been preserved through every redesign.
The signature is the Orange. #ff5500 is one of the most chromatically distinctive brand colours in tech — saturated, almost sunset, more red-orange than amber. It is rationed to: the wordmark, the played portion of every waveform, the playhead vertical line, the Play button, the Like-heart filled state, and the comment-anchor dots on the waveform timeline. Everywhere else is monochrome — soft black #333333, mid-grey #666666, light hairline #e5e5e5. The orange is wayfinding: wherever orange is, that is what you can play, like, or interact with.
The defining UI element is the horizontal waveform. Every track on SoundCloud renders as a 70px-tall stereo amplitude waveform — top half mirrored to the bottom half, pixels coloured according to playback state: orange #ff5500 for played, grey #999999 for unplayed, with a thin vertical orange line marking the current playhead position. Comments (which on SoundCloud are time-anchored to specific seconds in the track) appear as tiny avatar dots stuck to specific x-positions on the waveform. Hover any moment of a song and a tooltip shows the comment + commenter at that timestamp. This waveform-as-timeline-as-comment-thread is SoundCloud’s most-imitated and most-distinctive single contribution to UI design.
Interstate, the brand’s display sans (in use since 2013, replacing the older Trade Gothic), is a workhorse American-signage geometric. It runs heavy at the top (700 weight at 16–48px) and modest below (400, 12–14px). Tracking is neutral 0em — SoundCloud refuses the negative-tracked discipline of Spotify and Stripe, partly because Interstate’s letterforms are wider than Inter or Circular and partly because the brand’s lineage is signage, not editorial. Type is functional, not expressive.
Density is the third axis. The Stream feed (the “home” experience) renders 5–7 feed items above the fold on a 1024px display, each item a 760px-wide card with track artwork left + waveform + actions right. Each feed item carries the full waveform with comment markers, the Play/Like/Repost/Share/More action row, and a 2-line description. Below every card is the comments well — a vertically scrolling list of time-anchored comments. The page is information-dense but airy — cards are bordered (1px #e5e5e5) with no shadows at rest, separated by 16–24px gaps.
Key Characteristics:
- Light paper canvas
#f2f2f2with white#fffffffloating cards — light-default, rare in modern streaming. - Single voltage of brand orange
#ff5500reserved for waveform-played, Play, Like, wordmark, and comment markers. - The 70px-tall horizontal waveform is the defining UI element — orange/grey amplitude bars with vertical playhead line.
- Comments are time-anchored to waveform timestamps — avatar dots stick to seconds in the song.
- Interstate sans at 700 weight with neutral 0em tracking — workhorse American-signage geometric.
- Small 3px button radius — distinctive against modern 4–8px norms; signals legacy 2010s-era origin retained.
- Pinned 50px-tall bottom mini-player with mini-waveform scrubber persistent across navigation.
- Right-rail 230px sidebar with “Following / Charts / Stations / Trending Now”.
- Toast confirmations are dark
#333333against the light canvas — inverted contrast. - Light-default; some Pro/Premium pages use dark
#333333surfaces but they are out-of-product marketing.
2. Color Palette & Roles
Primary
- Paper Grey (
#f2f2f2): The defining canvas. Warmer than#fff, lighter than typical app greys — paper-portfolio metaphor from 2007 brand origin. - Card White (
#ffffff): Floating card surface above the paper canvas. - Soft Black (
#333333): Primary text. Not pure black — softer for long reading sessions. - SoundCloud Orange (
#ff5500): The brand’s defining hue. Wordmark, Play, Like, waveform-played, playhead, comment markers.
Brand & Light
- Orange Hover (
#ff6e1f): Marginally brighter on pointer-over. - Orange Active (
#cc4400): Pressed state. - Orange Deep (
#a83600): Archived gradient terminus, legacy promo. - Display Strong (
#1f1f1f): Display headlines that demand maximum contrast.
Accent
- Repost Green (
#5cd363): Repost-arrow accent + verified-success. - Verified Blue (
#0099ff): Verified creator checkmark. - Go+ Purple (
#7711d4): Go+ subscriber-tier badge. - Info Blue (
#3399ff): Informational link blue (rare in product).
Interactive
- CTA Orange (
#ff5500): Primary action. - Outline Neutral (
1px solid #ccccccon transparent): Secondary action. - Active Outline (
1px solid #ff5500+#ff5500bg): Pressed Following / Liked state. - Disabled (
#cccccctext on#f2f2f2bg): Non-interactive control.
Neutral Scale
- Display Strong (
#1f1f1f): Display headlines, profile names. - Primary Text (
#333333): Body, track titles, comment text. Soft black. - Subdued (
#666666): “by Artist” subtitle, secondary metadata. AA at body. - Muted (
#999999): Tertiary captions, timestamps, unplayed waveform. - Disabled (
#cccccc): Disabled menu items, focused-input border, scrubber rail. - Border Default (
#e5e5e5): Card border, top-nav bottom border, divider. - Border Soft (
#eeeeee): Lighter divider, table-row separator.
Surface & Borders
- Surface Card (
#ffffff): Default card. - Surface Strong (
#f7f7f7): Hovered surface, comments well. - Surface Soft (
#f8f8f8): Alt band on long-scroll feeds. - Surface Pro (
#333333): Dark Pro/Premium feature band — out-of-product marketing. - Border Strong (
#cccccc): Focused input outline.
Waveform Colors
- Played (
#ff5500): Orange amplitude bars left of playhead. - Unplayed (
#999999): Grey amplitude bars right of playhead. - Buffered (
#cccccc): Optional indicator for downloaded-but-unplayed (rare display). - Hover (
#ff8e62): Lighter orange on hover-over a waveform peak. - Playhead (
#ff5500): Vertical 1px orange line marking current playback position.
Shadow Colors
- Card Hover (
rgba(0,0,0,0.08)): Soft drop on card hover — light shadows on light canvas need low opacity. - Modal (
rgba(0,0,0,0.2)): Heavier under dialogs. - Popover (
rgba(0,0,0,0.15)): Mid-weight under context menus.
Semantic
- Success (
#5cd363): Verified, upload-success. - Warning (
#ffba00): Processing, encoding-in-progress. - Danger (
#cc0000): Error, copyright-takedown red. - Info (
#3399ff): Informational link.
3. Typography Rules
Font Family
- Primary:
"Interstate"— display-and-text family by Tobias Frere-Jones (1993). Adopted by SoundCloud in 2013, replacing Trade Gothic. Fallback chain:"Helvetica Neue", Helvetica, Arial, sans-serif. - Mono:
Menlo, Consolas, "Roboto Mono", SFMono-Regular, monospace— used in dev-doc surfaces, embed-code copy boxes, never in player. - OpenType Features:
tnumon the metadata row so play counts, durations, and timestamps align — particularly important on the waveform’s start/end time labels.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display XL | Interstate | 48px | 700 | 1.1 | -0.01em | — | Marketing landing hero |
| Display LG | Interstate | 32px | 700 | 1.15 | 0 | — | Profile page name |
| Display MD | Interstate | 24px | 700 | 1.2 | 0 | — | Track title in player |
| Display SM | Interstate | 20px | 700 | 1.3 | 0 | — | Section header “Tracks I’m following” |
| Title MD | Interstate | 16px | 700 | 1.3 | 0 | — | Track title in feed item |
| Title SM | Interstate | 14px | 700 | 1.3 | 0 | — | Sidebar nav label, button label |
| Subtitle | Interstate | 14px | 400 | 1.3 | 0 | — | “by Artist” beneath track title |
| Body MD | Interstate | 14px | 400 | 1.5 | 0 | — | Default body, modal text |
| Body SM | Interstate | 12px | 400 | 1.4 | 0 | — | Secondary metadata |
| Button MD | Interstate | 12px | 700 | 1.0 | 0 | — | Like / Repost / Share / Follow |
| Button LG | Interstate | 14px | 700 | 1.0 | 0 | — | Primary CTA |
| Caption | Interstate | 11px | 400 | 1.3 | 0 | — | Timestamps, fine print |
| Metadata | Interstate | 12px | 400 | 1.3 | 0 | tnum | Play count, duration |
| Waveform Time | Interstate | 11px | 700 | 1.0 | 0 | tnum | Time labels at start/end of waveform |
| Badge | Interstate | 10px | 700 | 1.0 | 0.04em | — | Uppercase “PRO”, “GO+”, “VERIFIED” |
| Nav Link | Interstate | 14px | 400 | 1.0 | 0 | — | Top nav, sidebar links |
| Comment Text | Interstate | 12px | 400 | 1.4 | 0 | — | Comment body anchored to waveform |
Principles
- Workhorse signage type, not editorial. Interstate is Tobias Frere-Jones’s American highway-signage geometric (1993) — wider letterforms than Helvetica or Inter. SoundCloud uses it because it scans at small sizes, not because it’s expressive.
- Neutral tracking, no negative. SoundCloud refuses tight-tracked display. 0em across all sizes. The wider Interstate letterforms already feel snug; tightening would cramp them.
- Tabular numerals on time and counts. Waveform time labels (0:00 / 4:32), play counts (1.2K listens), and durations all use
tnumso columns align in feed scrolling. - One family, no italics. Interstate ships italic and condensed cuts but they are essentially never used in product. Single roman, single voice.
- Display sizes stop at 700. No 900-weight black even at 48px display — SoundCloud’s loudest weight is 700, which keeps the typography quieter than Spotify or Wrapped-style streaming.
- Sentence case for everything. Section headers, modal titles, button labels — all “Tracks I’m following”, not “TRACKS I’M FOLLOWING”. Uppercase belongs only to small badges.
4. Component Stylings
Buttons
Primary (Orange Solid)
- Background:
#ff5500. Text:#ffffff. Radius:3px. Padding:0 12px. Height:28px. Font: Interstate 12px / 700. - Hover:
#ff6e1f. - Active:
#cc4400. - Use: “Sign up”, “Try Pro”, “Upload”, “Send” (in comment input).
Primary Large
- Background:
#ff5500. Text:#ffffff. Radius:3px. Padding:0 24px. Height:38px. Font: 14px / 700. - Use: Marketing landing CTA — slightly taller variant.
Outline (Neutral)
- Background:
transparent. Text:#333333. Border:1px solid #cccccc. Radius:3px. Padding:0 12px. Height:28px. Font: 12px / 700. - Hover: bg
#f7f7f7. - Use: Follow, Share, Repost, Edit. Outlined neutral, not orange.
Outline Active
- Background:
#ff5500. Color:#ffffff. Border:1px solid #ff5500. - Use: “Following” state (after pressing Follow), “Liked” state (after pressing Like).
Text
- Background:
transparent. Color:#333333. No border. Padding:0 8px. Height:28px. - Hover: text
#1f1f1f. - Use: Cancel, See All, Show More.
Icon (Default)
- Background:
transparent. Color:#666666. No border. Size:28 × 28. - Hover: color
#333333. - Use: Like, Repost, Share, More — feed-item action row.
Icon (Active)
- Color:
#ff5500. Glyph filled state. - Use: Liked / Reposted (post-press state).
Play Circle (Translucent Overlay)
- Background:
rgba(0,0,0,0.5). Color:#ffffff. Radius:50%. Size:50 × 50. - Use: Floating Play button overlaid on track artwork in feed item.
Play Circle (Solid Orange)
- Background:
#ff5500. Color:#ffffff. Radius:50%. Size:70 × 70. - Use: Big Play on track-page hero — paired with the artwork-flush waveform.
Waveform
Full Track Waveform
- Height:
70px. Background:transparent. - Top half: amplitude peaks pointing up. Bottom half: mirrored. Both halves coloured per playback state.
- Played region (left of playhead):
#ff5500orange. - Unplayed region (right):
#999999grey. - Playhead:
1px solid #ff5500vertical line. - Hover: 1px-wide vertical light-orange
#ff8e62highlight tracks the cursor with tooltip showing timestamp + comment if any.
Mini Waveform (Feed-Item)
- Height:
30px. Same colour conventions, smaller amplitude resolution. - Use: Inline waveform inside each feed-item card.
Comment Marker
- A 16×16 circular avatar of the commenter, anchored at the timestamp x-position on the waveform. On hover, expands and shows the comment text in a tooltip above.
- Use: Time-anchored comments — SoundCloud’s defining social mechanic.
Time Labels
- 11px / 700
#333333tnumdigits at the start (0:00) and end (4:32) of the waveform, anchored just below the bottom-half mirror.
Cards & Tiles
Feed Item
- Background:
#ffffff. Color:#333333. Radius:4px. Border:1px solid #e5e5e5. Padding:16px. - Layout: 100×100 track artwork left, content right (title 16/700, “by Artist” 14/400, mini-waveform, action row Like/Repost/Share/More).
- Hover: shadow
0 2px 8px rgba(0,0,0,0.08)fades in over 200ms.
Track Page Card
- Background:
#ffffff. Color:#333333. Radius:4px. Border:1px solid #e5e5e5. - Layout: large 240×240 artwork left, hero content right (title 24/700, artist 14/400, full 70px waveform, transport row, social-action row, description text).
- Comments well sits beneath, 760px wide.
Profile Card
- Background:
linear-gradient(180deg, var(--user-banner) 0%, #ffffff 280px). - User-uploaded banner image (1240×260 typical) fades into white card content — bio, follower count, top tracks.
Badges, Tags, Indicators
PRO Tag
- Background:
#ff5500. Color:#ffffff. Radius:2px. Padding:1px 4px. Font: 10/700 uppercase. - Use: Inline next to Pro creator names.
GO+ Tag
- Background:
#7711d4. Color:#ffffff. Radius:2px. Padding:1px 4px. - Use: Go+ subscriber-tier indicator.
Verified
- Color:
#0099ff. Glyph: blue checkmark. - Use: Inline next to verified-creator names.
Play Count Chip
- Background:
rgba(0,0,0,0.6). Color:#ffffff. Radius:2px. Padding:1px 4px. Font: 11/400tnum. - Use: Translucent black chip on track artwork showing “1.2K plays” or “245K listens”.
Like / Repost Counter
- Inline 12/400
#666666count next to icon button. Uses shorthand (1.2K, 14M).
Comments
Comment Row (Comments Well)
- Background:
#f7f7f7. Color:#333333. Radius:4px. Padding:8px 12px. - Layout: 32×32 avatar + username (12/700) + timestamp link (12/400
#999999“@2:14”) + comment text (12/400) + Reply / Like.
Comment (Anchored)
- Avatar bubble (16×16) pinned to a waveform x-position at the timestamp. Hovering reveals the comment in a 240px-wide tooltip with the avatar + username + comment text.
Comment Input
- Background:
#ffffff. Color:#333333. Radius:3px. Border:1px solid #cccccc. Height:36px. Padding:8px 12px. - Placeholder:
#999999“Write a comment”. - On focus from a waveform timestamp click, the placeholder updates to “Write a comment at 2:14”.
Inputs & Forms
Text Input
- Background:
#ffffff. Color:#333333. Radius:3px. Border:1px solid #cccccc. Height:28px. Padding:0 12px. - Focus: border
#ff5500.
Search Input (Top Bar)
- Background:
#ffffff. Color:#333333. Radius:3px. Border:1px solid #cccccc. Height:28px. Padding:0 12px 0 32px. - Magnifier icon
#999999left.
Toggle Switch
- Off:
#cccccctrack. On:#ff5500track. - Knob:
#ffffff14×14 circle.
Navigation
Top Nav Bar
- Background:
#ffffff. Color:#333333. Height:50px. Border-bottom:1px solid #e5e5e5. - Layout: orange wordmark left, Home / Stream / Library nav links, central search, right cluster: Upload / Try Pro / profile menu.
Sidebar (Right Rail)
- Background: transparent on
#f2f2f2. Width:230px. - Sections: “Following” (avatars + names), “Charts” (Top 50 / New & Hot), “Stations”, “Trending Now”.
Player
Mini Player Bar (Persistent Bottom)
- Background:
#ffffff. Color:#333333. Height:50px. Border-top:1px solid #e5e5e5. - Layout: 32×32 thumb left, transport (back/play/forward) + scrubber + time labels centre, title + artist text, like / queue / volume / device right.
- Mini scrubber:
#ccccccrail with#ff5500fill. - Persists across all navigation; collapsing the player to background mute is a context-menu option.
Modals & Toasts
Modal Dialog
- Background:
#ffffff. Color:#333333. Radius:6px. Padding:24px. - Shadow:
0 10px 30px rgba(0,0,0,0.2).
Toast (Dark, Inverted)
- Background:
#333333. Color:#ffffff. Radius:3px. Padding:12px 16px. - Use: “Liked”, “Reposted”, “Added to Likes”, “Track URL copied”. Dark inverted because the page is light — high-contrast confirmation.
5. Layout Principles
Spacing System
- Base: 4px. Scale: 4 / 8 / 10 / 12 / 16 / 20 / 24 / 30 / 36 / 48 / 60 / 80 / 120.
- Note the 10/30/60 outliers — historic SoundCloud CSS uses
0.625rem(10px) and1.875rem(30px) tokens not present in modern design systems. - Card gap (between feed items): 16px.
- Section gap: 30px between major modules.
Grid & Container
- Page width: 1240px max.
- Content centre column (Stream): 760px.
- Right rail: 230px sticky.
- Left margin: 250px reserved for top-nav alignment.
- Track page: 1100px max with 240px artwork + 760px content.
Whitespace Philosophy
SoundCloud’s whitespace is generous around cards but tight within them. Cards have 16px internal padding and 16–24px inter-card gaps; content within cards uses 8px gaps between metadata rows. The page reads as a publication — well-spaced, light, but information-dense.
Section Cadence
Stream feed:
- Top nav (50px, persistent)
- “Stream” heading 24/700
- Filter pills (All / Reposts / Tracks / Albums)
- Feed items (5–7 above fold)
- Right-rail (Charts, Following, Stations, Trending Now) sticky alongside
Track page:
- Top nav (50px)
- Track artwork hero card (240×240 art + waveform + actions)
- Description text
- Comments well (vertical list of all comments, time-anchored sub-list)
- “Related tracks” rail
- Footer
There is light/dark alternation only on Pro/Premium feature bands — most of the product is light.
6. Shapes & Radius Scale
- None (
0px): Waveform — flush peaks, no rounding. - Micro (
2px): Play-count badge, PRO/GO+ tags. - Standard (
3px): Buttons, inputs, feed cards — the workhorse radius. 3px not 4px is distinctive — a small 1-pixel difference from the modern norm that signals SoundCloud’s 2010s-era CSS lineage retained. - Comfortable (
4px): Card content area, input borders. - Relaxed (
6px): Modal corners. - Featured (
8px): Rare; some marketing-landing card variants. - Pill (
9999px): Filter pills, tag chips.
The 3px button radius is a quiet brand signal — most modern brands moved to 4px or 8px after 2018; SoundCloud retained 3px from the 2013 redesign and hasn’t broken the convention. Designers who replicate the brand often default to 4px out of muscle memory; the brand-correct value is 3px.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Page background, default sidebar |
| 1 (hairline) | 1px #e5e5e5 border | Card border, top-nav bottom border, divider |
| 2 (hover) | 0 2px 8px rgba(0,0,0,0.08) | Card hover lift |
| 3 (modal) | 0 10px 30px rgba(0,0,0,0.2) | Settings dialog, share dialog |
| 4 (popover) | 0 4px 12px rgba(0,0,0,0.15) | Context menu, queue popover |
| 5 (toast) | dark #333333 bg with no shadow | Confirmation toast |
Shadow Philosophy
On a light #f2f2f2 canvas, shadows must be low-opacity (0.08–0.2) and tightly contained — heavy shadows on a light canvas feel oppressive. SoundCloud uses borders rather than shadows as the primary depth signal: the 1px #e5e5e5 card border is what separates content from canvas at rest, and the 0 2px 8px rgba(0,0,0,0.08) hover-shadow is a soft addition, not a replacement. There is no brand-tinted shadow ever — orange is reserved for the brand. The dark inverted toast is SoundCloud’s depth-via-contrast move: against a light page, a dark #333333 toast reads with maximum salience.
8. Interaction & Motion
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— fades, opacity, simple slides. - Out:
cubic-bezier(0, 0, 0.2, 1)— incoming elements (toast slide-in, modal in). - Spring:
cubic-bezier(0.34, 1.56, 0.64, 1)— like-heart pop, comment-marker bounce.
Duration Buckets
- Fast: 100ms — colour shifts, hover-state colour transitions.
- Standard: 200ms — modal fade-in, toast slide-in.
- Slow: 300ms — page-route swap.
- Waveform fill: 60ms — incremental waveform-fill update tied to playhead position.
Per-Component Recipes
- Primary CTA hover: Background
#ff5500 → #ff6e1f, 100ms ease-standard. - Card hover: shadow fade-in
0 → 0 2px 8px rgba(0,0,0,0.08)over 200ms. - Like-heart pop: Icon scales
1.0 → 1.3 → 1.0with spring ease over 300ms; color flips outline →#ff5500filled at midpoint. - Repost-arrow rotation: Rotates 180° on press over 300ms with spring ease.
- Waveform progress fill: Played-region orange edge advances frame-by-frame at 60fps tied to playhead. Time-label digits update on second boundaries.
- Comment-marker bounce: On hover-over a marker, avatar scales
1.0 → 1.2 → 1.0over 200ms with spring ease + tooltip fade-in. - Modal in: 200ms ease-out, scale
0.96 → 1.0+ opacity0 → 1. - Toast slide-in: From below the player bar, slides up + opacity over 200ms; auto-dismiss after 2s.
Page Transitions
SoundCloud’s app is a single-page React surface. Page changes do NOT close the player — the mini player bar persists across all navigation and the currently-playing track keeps streaming. This is intentional: SoundCloud is a “background-listening” service first; visual navigation should never interrupt audio.
Reduced Motion
prefers-reduced-motion: reduce collapses:
- Waveform progress fill → step-update on second boundaries instead of frame-by-frame.
- Like-heart pop → instant color swap.
- Comment-marker bounce → no scale on hover, tooltip still appears.
- Repost rotation → instant icon swap.
- Toast slide-in → opacity-only fade.
- Modal scale-in → opacity-only.
9. Accessibility & A11y
Contrast Pairs
- Soft black
#333333on canvas#f2f2f2: 12.6:1 — AAA at all sizes. - Display strong
#1f1f1fon canvas: 16.7:1 — AAA. - Subdued
#666666on canvas: 5.4:1 — AA at body sizes. - Muted
#999999on canvas: 2.85:1 — Fails. Used only for unplayed waveform decoration and timestamps where text is supplementary. - White
#ffffffon brand orange#ff5500: 3.5:1 — Fails AA at body sizes; passes AA only for ≥18px regular or ≥14px / 700 bold. SoundCloud uses 12px / 700 button labels, which scrapes through.
Focus Indicators
- Default focus:
2px solid #ff5500outline with2pxoffset on all interactive controls. - On orange surfaces: focus uses
2px solid #ffffff. - Tab order: top nav left-to-right → main feed top-to-bottom → right-rail top-to-bottom → player bar.
ARIA Patterns
- Waveform:
role="slider" aria-label="Track playback" aria-valuemin="0" aria-valuemax="[duration in seconds]" aria-valuenow="[current time]" aria-valuetext="2 minutes 14 seconds". - Comment markers:
role="button" aria-label="Comment by [user] at 2:14". - Player:
role="region" aria-label="Player"with full keyboard shortcuts. - Feed:
role="feed"witharia-busytoggling during pagination. - Modal:
role="dialog" aria-modal="true"with focus trap.
Keyboard Navigation
- Space: play/pause from any focus.
- L: like current track.
- R: repost current track.
- Arrow Left/Right: seek 5s.
- Arrow Up/Down: volume.
- M: mute.
- Tab: move through feed; Shift+Tab reverses.
- Enter: open focused track.
- ESC: close modal.
Screen Reader Hints
- Feed items:
aria-label="[Track title] by [Artist]. [Play count] plays. Posted [time ago]." - Waveform
aria-valuetextupdates every second as playback advances. - Comments well:
role="region" aria-label="Comments on [track]".
Reduced Motion
Honoured. See §8.
10. Responsive Behavior
Breakpoints
| Token | Min | Use |
|---|---|---|
| mobile | 0px | Single column, right rail collapses below feed |
| tablet | 768px | Single column with right rail collapsed to drawer |
| desktop | 1024px | Two-column with sticky right rail |
| wide | 1240px | Max page width, full layout |
Touch Targets
- 44×44 minimum on touch devices. Action-row icon buttons gain 16px hit-area padding on mobile.
- Waveform comment markers grow to 24×24 on touch devices for tap accuracy.
Collapsing Strategy
- Right rail: Slides into a drawer at
< 1024px. - Top nav: Search collapses to icon-only at
< 768px; nav links go into hamburger menu. - Player bar: Condenses to track-thumb + play/pause + scrubber at narrow viewports.
- Feed item: Track artwork moves above title on mobile (column layout), waveform spans full width.
Image Behavior
- Track artwork: 100w/240w/500w via
srcset. Always 1:1 aspect. - Profile banner: 1240×260 source, served as 480w/960w/1240w; 240px tall on mobile, 260px on desktop.
- Comment-marker avatars: 16w/32w (1x/2x).
Container Queries
Used on the right-rail Charts widget — track-list rows condense to artist-name-only on narrow rail widths.
11. Content & Voice
Tone
SoundCloud’s voice is creator-first, casual, and underground. The brand grew from underground music communities — bedroom producers, mixtape rappers, podcasters — and the copy retains that DIY casualness. No “We believe…”, no enterprise-pitch language. Pages address creators directly (“Upload your track”, “Reach more listeners”, “Connect with your fans”).
Microcopy Patterns
- Primary CTA: “Sign up”, “Try Pro”, “Upload”, “Send” (in comment).
- Social actions: “Like”, “Repost”, “Share”, “Add to Playlist”, “Follow”.
- Confirmation toast: “Liked”, “Reposted”, “Added to your Likes”, “Track URL copied”.
- Empty Stream: “Follow some people to get started” + suggested-creator carousel.
- Empty Comments: “Be the first to write a comment.”
- Upload progress: “Encoding…” → “Processing…” → “Track is now ready to share.”
- Pro upsell: “Reach more listeners with SoundCloud Pro.”
- Copyright takedown: “This track has been removed due to a copyright claim. Learn more.”
- Geo-block: “Sorry, this track is unavailable in your country.”
Empty States
- Empty Stream: redirects to “Discover” with suggested-creator carousel and “Follow some people to get started”.
- Empty Likes: “Like some tracks to see them here.”
- Empty Profile (no uploads): “Upload your first track” CTA prominent.
- Empty Search: recent searches + “Browse genres” tile grid.
CTA Verb Conventions
- “Like” — toggle on/off, never “Save”.
- “Repost” — re-share to your own followers, with optional caption.
- “Share” — outbound URL share.
- “Follow” — for users.
- “Add to Playlist” — explicit.
- “Buy” / “Download” — when creator allows; never “Purchase”.
- “Pro” / “Try Pro” / “Upgrade to Pro” — paid tier upsell verbs.
12. Dark Mode & Theming
SoundCloud is light-default. The light paper-canvas metaphor has been preserved through every redesign since 2007. There is no dark-mode toggle in the consumer product.
A handful of marketing surfaces (the Pro / Pro Unlimited / SoundCloud for Artists landing pages) use dark #333333 bands as feature wells — but these are out-of-product, intended to differentiate the paid-tier story from the free-tier consumer surface.
If theming were to be added (it has not, in 18+ years), the canvas would lift to #1a1a1a, brand orange would shift to #ff7a3d (lighter orange) to retain AA contrast on dark, and the waveform unplayed colour would lift to #666666 for legibility on dark surfaces. But no public design has done this.
Dark Pro Band Token Swap (out-of-product marketing only):
bg:#f2f2f2→#333333surface:#ffffff→#444444text:#333333→#ffffffborder:#e5e5e5→#444444brand:#ff5500(unchanged — works on both)
13. Lineage & Influences
SoundCloud’s visual lineage is two-streamed.
Audio editing software (Audacity, Pro Tools, Logic). The horizontal stereo waveform display was lifted directly from desktop audio editors — these tools rendered amplitude waveforms as the canonical visualisation of an audio file from the late 1990s onward. SoundCloud was the first consumer-web product to make the waveform interactive, scrubbable, and comment-able. The orange/grey played/unplayed convention is a direct adaptation of Pro Tools’ selection-highlight metaphor.
Web-2.0 social blogs (Tumblr, early Twitter). The feed-item card with avatar + content + action row (Like/Repost/Share/Comment), and the time-anchored comment thread, are direct descendants of 2007–2010 social-blogging UIs. SoundCloud’s “Repost” verb is a deliberate riff on Tumblr’s “Reblog”.
Signage typography. Interstate is a highway-signage typeface, and SoundCloud’s choice in 2013 was deliberately anti-editorial — a workhorse type that wouldn’t compete with creator track titles for attention. This contrasts sharply with Spotify (Circular, geometric-humanist) and Apple Music (SF Pro, optical-Apple-system). SoundCloud chose readability over expression.
What SoundCloud rejects: dark default, negative-tracked display, magazine-style typographic hierarchy, ornament. The brand is unfussy.
Influences:
- Pro Tools / Audacity — horizontal stereo waveform metaphor. https://www.avid.com/pro-tools
- Tumblr — feed card + reblog/repost mechanic ancestor. https://www.tumblr.com
- Tobias Frere-Jones / Interstate (1993) — display typography lineage. https://frerejones.com
- Twitter (early) — chronological feed and quote-share patterns.
- Last.fm — music-social precursor with track-comment culture.
14. Do’s and Don’ts
Do:
- Use
#f2f2f2paper canvas, not pure white — the warmth is brand signature. - Reserve orange
#ff5500for waveform-played, Play, Like (filled), wordmark, and comment markers. - Render every track as a 70px-tall horizontal stereo waveform with orange-played + grey-unplayed + vertical playhead.
- Anchor comments to waveform timestamps as 16×16 avatar dots.
- Use Interstate at 700 weight with neutral 0em tracking — workhorse signage type, not editorial.
- Keep button radius at 3px — the legacy 2013 convention; designers default to 4px out of habit.
- Use
tnumon waveform time labels, play counts, and durations. - Persist the 50px mini player bar across all navigation — never tear down audio.
- Render confirmation toasts as dark
#333333against the light page — inverted contrast for salience. - Use
1px #e5e5e5borders as the primary depth signal — shadows are secondary on light canvases. - Honour
prefers-reduced-motion: waveform fill becomes step-update, no like-heart pop, no comment bounce.
Don’t:
- Don’t apply negative tracking to display sizes — Interstate is wide and tightening cramps it.
- Don’t use dark canvas as the default — SoundCloud is light-default in product.
- Don’t put orange anywhere except sanctioned places (waveform, Play, Like, wordmark, comment markers).
- Don’t use 4px button radius — the brand value is 3px. The 1-pixel difference is a brand signal.
- Don’t replace the waveform with a generic linear scrubber — the waveform IS the brand.
- Don’t render comments as a flat list — they must remain time-anchored to waveform timestamps.
- Don’t use Interstate Italic — the cut exists but is essentially never used.
- Don’t pad cards generously — feed-density is intentional.
- Don’t tear down the player on navigation — audio continuity is sacred.
- Don’t use heavy shadows on cards — light-canvas + light-shadow is the brand’s depth philosophy.
- Don’t pair Interstate with a serif display companion — single-family voice.
- Don’t centre-align feed cards — left-aligned, always; right-rail is secondary metadata.
15. Agent Prompt Guide
Quick Color Reference
- Canvas:
#f2f2f2 - Card White:
#ffffff - Brand Orange:
#ff5500 - Orange Hover:
#ff6e1f - Soft Black Text:
#333333 - Subdued:
#666666 - Muted:
#999999 - Border:
#e5e5e5 - Waveform Played:
#ff5500 - Waveform Unplayed:
#999999
Example Component Prompts
- “Create a SoundCloud-style waveform — 70px tall, horizontal stereo amplitude bars (top half + mirrored bottom half), played region left of playhead in orange
#ff5500, unplayed region right in grey#999999, 1px-wide#ff5500vertical playhead line at current position, 11px / 700tnumtime labels ‘0:00’ and ‘4:32’ anchored at start and end.” - “Design a SoundCloud feed item —
#ffffffcard with1px solid #e5e5e5border, 4px radius, 16px padding; 100×100 track artwork left, content right with title (16/700#333333), ‘by [Artist]’ (14/400), 30px mini-waveform with comment markers, action row Like/Repost/Share/More with 12/700 counter labels in#666666.” - “Build a SoundCloud comment marker — 16×16 circular avatar of the commenter pinned to a specific x-position on the waveform corresponding to the timestamp; on hover scales to 24×24 with spring ease over 200ms and reveals a tooltip above showing avatar + username + comment text (240px wide, dark
#333333bg, white text, 12/400 body).” - “Render a SoundCloud Like button — 28×28 transparent icon button, default heart-outline in
#666666, hover state#333333; on press flips to filled heart in brand orange#ff5500with a scale1.0 → 1.3 → 1.0spring-ease pop over 300ms; the count next to it updates in 12/400#666666with 1.2K shorthand.” - “Create a SoundCloud track-page hero — 240×240 artwork left, 76px-tall card right with title (24/700
#333333), ‘by [Artist]’ (14/400), full 70px waveform with comment markers, transport row, Like/Repost/Share/Add to Playlist/More action row, all on#ffffffcard with1px solid #e5e5e5border and 4px radius.” - “Build a SoundCloud bottom mini player — pinned 50px tall
#ffffffstrip across viewport bottom with1px solid #e5e5e5top border; 32×32 thumb left, transport (back/play/forward), mini scrubber (#ccccccrail with#ff5500fill) withtnumtime labels, title + artist 14/400#333333, like / queue / volume / device cluster right; persists across all navigation.”
Iteration Guide
- Don’t tighten the tracking. SoundCloud’s display is 0em neutral — tightening it makes Interstate feel cramped.
- 3px not 4px. If buttons feel slightly off-brand, the radius is wrong — it’s 3px, the legacy 2013 value.
- Waveform is the page. If the track page feels generic, the waveform isn’t dominant enough — make it 70px tall and full-width within the content column.
- Anchor the comments. Comments aren’t a flat list — they’re time-stamped to the waveform. If they’re shown as a list, the marker dots are missing.
- Light, not dark. If the canvas feels off, swap to
#f2f2f2paper grey — never pure white, never dark. - Border, not shadow. Cards separate from canvas via
1px #e5e5e5border at rest. Shadows fade in only on hover. - Ration the orange. If orange is anywhere except waveform-played, Play, Like, wordmark, audit and remove.
- Toast goes dark. If a confirmation toast looks invisible, it’s the wrong contrast — the toast is
#333333against the light page, not white-on-orange.
Drop soundcloud into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add soundcloud 2 · ship landing page
npx agentkit init --design soundcloud dark bold
Spotify
Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical stre…
Docs
Install
Spotify
webdesignhot
dark sans
Suno
A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a…
Docs
Install
Suno
webdesignhot
dark sans
Threads
Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a qui…
Docs
Install
Threads
webdesignhot