{
  "id": "tidal",
  "version": "1.0.0",
  "name": "TIDAL",
  "description": "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.\n",
  "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.\n",
    "importedDate": "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.\n"
  },
  "tags": [
    "tidal",
    "music",
    "streaming",
    "hifi",
    "lossless",
    "audiophile",
    "dark-first",
    "premium"
  ],
  "palette": {
    "ref": "tidal@1.0.0",
    "swatches": [
      {
        "id": "tidal-black",
        "name": "TIDAL Black",
        "value": "#000000",
        "description": "Canonical canvas — the TIDAL consumer surface is solid black.",
        "aliases": []
      },
      {
        "id": "tidal-near-black",
        "name": "TIDAL Near Black",
        "value": "#0A0A0A",
        "description": "Elevated surface on the dark canvas — main panel chrome.",
        "aliases": []
      },
      {
        "id": "tidal-surface-elevated",
        "name": "TIDAL Surface Elevated",
        "value": "#181818",
        "description": "Cards, hovered rows, and elevated tiles on the dark canvas.",
        "aliases": []
      },
      {
        "id": "tidal-cyan",
        "name": "TIDAL Cyan",
        "value": "#00FFFF",
        "description": "The signature TIDAL cyan / oxide-blue accent — the brand's only chromatic note.",
        "aliases": []
      },
      {
        "id": "tidal-cyan-pressed",
        "name": "TIDAL Cyan Pressed",
        "value": "#00CCCC",
        "description": "Pressed / active state for the primary action — a darker step from the cyan.",
        "aliases": []
      },
      {
        "id": "tidal-cyan-deep",
        "name": "TIDAL Cyan Deep",
        "value": "#008B94",
        "description": "Deeper cyan reserved for hover and selected states on the player chrome.",
        "aliases": []
      },
      {
        "id": "tidal-white",
        "name": "TIDAL White",
        "value": "#FFFFFF",
        "description": "Primary text on the dark canvas; reversed wordmark fill on light marketing surfaces.",
        "aliases": []
      },
      {
        "id": "tidal-gray-light",
        "name": "TIDAL Gray Light",
        "value": "#CCCCCC",
        "description": "Secondary text and divider color on the dark canvas.",
        "aliases": []
      },
      {
        "id": "tidal-gray",
        "name": "TIDAL Gray",
        "value": "#737373",
        "description": "Tertiary text, captions, and metadata in the player UI.",
        "aliases": []
      },
      {
        "id": "tidal-gray-dark",
        "name": "TIDAL Gray Dark",
        "value": "#404040",
        "description": "Quiet dividers, disabled state, and the unplayed seek-bar fill.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "tidal-white",
          "surface": "tidal-white",
          "surface-elevated": "tidal-white",
          "text-primary": "tidal-black",
          "text-secondary": "tidal-gray",
          "text-tertiary": "tidal-gray-light",
          "primary": "tidal-cyan-deep",
          "primary-hover": "tidal-cyan-pressed",
          "accent": "tidal-cyan-deep",
          "accent-hover": "tidal-cyan-pressed",
          "error": "tidal-black",
          "success": "tidal-cyan-deep",
          "border": "tidal-gray-light"
        }
      },
      "dark": {
        "roles": {
          "background": "tidal-black",
          "surface": "tidal-near-black",
          "surface-elevated": "tidal-surface-elevated",
          "text-primary": "tidal-white",
          "text-secondary": "tidal-gray-light",
          "text-tertiary": "tidal-gray",
          "primary": "tidal-cyan",
          "primary-hover": "tidal-cyan-pressed",
          "accent": "tidal-cyan",
          "accent-hover": "tidal-cyan-pressed",
          "error": "tidal-white",
          "success": "tidal-cyan",
          "border": "tidal-gray-dark"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "tidal-black",
      "on-identity": "tidal-cyan",
      "background": "tidal-black",
      "surface": "tidal-near-black",
      "surface-elevated": "tidal-surface-elevated",
      "text-primary": "tidal-white",
      "text-secondary": "tidal-gray-light",
      "text-tertiary": "tidal-gray",
      "primary": "tidal-cyan",
      "primary-hover": "tidal-cyan-pressed",
      "accent": "tidal-cyan",
      "accent-hover": "tidal-cyan-pressed",
      "mark": "tidal-cyan",
      "border": "tidal-gray-dark"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "wordmark": "heading",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.wordmark.fill",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "tidal-white",
        "tidal-black",
        "tidal-cyan"
      ],
      "forbidden": [
        "tidal-cyan-pressed",
        "tidal-cyan-deep",
        "tidal-gray",
        "tidal-gray-light",
        "tidal-gray-dark"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "gradient-fill",
        "cyan-on-low-contrast-background"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 7,
      "standard": "WCAG-AAA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link",
        "validation-failure",
        "hero-background"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "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.\n",
      "allowed": [
        "400",
        "500",
        "700"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "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.\n",
      "requires": "body",
      "minSizeRatio": 1.5
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "warning",
      "rationale": "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.\n",
      "standard": "WCAG-AAA",
      "criterion": "1.4.6"
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "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.\n",
      "pairsWith": [
        "tidal-black",
        "tidal-near-black",
        "tidal-white"
      ],
      "doesNotPairWith": [
        "tidal-cyan-deep",
        "tidal-cyan-pressed",
        "tidal-gray-light"
      ]
    }
  ]
}