What is Tidal's primary brand color?

Tidal does not have a chromatic brand accent. The captured marketing chrome runs on a pure black canvas (#000000) with a white wordmark and white display type — no green, blue, red, or gradient surface anywhere above the fold. Where Spotify reserves Spotify Green for the play button and the brand wordmark, and Apple Music reaches for a radial red-to-magenta wash, Tidal lets the chrome stay monochrome and trusts album-art photography below the fold to carry every chromatic moment. The four-prong trident emblem stacked above the letter-spaced TIDAL wordmark is the entire above-fold visual identity.

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

Tidal runs a custom sans across the marketing surface — a tight grotesk-style face with measured letter spacing on the wordmark and the uppercase section labels. Display headings sit at large editorial sizes in modest 500-weight rather than the heavy 700+ a streaming product would typically reach for; body and metadata run at 14–16px in weight 400. Uppercase labels carry wide letter-spacing (roughly 1.5–2px) to read as audio-equipment markings rather than streaming chrome. The closest open-source substitutes are Inter or Geist at the same weights; for the wordmark's specific letter-spacing the substitute renders close at +0.15em tracking on the uppercase TIDAL setting.

Why does Tidal use pure black instead of a softer near-black?

The canvas is pure #000000, deliberately. Where Linear and Vercel use a slightly-blue near-black (#0a0a0f / #0a0a0a) to soften the contrast with white text, Tidal keeps the canvas at true black because the album-art thumbnails below the fold need maximum contrast to read as gallery objects rather than as flat tiles. The premium-positioning move is the same one a high-end DAC chassis makes — flat anodized black with white silkscreen — and softening the canvas would compromise the audiophile-equipment register the brand is reaching for. The text-on-canvas contrast is uncompromising.

What is the Tidal trident, and how does it sit on the page?

The Tidal brand mark is a four-prong trident emblem rendered in pure white, stacked above a horizontally letter-spaced TIDAL wordmark in matching white. The trident has the silhouette of an inverted square wave — four equal vertical strokes connected by a horizontal baseline — reading simultaneously as a stylized water trident and as an audio waveform. On the marketing surface the mark sits centered in the top-nav at modest size, and the same emblem (without the wordmark) functions as the favicon and app icon. There is no horizontal or single-color variant — the trident is always stacked above the letterforms, always white on black.

Can I use this DESIGN.md to build my own music or media product?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Tidal's specific moves: pure black canvas with white type, no chromatic brand accent, album-cover-led editorial grids with no card border or shadow, uppercase letter-spaced labels as the universal section-header tier, and hard-edged geometry across buttons and surfaces. You can reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat noted in the Known Gaps section: the captured render was bot-blocked, so several tokens in this file are documented from the public brand surface rather than extracted from a live render. Use with awareness.

Tidal Design System

Tidal's marketing system as a DESIGN.md file.

About Tidal DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source tidal.com

Music, Video & Streaming

Tidal's marketing chrome is the most monochrome surface in the streaming category. The canvas is pure black, the wordmark is white, and there is no chromatic brand accent anywhere on the page — no green like Spotify, no radial red gradient like Apple Music, no pink-purple bleed like Soundcloud. The Tidal trident, four white prongs stacked above a horizontally letter-spaced TIDAL wordmark, is the entire visual identity above the fold. Below the fold the page returns to album-cover-led editorial grids where the artwork carries every chromatic moment and the brand chrome stays out of the way. The system reads as audiophile equipment rather than consumer software — the same restraint a high-end DAC or amplifier chassis carries, transposed onto a web surface.

The DESIGN.md file packages the tokens for React tooling. Inside: a tight color set anchored on the pure black canvas captured in extraction, a white ink tier, and a graded white-on-black ladder for muted text and hairlines; a typography tier for the wordmark, the editorial display headings, and the uppercase letter-spaced label moments that mark section headers; a near-zero radius scale (the brand geometry favors hard right angles and circular cover-art chips); and thirteen component definitions covering the trident wordmark surface, the dark editorial card, the white-on-black CTA button, the uppercase section kicker, and the persistent dark top-nav.

Feed this file to Claude, Cursor, or any agent that reads structured design tokens and it will reproduce Tidal's specific moves: pure black canvas instead of a softer near-black, white wordmark with no chromatic brand voltage, album-cover thumbnails as the only chromatic moment, and uppercase letter-spaced labels as the universal section-header tier. The one move worth borrowing for any premium-positioning streaming or media product: starve the brand chrome of color so the catalog content does the entire chromatic job. Most teams add a brand accent the moment they have one to spare; Tidal's discipline is the choice not to.

What makes it distinct

Album art as voltagethe marketing chrome carries zero color, every chromatic moment comes from cover thumbnails below the fold
Pure black floorthe canvas sits at true #000000, not the slightly-blue near-black Linear and Vercel use
Wordmark with tridentthe brand identity is the four-prong trident emblem stacked above letter-spaced TIDAL letterforms in white
Uppercase letter-spaced labelsevery section header reads as audio-equipment marking rather than streaming chrome
Album-cover-led editorial gridthe discovery surface uses square thumbnails on the black floor with no card border or shadow

Live at tidal.com

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

tidal.com

Explore Tidal

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Tidal design system FAQ

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

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

Browse all design systems

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

Tidal — official site

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

The DESIGN.md specification

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