W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
TIDAL
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/tidal/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/tidal/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
TIDAL
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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@1as 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: [email protected] from the encyclopedia.
Components — same template, themed by TIDAL
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
TIDAL
A clear hierarchy in TIDAL's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ tidal-cyan #00FFFF accent-hover
→ tidal-cyan-pressed #00CCCC background
→ tidal-black #000000 border
→ tidal-gray-dark #404040 identity
→ tidal-black #000000 mark
→ tidal-cyan #00FFFF on-identity
→ tidal-cyan #00FFFF primary
→ tidal-cyan #00FFFF primary-hover
→ tidal-cyan-pressed #00CCCC 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 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from tidal)
Light mode (13 roles)
accent
→ tidal-cyan-deep accent-hover
→ tidal-cyan-pressed background
→ tidal-white border
→ tidal-gray-light error
→ tidal-black primary
→ tidal-cyan-deep primary-hover
→ tidal-cyan-pressed success
→ tidal-cyan-deep surface
→ tidal-white surface-elevated
→ tidal-white text-primary
→ tidal-black text-secondary
→ tidal-gray text-tertiary
→ tidal-gray-light Dark mode (13 roles)
accent
→ tidal-cyan accent-hover
→ tidal-cyan-pressed background
→ tidal-black border
→ tidal-gray-dark error
→ tidal-white primary
→ tidal-cyan primary-hover
→ tidal-cyan-pressed success
→ tidal-cyan surface
→ tidal-near-black surface-elevated
→ tidal-surface-elevated text-primary
→ tidal-white text-secondary
→ tidal-gray-light text-tertiary
→ tidal-gray Rules (9 typed constraints)
error · 5 rules
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 rules
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 rule
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.