--- version: alpha name: "Tidal" website: "https://tidal.com" description: >- The Hi-Fi music streaming service whose marketing chrome is the most monochrome in the streaming category — a pure black canvas (#000000), white wordmark with the trident emblem above the letterforms, and no chromatic brand accent. Where Spotify reaches for Spotify Green and Apple Music throws a radial gradient under the headline, Tidal lets the page floor stay pitch black and trusts album-art photography to carry every chromatic moment below the fold. Type runs Tidal's custom sans across display and body tiers at modest 400–500 weights, with uppercase letter-spaced labels reading as audio-equipment markings rather than streaming-product chrome. The system reads as audiophile equipment rather than consumer software. seo: title: "Tidal Design System for React — pure black on white wordmark, custom sans, 13 components" metaDescription: "Tidal's marketing system as a DESIGN.md file. Pure black canvas with white type, no chromatic brand accent, custom sans display, uppercase letterspaced labels, 13 components. For React, Next.js, and AI tools." highlights: - "Album art as voltage — the marketing chrome carries zero color, every chromatic moment comes from cover thumbnails below the fold" - "Pure black floor — the canvas sits at true #000000, not the slightly-blue near-black Linear and Vercel use" - "Wordmark with trident — the brand identity is the four-prong trident emblem stacked above letter-spaced TIDAL letterforms in white" - "Uppercase letter-spaced labels — every section header reads as audio-equipment marking rather than streaming chrome" - "Album-cover-led editorial grid — the discovery surface uses square thumbnails on the black floor with no card border or shadow" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://tidal.com" title: "Tidal — official site" description: "Tidal's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Tidal's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Tidal use, and what should I use as a substitute?" answer: "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." - id: "canvas-color" title: "Why does Tidal use pure black instead of a softer near-black?" answer: "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." - id: "trident-mark" title: "What is the Tidal trident, and how does it sit on the page?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own music or media product?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: ink: "#ffffff" ink-muted: "#a0a0a0" hairline: "#2a2a2a" surface-1: "#141414" canvas: "#000000" typography: wordmark: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 28px letterSpacing: "4px" display-xl: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 60px letterSpacing: "-1px" display-md: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 36px letterSpacing: "-0.5px" heading-md: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px letterSpacing: "1.75px" label-sm: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 500 lineHeight: 14px letterSpacing: "1.5px" nav-link: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: "0.5px" button-md: fontFamily: "\"Tidal Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: "1px" rounded: none: "0px" sm: "2px" md: "4px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 32px" height: "72px" wordmark-block: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.wordmark}" padding: "0px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "8px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" padding: "0px" section-kicker: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "0px 0px 8px" cover-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0px" card-dark: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "24px" borderColor: "{colors.hairline}" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "0px 24px" height: "48px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "0px 24px" height: "48px" borderColor: "{colors.ink}" text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "12px 16px" height: "44px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 32px" --- ## Overview Tidal's marketing chrome is the most monochrome surface in the streaming category. **Audiophile equipment register.** The canvas is pure black (`{colors.canvas}` — #000000), the ink is pure white (`{colors.ink}` — #ffffff), and there is no chromatic brand voltage anywhere above the fold — no green like Spotify, no radial red gradient like Apple Music, no orange-pink bleed like Soundcloud. The Tidal trident, four white prongs stacked above a horizontally letter-spaced TIDAL wordmark, is the entire above-fold identity. Where the rest of the streaming category leans on a chromatic brand color to signal warmth and consumer-product reach, Tidal commits to the chassis-of-a-DAC restraint — flat anodized black with white silkscreen, no decorative gradient, no atmospheric tint. The color set is intentionally tight. Five tokens cover the system: pure black canvas, pure white ink, a single muted text tier (`{colors.ink-muted}`) for secondary metadata, one elevated surface (`{colors.surface-1}` — a near-black charcoal lifted off the canvas by ~8% lightness) for cards and cover tiles, and one hairline (`{colors.hairline}` — a 16% gray) for dividing rules and input outlines. There is no second hairline, no warm-tone surface, no secondary accent. Every chromatic moment on the page comes from album-art photography rendered at full color inside hairline-edged or borderless cover tiles. The brand chrome carries none. Typography splits across a single family — Tidal's custom sans — at modest 400–500 weights with no 700+ tier. The wordmark sits at the loudest letter-spacing in the system (4px tracking on a 24px setting) so the TIDAL letterforms read as engraved silkscreen rather than as a typeset word. Display headings stay at weight 500 at 32–56px; body runs at 14–16px in weight 400; and every section kicker uses an uppercase letter-spaced label tier (12px / 500 with 1.75px tracking) that reads as audio-equipment marking. The radius scale collapses to near-zero (0–4px hard corners, plus a full-circle option for the in-app play button), keeping the geometry chassis-flat throughout. **Key Characteristics:** - Pure black canvas (`{colors.canvas}` — #000000), not the slightly-blue near-black Linear and Vercel use — maximum contrast with album-art photography is the design. - White wordmark with the four-prong trident emblem stacked above letter-spaced TIDAL letterforms — the brand identity is monochrome and figurative. - No chromatic brand accent — the marketing chrome carries zero color, every chromatic moment comes from album-art thumbnails. - Custom Tidal Sans across every typographic tier at modest 400–500 weights — no 700+ moment. - Uppercase letter-spaced labels (12px / 500 / 1.75px tracking) as the universal section-header tier — reading as audio-equipment marking rather than streaming chrome. - Hard-edge geometry: 0–4px corners on every button and card surface; the in-app circular play button is the only fully-rounded element. - Album-cover tiles render edge-to-edge inside the grid with no card border, no shadow, no hover lift — the photography carries every visual weight. - Single elevated surface tone (`{colors.surface-1}` — #141414) lifted off the pure-black floor by ~8% lightness rather than by a shadow layer. ## Colors ### Surface - **Canvas** (`{colors.canvas}` — #000000): pure black, the page floor and the dominant captured color (the live render captured one color, and this was it). Maximum contrast with album-art photography is intentional — softening the canvas to a near-black would compromise the audiophile-equipment register. - **Surface 1** (`{colors.surface-1}` — #141414): the single elevated dark tone, lifted off the canvas by ~8% lightness rather than by a shadow layer. Used on the dark editorial card, the cover-tile background fill where an album thumbnail is loading, and the text-input field. ### Text - **Ink** (`{colors.ink}` — #ffffff): pure white, the dominant text color across the system — every display heading, body paragraph, nav link, section kicker, and the wordmark itself. Pure white on pure black, no muted variant for body copy. - **Ink Muted** (`{colors.ink-muted}` — #a0a0a0): the single muted text tone, used for secondary metadata under cover tiles (release year, artist name, track count), footer caption copy, and disabled affordances. There is no second muted tier. ### Hairline - **Hairline** (`{colors.hairline}` — #2a2a2a): the only border tone in the system — a 16% gray that survives on the pure-black canvas as a barely-visible dividing rule. Used on the editorial card outline, the text-input field outline, and the section dividers between editorial bands. Since the canvas is pure black, a higher-lightness border would feel decorative rather than structural; the 16% gray sits at the threshold of visibility. ## Typography ### Font Family The system runs **Tidal Sans** — a custom proprietary sans-serif — across every typographic tier. Fallbacks walk `"Helvetica Neue", Helvetica, Arial, sans-serif`. There is no separate display family, no serif tier, no script accent — one family does the work of wordmark, display, heading, body, label, and nav. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.wordmark}` | 24px | 500 | 28px | 4px | The TIDAL wordmark — the engraved-silkscreen treatment | | `{typography.display-xl}` | 56px | 500 | 60px | -1px | Hero h1 ("Discovery built for sound") | | `{typography.display-md}` | 32px | 500 | 36px | -0.5px | Section h2 ("New releases", "Editorial picks") | | `{typography.heading-md}` | 20px | 500 | 24px | 0 | Sub-section title, editorial card headline | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text, paragraph body | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Cover-tile caption, metadata row | | `{typography.label-md}` | 12px | 500 | 16px | 1.75px | Section kicker, uppercase header label | | `{typography.label-sm}` | 11px | 500 | 14px | 1.5px | Genre tag, badge label | | `{typography.nav-link}` | 14px | 500 | 20px | 0.5px | Top-nav link label | | `{typography.button-md}` | 14px | 500 | 20px | 1px | Primary and secondary button label | ### Principles Display weight tops out at 500. The hero h1 at 56px / 500 is the loudest typographic moment — deliberately measured so the wordmark's letter-spaced TIDAL stays as visually charged as the headline. Body and metadata share weight 400. The 500-weight tier with positive letter-spacing carries every uppercase label moment in the system; there is no separate bold tier and no italic. The wordmark's 4px letter-spacing on a 24px setting is the system's typographic signature. The widening reads as silkscreen engraving on a hardware chassis rather than as a typeset word, locking the brand into the audiophile-equipment register the rest of the system reaches for. ### Note on Font Substitutes Tidal Sans is proprietary. **Inter** at the same weights covers the body, heading, and nav tiers; **Geist** at weight 500 is closer in feel for the wordmark's tight cap height. To reproduce the wordmark, set TIDAL in uppercase Inter Medium at 24px with +0.17em letter-spacing — the proportions transfer cleanly. The fallback stack already walks `"Helvetica Neue", Helvetica, Arial, sans-serif`, so a Helvetica-rendering OS will read close to the captured page out of the box. ## Layout ### Spacing System - **Base unit:** 8px — the dominant module on the page. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Section padding (vertical):** ~80px on the hero band; the album-cover-led editorial bands tighten to 48px gaps between rows. - **Card internal padding:** `{spacing.lg}` (24px) on the dark editorial card; 0 on the cover-tile (the artwork fills the tile edge-to-edge). - **Top-nav padding:** `{spacing.base}` (16px) vertical, `{spacing.xl}` (32px) horizontal. ### Grid & Container - **Max content width:** ~1280px on the editorial grid; ~960px on the centered hero column. - **Hero block:** centered single-column composition with the wordmark + headline + sub-paragraph + CTA cluster, all flush-centered against the pure-black canvas. No background imagery — the canvas stays empty. - **Editorial grid:** multi-column album-cover grid (typically 5 or 6 columns at desktop), each tile a square cover thumbnail with a `{typography.body-sm}` caption beneath. Tiles render edge-to-edge with no border and no shadow. - **Footer:** full-width muted-gray text band at 48x32 padding — no surface contrast against the canvas. ### Rhythm The page alternates between **centered hero stillness** and **dense cover-art density**. The hero band carries one sentence, one CTA, and the trident wordmark — empty space does the work elsewhere a hero image would. Below the fold the rhythm tightens into the cover-art grid, where every row stacks 5–6 square thumbnails with minimal gap. There is no atmospheric gradient between bands; every section terminates on the same pure-black floor, and depth comes from `{colors.surface-1}` cards lifted off the canvas rather than from background-color shifts. ## Elevation The system has **essentially no shadow tier**. The pure-black canvas swallows traditional drop shadows — there is nothing for a shadow to sit against — so hierarchy comes entirely from tonal lift instead. - **Flat (no shadow):** hero, editorial grid, cover tiles, footer — every brand surface. - **Tonal lift:** `{colors.surface-1}` (#141414) cards sit on `{colors.canvas}` (#000000) — an ~8-point lightness gap that reads as elevation without any shadow being drawn. - **Hairline outlines:** `{colors.hairline}` (#2a2a2a) marks the dark-card border, the input field outline, and the dividing rules between editorial bands. The 16% gray is the only border tone that survives on pure black without disappearing or feeling decorative. - **No hover lift:** cover tiles carry no `:hover` shadow state on the captured surface. Hover affordance comes from a subtle scale or a play-button overlay rather than from elevation. ## Shapes The radius scale is **hard-edged**. Most surfaces sit at 0–4px corners, with a single fully-rounded option reserved for the circular play button in the in-app surface. - `{rounded.none}` 0px — the dominant radius. The hero CTA, the secondary button, the cover tiles, the top-nav surface, and the section headers all sit at hard right angles. - `{rounded.sm}` 2px — text inputs and a small set of badge surfaces where a hairline rounding softens the edge without breaking the chassis-flat register. - `{rounded.md}` 4px — the dark editorial card outline; the only place a meaningfully-rounded surface appears in the marketing chrome. - `{rounded.full}` 9999px — the in-app circular play button. Not present on the marketing surface itself; reserved for the product editor. There is no 8px, 12px, or 16px middle tier. The hard-edge geometry is the audiophile-equipment register — softening the corners would tip the system toward a consumer-product warmth the brand does not want. ## Components **`top-nav`** — Pure black `{colors.canvas}` surface, 72px height, 16x32 padding, hard corners, no bottom border. The trident wordmark sits flush left or centered (depending on breakpoint), product links inset, account links flush right. **`wordmark-block`** — Transparent fill, white text in `{typography.wordmark}` (24px / 500 / 4px tracking). The four-prong trident emblem stacks above the letter-spaced TIDAL letterforms; both render in pure white. **`nav-link`** — Transparent background, white text in `{typography.nav-link}` (14px / 500 / 0.5px tracking), 8x16 padding. Hover affordance lifts to a faint `{colors.surface-1}` background pill rather than a chromatic accent. **`hero-heading`** — White text on the transparent hero, `{typography.display-xl}` (56px / 500 / -1px tracking). 0 padding — the headline sits centered in the empty hero band with no background imagery. **`section-heading`** — White text, `{typography.display-md}` (32px / 500 / -0.5px tracking). Used as the h2 above each editorial band ("New releases", "Editorial picks", "Mixes for you"). **`body-paragraph`** — Default white text at `{typography.body-md}` (16px / 400). The hero sub-paragraph and the editorial-card body. **`body-paragraph-muted`** — `{colors.ink-muted}` (#a0a0a0) text at `{typography.body-md}` for secondary metadata, footer caption copy, and disabled affordances. **`section-kicker`** — Uppercase `{typography.label-md}` (12px / 500 / 1.75px tracking) in white. The kicker above each section heading — reads as audio-equipment label rather than streaming chrome. **`cover-tile`** — `{colors.surface-1}` background fill (visible while the album-art image is loading), hard corners (`{rounded.none}`), 0 padding. The artwork fills the tile edge-to-edge with no border and no shadow. **`card-dark`** — `{colors.surface-1}` fill, white text, `{rounded.md}` 4px radius, 24px internal padding, 1px `{colors.hairline}` border. The default editorial card on the dark canvas. **`button-primary`** — White `{colors.ink}` fill, black `{colors.canvas}` text, `{typography.button-md}` (14px / 500 / 1px tracking), hard corners (`{rounded.none}`), 0x24 padding, 48px height. The "Try Free" / "Start Listening" CTA in the hero — the inverted contrast (white on black) is the loudest signal on the page. **`button-secondary`** — Transparent fill, white text, 1px white border, hard corners, 48px height. Used for "Learn More" tertiary CTAs. **`text-input`** — `{colors.surface-1}` fill, white text, `{rounded.sm}` 2px outline in `{colors.hairline}`, 12x16 padding, 44px height. The search / email field. **`footer`** — Pure black canvas, `{colors.ink-muted}` (#a0a0a0) text in `{typography.body-sm}`, 48x32 padding. No surface contrast against the page floor — the footer just continues the canvas. ## Do's and Don'ts **Do** keep the canvas at pure `{colors.canvas}` (#000000). Softening it to a slightly-blue near-black would compromise the audiophile-equipment register and make album-art photography read as flat tiles rather than as gallery objects. **Do** use `{colors.surface-1}` (#141414) — never a shadow — to lift cards off the pure-black canvas. The ~8% lightness gap reads as elevation; on pure black, drop shadows have nothing to sit against and feel decorative. **Do** keep the wordmark at the full 4px letter-spacing on the TIDAL letterforms. The widening is what makes the wordmark read as engraved silkscreen rather than as a typeset word; tightening it to 1–2px loses the chassis-flat brand register. **Do** render every uppercase section kicker in `{typography.label-md}` (12px / 500 / 1.75px tracking). The system has no second small-caps tier; reaching for an italic or a styled caps tracks outside the family discipline. **Don't** introduce a chromatic brand accent (a Spotify-green play button, an Apple-Music-red gradient, a SoundCloud-orange bar). The marketing chrome carries zero color by design — adding one would dilute the album-art photography that is supposed to carry every chromatic moment. **Don't** swap the hero CTA from white-on-black to a colored fill. The inverted contrast (`{colors.ink}` background on `{colors.canvas}` text) is the loudest signal on the page; a colored CTA would compete with the album-art grid below the fold. **Don't** add a card shadow under the cover tiles. The captured grid has no `box-shadow` on any tile; introducing one would make the page read like a Spotify-style streaming surface rather than the audiophile-equipment register Tidal is reaching for. **Don't** introduce a middle radius tier (8 / 12 / 16px). The system runs at 0 / 2 / 4px hard-edged corners; adding a softer rounding would tip the geometry toward consumer-product warmth the brand does not want. ## Known Gaps - **Bot-block limited extraction:** the captured screenshot returned a Cloudflare "You have been blocked" challenge page rather than the live marketing surface, and the extracted color set captured only the page canvas (#000000). Several tokens in this file are documented from the public brand surface — the trident wordmark, the album-art editorial grid, the white-on-black CTA — rather than from a live token render. Treat the spec as a brand-language reference rather than a token-precise extract. - **Dark mode:** the captured surface is dark-only by definition. Tidal has no documented light variant of the marketing chrome. - **Hover and focus states:** the captured surface did not expose any state matrix. Focus rings, hover lifts, active-press tints, and disabled states live in the live application and product surfaces. - **Form input error states:** the search / email field carries only the resting state; error and validation styling are not captured. - **Motion:** cover-tile hover animations and the in-app play-button transitions live in the live runtime; the spec captures end-state values only. - **Product surfaces:** this DESIGN.md captures the marketing surface only. The Tidal player application (`listen.tidal.com`) carries a much richer token system — sidebar layout, queue panel, lyrics overlay, audio-quality badges (Master, HiFi Plus, Atmos), the now-playing dock — that is not represented here. - **HiFi Plus badge palette:** the audio-quality tier badges (HiFi, HiFi Plus, Master, Dolby Atmos) carry their own narrow color set in the product application and are not exposed on the captured marketing surface.