# TIDAL

> `tidal@1.0.0`

TIDAL is a subscription music-streaming service positioned at the audiophile end of the market — founded on lossless and high-resolution audio, and now operated as a subsidiary of Block, Inc. The brand voice is premium, artist-respectful, and audio-quality-first: where competitors lean editorial or community, TIDAL leans into fidelity and the artist's uncompromised master. Visually, the identity is the most restrained in music streaming: a solid-black canvas, a single bright cyan / oxide-blue accent, and white text. The two-tone black-and-cyan pairing is the most recognizable element of the TIDAL identity, and the spareness of the palette is itself a brand statement — clarity, fidelity, no decoration.


**Tags:** `tidal`, `music`, `streaming`, `hifi`, `lossless`, `audiophile`, `dark-first`, `premium`

## Atoms

### Palette

**TIDAL** · `tidal@1.0.0` · Proprietary — All Rights Reserved

> TIDAL's brand palette built on the most restrained pairing in music streaming: pure black, pure white, and a single bright cyan / oxide-blue accent. The brand is dark-first, premium, and audiophile-positioned — TIDAL was founded on the promise of lossless and high-resolution audio, and the visual identity reflects that minimalism: the deep black canvas dominates, the cyan reads as the only chromatic note, and white provides text and reversed wordmark variants. The two-tone palette is the most identifiable element of the TIDAL identity. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `tidal-black` | TIDAL Black | `#000000` |
| `tidal-near-black` | TIDAL Near Black | `#0A0A0A` |
| `tidal-surface-elevated` | TIDAL Surface Elevated | `#181818` |
| `tidal-cyan` | TIDAL Cyan | `#00FFFF` |
| `tidal-cyan-pressed` | TIDAL Cyan Pressed | `#00CCCC` |
| `tidal-cyan-deep` | TIDAL Cyan Deep | `#008B94` |
| `tidal-white` | TIDAL White | `#FFFFFF` |
| `tidal-gray-light` | TIDAL Gray Light | `#CCCCCC` |
| `tidal-gray` | TIDAL Gray | `#737373` |
| `tidal-gray-dark` | TIDAL Gray Dark | `#404040` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `tidal-white` | `#FFFFFF` |
| `surface` | `tidal-white` | `#FFFFFF` |
| `surface-elevated` | `tidal-white` | `#FFFFFF` |
| `text-primary` | `tidal-black` | `#000000` |
| `text-secondary` | `tidal-gray` | `#737373` |
| `text-tertiary` | `tidal-gray-light` | `#CCCCCC` |
| `primary` | `tidal-cyan-deep` | `#008B94` |
| `primary-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `accent` | `tidal-cyan-deep` | `#008B94` |
| `accent-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `error` | `tidal-black` | `#000000` |
| `success` | `tidal-cyan-deep` | `#008B94` |
| `border` | `tidal-gray-light` | `#CCCCCC` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `tidal-black` | `#000000` |
| `surface` | `tidal-near-black` | `#0A0A0A` |
| `surface-elevated` | `tidal-surface-elevated` | `#181818` |
| `text-primary` | `tidal-white` | `#FFFFFF` |
| `text-secondary` | `tidal-gray-light` | `#CCCCCC` |
| `text-tertiary` | `tidal-gray` | `#737373` |
| `primary` | `tidal-cyan` | `#00FFFF` |
| `primary-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `accent` | `tidal-cyan` | `#00FFFF` |
| `accent-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `error` | `tidal-white` | `#FFFFFF` |
| `success` | `tidal-cyan` | `#00FFFF` |
| `border` | `tidal-gray-dark` | `#404040` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `tidal-black` | `#000000` |
| `on-identity` | `tidal-cyan` | `#00FFFF` |
| `background` | `tidal-black` | `#000000` |
| `surface` | `tidal-near-black` | `#0A0A0A` |
| `surface-elevated` | `tidal-surface-elevated` | `#181818` |
| `text-primary` | `tidal-white` | `#FFFFFF` |
| `text-secondary` | `tidal-gray-light` | `#CCCCCC` |
| `text-tertiary` | `tidal-gray` | `#737373` |
| `primary` | `tidal-cyan` | `#00FFFF` |
| `primary-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `accent` | `tidal-cyan` | `#00FFFF` |
| `accent-hover` | `tidal-cyan-pressed` | `#00CCCC` |
| `mark` | `tidal-cyan` | `#00FFFF` |
| `border` | `tidal-gray-dark` | `#404040` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.wordmark.fill`

- **allowed:** tidal-white, tidal-black, tidal-cyan
- **forbidden:** tidal-cyan-pressed, tidal-cyan-deep, tidal-gray, tidal-gray-light, tidal-gray-dark

> The TIDAL wordmark renders only in white, black, or the brand cyan. The cyan-pressed and cyan-deep variants are interactive-state colors for the primary action, not wordmark fills, and the neutral grays are reserved for text hierarchy on the dark canvas. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill, cyan-on-low-contrast-background

> TIDAL's identity is built on minimalism and clarity. Recoloring, stretching, or adding gradient / shadow treatments to the wordmark conflicts with the brand's audiophile-first, no-decoration voice. The cyan wordmark must never appear on a background where it falls below WCAG-AA-large contrast. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `7`
- **standard:** `WCAG-AAA`

> TIDAL White (#FFFFFF) on TIDAL Black (#000000) gives ~21:1 — clears WCAG 2.1 Level AAA decisively. The audiophile / premium positioning argues for an AAA contrast target on the canonical dark canvas rather than the AA floor; the dark canvas dominates the consumer surface and the text must be unequivocally legible. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> TIDAL Cyan (#00FFFF) on TIDAL Black (#000000) gives ~16:1 — well above the AA-large floor. This rule encodes the affordance: the cyan primary action and play button must remain perceptible at all interactive sizes on the dark canvas. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, secondary-link, validation-failure, hero-background

> TIDAL Cyan is reserved for the brand mark, the play affordance, the primary action, and tightly-scoped hover / selected states. Using it for body text, for validation-failure states, or as a hero background collapses the brand's chromatic restraint and dilutes the high-fidelity affordance the cyan carries. 

### ⚠️ warning (3)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 700

> TIDAL's headlines use Regular (400) for editorial, Medium (500) for UI emphasis, and Bold (700) for hero typography. The brand's restrained, audio-first voice argues against the heaviest display weights — the visual weight comes from the dark canvas and the generous whitespace, not from typographic shouting. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> TIDAL's hero / section headers run materially larger than the player UI's body text. A 1.5× floor between display and prose preserves the editorial hierarchy and prevents the minimal palette from being read as flat or undifferentiated. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AAA`
- **criterion:** `1.4.6`

> WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. The TIDAL premium / audiophile positioning and the high-contrast Black / White / Cyan palette already clear AAA on the canonical dark canvas; adopting AAA as the target rather than the AA floor keeps the brand's clarity-first posture explicit. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** tidal-black, tidal-near-black, tidal-white
- **doesNotPairWith:** tidal-cyan-deep, tidal-cyan-pressed, tidal-gray-light

> The brand cyan reads cleanest against the deep black canvas, the near-black surface, or pure white. Pairing it adjacent to its own deeper interactive-state variants or to the pale neutral creates a muddy chromatic adjacency that fights the brand's two-tone restraint. 

## Provenance

- **Source:** <https://mobbin.com/colors/brand/tidal-music>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** TIDAL, the TIDAL wordmark, and the cyan / black brand mark are trademarks of TIDAL Music AS (a subsidiary of Block, Inc.). This atom captures brand-atoms' read of TIDAL's publicly observable identity (the consumer marketing surfaces and the cross-cited brand-color values from third-party aggregators). It is not an official TIDAL brand-guidelines document. 
- **Imported:** `2026-05-19`
- **Notes:** TIDAL's public marketing site (tidal.com) returns HTTP 403 to unauthenticated fetches; provenance for this palette falls back to Mobbin's published TIDAL brand-color reference, which documents the canonical three-color Black / White / Cyan identity. TIDAL's marketing site uses a proprietary sans-serif; this atom substitutes `inter@1` as the open-source rendering fallback for both heading and body roles, matching the convention used by other proprietary-typography brand atoms in this catalog. 

---

*Generated by the brand-atoms converter. Source: `tidal@1.0.0` from the encyclopedia.*