TIDAL DESIGN.md

1. Visual Theme & Atmosphere

TIDAL's iOS app is the most austere player in music streaming, and that austerity is the brand. The canvas is pure black (#000000) — not the softened "not-quite-black" of competitors, but true OLED black that makes album art appear to float in a void. Surfaces step up only barely (#0A0A0A, #1A1A1A), so the interface reads as a single dark sheet with content punched into it. The visual philosophy is editorial and gallery-like: square album tiles, generous negative space, monochrome chrome, and a refusal to decorate. TIDAL positions itself as the audiophile's service, and the UI behaves like high-end audio hardware — matte black, minimal indicators, nothing superfluous.

The accent system is two-tone and deliberate. White (#FFFFFF) is the primary actionable color — the play button, primary CTAs, active states. The single chromatic accent is HiFi cyan (#00FFFF), reserved almost exclusively for quality-tier signaling: the "Master", "HiFi", and "Max" badges that indicate lossless and hi-res audio. When you see cyan in TIDAL, it means fidelity — it is the visual language of the product's core differentiator. A pressed cyan (#00CCCC) handles tap-down on the rare cyan controls. There is no third color. Secondary text sits in a cool gray (#9A9A9A).

Typography is a geometric sans — TIDAL's brand favors a clean, slightly mechanical grotesque (Space Grotesk is the closest free analog; the system font is the production fallback). Weights stay at 400 / 600 / 700. The type is confident and tightly tracked at display sizes, neutral at body. There are no playful flourishes. The most expressive typographic moment is the now-playing full-bleed screen, where the track title sits large (24-28pt) over a darkened crop of the album art with a quality badge pinned beside it.

Key Characteristics:

• Pure black canvas (#000000) — true OLED black, not softened
• White as the primary action color; HiFi cyan (#00FFFF) reserved for quality-tier badges
• Quality badges (Master / HiFi / Max) as the signature element — fidelity made visible
• Square album tiles in a gallery-like, high-negative-space grid
• Full-bleed now-playing screen with a darkened album-art backdrop
• Geometric sans typography (Space Grotesk analog), weights 400/600/700
• Mix rows and editorial shelves — "My Mix", "Suggested New Tracks"
• Dark-only — there is no light mode; the void is the brand

2. Color Palette & Roles

Primary

• TIDAL White (#FFFFFF): Primary action color — play button, primary CTAs, active tab, active toggles, primary text.
• HiFi Cyan (#00FFFF): The single accent — Master / HiFi / Max quality badges, lossless emphasis, the rare highlighted control.
• Cyan Pressed (#00CCCC): Tap-down state for cyan controls.

Canvas & Surfaces

• Canvas Black (#000000): Primary canvas — true OLED black, the entire app background.
• Surface 1 (#0A0A0A): Cards, list rows, search field — barely lifted off black.
• Surface 2 (#1A1A1A): Sheets, modals, pressed rows, elevated panels.
• Divider (#262626): Hairline dividers between list rows and sections.

Text

• Text Primary (#FFFFFF): Track titles, screen headlines, primary UI text.
• Text Secondary (#9A9A9A): Artist names, durations, metadata, section subtitles.
• Text Tertiary (#5C5C5C): Disabled state, very low-emphasis labels.

Semantic

• Quality Cyan (#00FFFF): Master / HiFi / Max badge text and outline.
• Favorite White (#FFFFFF): Heart filled when a track is favorited (white, not cyan — cyan is fidelity-only).
• Now-Playing Backdrop: A darkened, blurred crop of the current album art layered under rgba(0,0,0,0.6) so foreground text stays legible.
• Error Red (#FF453A): Playback errors, connection-lost states.

Light Mode

TIDAL's iOS app is dark-only by design. There is no light variant — the pure-black void is the brand's identity and the optimal surface for album-art presentation and OLED power efficiency.

3. Typography Rules

Font Family

• Primary: TIDAL's brand geometric sans (a clean mechanical grotesque)
• Web / System Fallback: Space Grotesk — the closest free geometric grotesque
• Production Fallback: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Numerics: Tabular figures for durations and track numbers so scrubber digits don't shift

Hierarchy

Principles

• Weights concentrated at 400 / 600 / 700: Regular, semibold, bold — no thin, no black
• Tight tracking on display type (-0.2 to -0.4pt on titles); body sits at 0pt
• Quality badges are uppercase with +1.0pt tracking — the mechanical, technical voice
• Tabular numerals on durations and track numbers
• Dynamic Type respected on titles, artists, body; quality badges, timestamps, tab labels stay fixed

4. Component Stylings

Buttons

Primary Play Button (Now Playing)

• Shape: Circle, diameter 64pt (56pt on compact headers)
• Background: #FFFFFF
• Icon: SF Symbol play.fill / pause.fill in #000000, 26pt
• Pressed: scale 0.93, background #E5E5E5, with .impactOccurred(.medium) haptic
• Shadow: none (TIDAL is flat — the white circle on black is contrast enough)

Primary Pill (Play / Follow)

• Background: #FFFFFF
• Text: #000000
• Padding: 11pt vertical, 32pt horizontal
• Corner radius: 500pt (full pill)
• Font: Space Grotesk 15pt weight 700, +0.3pt tracking
• Pressed: #E5E5E5, scale 0.97

Outline Pill ("Following" / "In My Collection")

• Background: transparent
• Text: #FFFFFF
• Border: 1pt solid #9A9A9A
• Padding: 11pt vertical, 24pt horizontal
• Corner radius: 500pt
• Font: Space Grotesk 14pt weight 600
• Pressed: border #FFFFFF

Icon Actions (Favorite, Shuffle, Repeat, Add, Share, More)

• Size: 22pt glyph, 44pt hit area
• Default: #9A9A9A
• Active: #FFFFFF (favorited, shuffle on, repeat on) — never cyan; cyan is fidelity-only
• Spacing: 28pt between icons in the now-playing action row

Text Button ("See all", "More")

• Font: Space Grotesk 14pt weight 700
• Color: #9A9A9A
• No underline, 44pt hit area

Cards & Containers

Album / Mix Tile (Horizontal shelf)

• Width: 150pt
• Aspect: 1:1 square art, 0pt corner radius (TIDAL keeps art square — no softening)
• Gap between tiles: 16pt
• Structure: art → quality badge overlay (top-left of art if Master/Max) → title (15pt 600, 2-line clamp) → subtitle (12pt 400 #9A9A9A)
• Tap: scale 0.97 with light haptic

Track Row

• Height: 60pt
• Layout: 44pt × 44pt square album thumbnail (0pt radius) → stacked title (16pt 600) + artist (14pt 400 #9A9A9A) → trailing quality badge (if hi-res) + duration (11pt 600 #9A9A9A, tabular) + 20pt ellipsis
• Background: canvas #000000; pressed: #1A1A1A
• Currently-playing row: title turns #FFFFFF bold, a small white equalizer animates left of the thumbnail

Now Playing (Full Screen)

• Full-bleed darkened crop of the album art as the backdrop, rgba(0,0,0,0.6) scrim
• Centered square album art ~320pt × 320pt, 0pt corner radius, no shadow (flat — the void provides separation)
• Below art: track title (24pt 700) + a cyan quality badge inline + artist (14pt 400 #9A9A9A)
• Scrubber: 2pt track #5C5C5C, #FFFFFF fill, 14pt circular white thumb
• Transport row: shuffle · previous · 64pt white Play · next · repeat
• Action bar: favorite · add to collection · credits · share · more

Quality Detail Sheet

• Bottom sheet, 14pt top corner radius, surface #1A1A1A
• Lists the streamed format ("FLAC 24-bit / 96 kHz") with a large cyan quality badge at the top
• Cyan is used here for the badge and the active "Max" selection only

Navigation

Bottom Tab Bar

• Height: 52pt + safe area
• Background: rgba(0,0,0,0.96) with .regularMaterial blur (reads near-opaque on black)
• Tabs: Home, Videos, Search, My Collection
• Icon size: 24pt
• Active color: #FFFFFF; inactive: #9A9A9A
• Labels: Space Grotesk 10pt weight 600, shown always
• Active icon: filled SF Symbol variant; inactive: outlined

Now Playing Mini Bar

• Sits directly above the tab bar, full width, 52pt tall
• Background: #1A1A1A
• Left: 40pt square art (0pt radius); center: title 14pt 600 + artist 11pt 400 #9A9A9A; a small cyan quality badge trails the title if hi-res
• Right: play.fill / pause.fill 20pt
• A 1pt #FFFFFF progress hairline pinned to the very top edge of the mini bar
• Tap: expands to full-bleed Now Playing with a shared-element transition

Top Nav (Profile / Home Entry)

• Height: 44pt + safe area
• Avatar (28pt circular) top-left, screen title centered (22pt 700), settings/cast top-right
• Filter chips row below on My Collection (32pt height pills)

Input Fields

Search Bar

• Background: #1A1A1A
• Height: 40pt
• Corner radius: 500pt (full pill)
• Leading SF Symbol magnifyingglass, 18pt, #9A9A9A
• Placeholder: "Artists, tracks, playlists…", 16pt 400 #9A9A9A
• Focus: no border change, cursor white
• Text in field: #FFFFFF

Filter Chip

• Background: #1A1A1A default / #FFFFFF selected
• Text: #FFFFFF default / #000000 selected
• Padding: 8pt vertical, 18pt horizontal
• Corner radius: 500pt (full pill)
• Font: Space Grotesk 14pt weight 600
• Examples: "All", "Albums", "Tracks", "Playlists", "Videos"

Distinctive Components

Quality-Tier Badge

• A small pill or bracket-framed label: MASTER, HIFI, MAX, DOLBY ATMOS
• Text: #00FFFF (cyan), 10pt 700, +1.0pt tracking, uppercase
• Style: 1pt cyan hairline border, transparent fill, ~4pt corner radius, 4pt vertical / 8pt horizontal padding
• Appears: on track rows (trailing), on album tiles (overlaid top-left of art), inline beside the now-playing title, and in the quality detail sheet
• This is TIDAL's signature visual — fidelity is the product, so the badge is everywhere fidelity exists

Full-Bleed Now Playing Backdrop

• The current album art is cropped to fill, heavily darkened (rgba(0,0,0,0.6)) and slightly blurred behind the foreground
• The crisp square album art sits centered on top — a "picture within the picture"
• No color extraction (unlike competitors) — TIDAL keeps the backdrop monochrome-dark for editorial restraint

My Mix Row (Editorial Shelf)

• Section eyebrow (11pt 700 upper #9A9A9A) + title (22pt 700 white)
• Horizontal scroll of square tiles; Mix tiles often carry a subtle generated-gradient cover with the mix name overlaid
• Ends with a peek-edge tile to signal scroll

Equalizer (Currently Playing)

• 3-bar animated equalizer to the left of the playing track's thumbnail
• Bar width 3pt, gap 2pt, color #FFFFFF (white, not cyan)
• Freezes when paused

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 56, 64
• Standard margin: 16pt horizontal, 24pt between shelves
• Track row internal padding: 8pt vertical, 16pt horizontal

Grid & Container

• Content width: full device width with 16pt horizontal margins
• Horizontal shelves: 16pt left inset, last tile peeks at the right edge
• Collection grid: 2-column square grid, 16pt gap (more air than competitors)

Whitespace Philosophy

• Gallery-like negative space: TIDAL deliberately gives content room — fewer items per screen than rivals, more black around each
• Square integrity: album art is never rounded — the square is part of the editorial, hardware-like aesthetic
• The void separates: with no shadows, the pure-black canvas itself is the separation between elements

Border Radius Scale

• Square (0pt): ALL album art, tiles, thumbnails — TIDAL's signature
• Badge (4pt): quality badges
• Comfortable (14pt): bottom sheets, modals
• Full Pill (500pt): primary CTAs, filter chips, search bar
• Circle (50%): play button, avatars, tab icons

6. Depth & Elevation

Shadow Philosophy: TIDAL is radically flat. On a pure-black canvas, shadows are invisible anyway, so the design abandons them entirely and communicates hierarchy through tonal steps (#000000 → #0A0A0A → #1A1A1A). The single exception is the bottom-sheet shadow, which uses an 80%-opacity dark blur to lift the sheet off the void. No element — not even the centered Now Playing album art — casts a shadow. The flatness is the premium, hardware-inspired aesthetic.

Motion

• Crossfade transitions: screen and now-playing transitions use a minimal opacity crossfade (no slide, no bounce) — editorial restraint
• Play button tap: scale 0.93 → 1.0 spring (damping 0.75), .impactOccurred(.medium) haptic
• Scrubber drag: 1pt → 3pt track-height grow while scrubbing, light haptic tick
• Equalizer bars: continuous white vertical scale animation tied to playback
• Mini-bar → Full player: shared-element 0.3s crossfade, album art is the anchor (fades, does not spring)
• Favorite tap: heart fill + subtle scale 1.0 → 1.12 → 1.0 over 260ms

7. Do's and Don'ts

Do

• Use pure black #000000 as the canvas — true OLED black, the brand identity
• Reserve HiFi cyan (#00FFFF) exclusively for quality-tier badges and lossless emphasis
• Make quality badges (Master / HiFi / Max) visible everywhere fidelity exists — it is the signature
• Keep album art perfectly square — 0pt corner radius, always
• Use white for all actions and active states — play, favorite, active tab
• Communicate elevation with tonal steps (#0A0A0A, #1A1A1A), not shadows
• Use a geometric sans (Space Grotesk fallback) at weights 400/600/700
• Use crossfade transitions — minimal, editorial, no spring or slide
• Give content gallery-like negative space — fewer items, more void

Don't

• Don't soften the canvas to #121212 — TIDAL is pure #000000
• Don't use cyan for play buttons, favorites, or active tabs — cyan means fidelity only
• Don't round album art — the square is the editorial signature
• Don't add drop shadows — the flat void is the premium aesthetic (sheets excepted)
• Don't extract color from album art for backdrops — keep the now-playing backdrop monochrome-dark
• Don't add a second accent color — white + cyan is the entire system
• Don't use thin or black font weights
• Don't animate with bounce or slide — crossfade only
• Don't crowd the grid — TIDAL's negative space is intentional

8. Responsive Behavior

Device Sizes

Dynamic Type

• Track titles, artist names, body, section headers: full scale
• Quality badges: fixed 10pt (never scales — the badge geometry is exact)
• Scrubber timestamps: fixed 11pt
• Play button: icon size fixed (26pt)
• Tab labels: fixed 10pt

Orientation

• Home / Videos / Search / My Collection: portrait-locked
• Now Playing: portrait-locked
• Video content: rotates to landscape (TIDAL hosts music videos and live sets)

Touch Targets

• Play button: 64pt — unmissable
• Track rows: 60pt height, full-row tappable
• Quality badge: visual 10pt, but tappable 44pt area (opens quality detail sheet)
• Action icons: 22pt glyph, 44pt hit area
• Tab icons: 24pt glyph, 44pt effective hit

Safe Area Handling

• Top: safe area honored on nav (Dynamic Island clears the title)
• Bottom: mini-bar floats above tab bar; both respect the home indicator
• Sides: 16pt content insets

9. Agent Prompt Guide

Quick Color Reference

• Canvas: #000000 (pure black — not #121212)
• Surface 1 (cards): #0A0A0A
• Surface 2 (sheets): #1A1A1A
• Divider: #262626
• Text primary: #FFFFFF
• Text secondary: #9A9A9A
• Text tertiary: #5C5C5C
• TIDAL White (action): #FFFFFF
• HiFi Cyan (quality only): #00FFFF
• Cyan pressed: #00CCCC
• Error red: #FF453A

Example Component Prompts

• "Create a SwiftUI TIDAL track row: 60pt height, 44×44pt square album art (0pt corner radius — never rounded) leading, stacked title 'Black Skinhead' in Space Grotesk 16pt weight 600 #FFFFFF + artist 'Kanye West' in 14pt weight 400 #9A9A9A. Trailing: a cyan 'MASTER' quality badge (10pt 700, 1pt #00FFFF border, transparent fill, +1pt tracking), then duration '3:08' in 11pt weight 600 #9A9A9A tabular, then a 20pt ellipsis. Pressed background #1A1A1A."
• "Build the TIDAL Now Playing play button: 64pt circular button, #FFFFFF background, SF Symbol 'play.fill' 26pt in #000000, NO shadow (TIDAL is flat). Pressed: scale 0.93 with medium haptic, background #E5E5E5."
• "Design the TIDAL full-bleed Now Playing screen: backdrop is the album art cropped to fill, blurred and darkened under rgba(0,0,0,0.6). A crisp 320×320pt square album art (0pt radius, no shadow) centered on top. Below: track title 24pt weight 700 #FFFFFF with an inline cyan 'MAX' quality badge, artist 14pt weight 400 #9A9A9A. Scrubber: 2pt #5C5C5C track, #FFFFFF fill, 14pt white thumb. Canvas pure #000000."
• "Create a TIDAL quality-tier badge: text 'HIFI' in Space Grotesk 10pt weight 700, color #00FFFF, +1pt letter-spacing, uppercase. 1pt solid #00FFFF border, transparent fill, 4pt corner radius, 4pt vertical / 8pt horizontal padding. Used wherever lossless audio exists."
• "Build the TIDAL Now Playing mini bar: above the tab bar, 52pt tall, background #1A1A1A, a 1pt #FFFFFF progress hairline pinned to the top edge. 40×40pt square art (0pt radius) left, title 14pt weight 600 + a small cyan 'MASTER' badge trailing it, artist 11pt weight 400 #9A9A9A, trailing play/pause 20pt. Tap expands to full-bleed Now Playing with a crossfade."

Iteration Guide

1. Canvas is pure #000000 — true OLED black, NOT softened to #121212
2. White is the action color; HiFi cyan (#00FFFF) is reserved exclusively for quality-tier badges
3. Quality badges (Master / HiFi / Max) are the signature — render them everywhere fidelity exists
4. Album art is always square — 0pt corner radius, no exceptions
5. The app is radically flat — no shadows; communicate elevation with tonal steps #0A0A0A / #1A1A1A
6. Typography: geometric sans (Space Grotesk fallback), weights 400/600/700, tabular numerals
7. Transitions are crossfades — minimal, editorial, never bounce or slide
8. Dark-only — there is no light mode; give content gallery-like negative space