designmd-forge 1.2.0

package/dist/data/designs/ios-tidal.md

@@ -0,0 +1,351 @@
+# Design System Inspiration of TIDAL (iOS)
+
+## 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title (Large) | Space Grotesk | 28pt | 700 | 1.15 | -0.4pt | "My Collection", "Search" large title |
+| Now Playing Track | Space Grotesk | 24pt | 700 | 1.2 | -0.3pt | Current track on full-bleed player |
+| Section Header | Space Grotesk | 22pt | 700 | 1.2 | -0.3pt | "My Mix", "Suggested New Tracks" |
+| Album / Artist Title | Space Grotesk | 20pt | 700 | 1.2 | -0.2pt | Album detail / artist hero name |
+| Track Title | Space Grotesk | 16pt | 600 | 1.3 | 0pt | Track row primary line |
+| Card Title | Space Grotesk | 15pt | 600 | 1.3 | 0pt | Album / mix tile title |
+| Artist / Subtitle | Space Grotesk | 14pt | 400 | 1.3 | 0pt | Artist name on rows |
+| Body | Space Grotesk | 15pt | 400 | 1.45 | 0pt | Album notes, bios |
+| Meta / Count | Space Grotesk | 12pt | 400 | 1.3 | 0pt | "14 tracks · 58 min" |
+| Quality Badge | Space Grotesk | 10pt | 700 | 1.0 | 1.0pt | "MASTER" / "HIFI" / "MAX", all-caps cyan |
+| Label (UPPER) | Space Grotesk | 11pt | 700 | 1.2 | 0.8pt | "EXCLUSIVE", section eyebrow |
+| Button (Primary) | Space Grotesk | 15pt | 700 | 1.0 | 0.3pt | White "Play" / "Follow" pill |
+| Button (Secondary) | Space Grotesk | 14pt | 600 | 1.0 | 0pt | Outline "Following" |
+| Tab Label | Space Grotesk | 10pt | 600 | 1.0 | 0.3pt | Bottom tab bar labels |
+| Timestamp | Space Grotesk | 11pt | 600 | 1.0 | 0pt | Scrubber 1:23 / -2:09, tabular |
+
+### 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
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Everything — list rows, tiles, canvas, even Now Playing art |
+| Surface Step (Level 1) | `#0A0A0A` (no shadow) | Cards/rows separated by a tonal step, not elevation |
+| Sheet (Level 2) | `#1A1A1A` + `rgba(0,0,0,0.8) 0 -8px 32px` | Bottom sheets, quality detail sheet (the only real shadow) |
+| Scrim | `rgba(0,0,0,0.6)` over blurred art | Now Playing backdrop legibility |
+| Tab Bar Material | `.regularMaterial` over 96%-opaque black | Bottom tab bar over scrolling content |
+
+**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
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | 130pt shelf tiles; Now Playing art 280pt |
+| iPhone 13/14/15 | 390pt | Standard 150pt tiles; art 320pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
+| iPhone 15/16 Pro Max | 430pt | 170pt tiles; Now Playing art 360pt |
+| iPad | 768pt+ | 3-column grid; Now Playing art 480pt, controls centered |
+
+### 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