{
  "$description": "Brand: SoundCloud (soundcloud@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette soundcloud@1.0.0",
      "soundcloud-orange": {
        "$value": "#FF8800",
        "$type": "color",
        "$description": "The signature SoundCloud accent — the waveform fill, the play button, and the primary CTA color."
      },
      "soundcloud-red-orange": {
        "$value": "#FF3300",
        "$type": "color",
        "$description": "The deeper red-orange variant used in the gradient mark and on hover / active states."
      },
      "soundcloud-orange-pressed": {
        "$value": "#E67300",
        "$type": "color",
        "$description": "Pressed / active state for the primary action — a darker step from the brand orange."
      },
      "soundcloud-pantone": {
        "$value": "#F37422",
        "$type": "color",
        "$description": "Pantone 158 C — third-party-documented warm variant of the SoundCloud accent."
      },
      "soundcloud-black": {
        "$value": "#111111",
        "$type": "color",
        "$description": "Primary text on the light canvas; deep ink for the wordmark on white."
      },
      "soundcloud-charcoal": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Secondary text and divider on the light canvas."
      },
      "soundcloud-gray": {
        "$value": "#999999",
        "$type": "color",
        "$description": "Tertiary text, metadata, and quiet waveform regions."
      },
      "soundcloud-gray-light": {
        "$value": "#CCCCCC",
        "$type": "color",
        "$description": "Divider lines and the unplayed waveform fill in the player UI."
      },
      "soundcloud-surface": {
        "$value": "#F2F2F2",
        "$type": "color",
        "$description": "Subtle elevated surface on the light canvas — row hover, sidebar."
      },
      "soundcloud-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Canonical light canvas — the player chrome and marketing default."
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "colorChoice",
        "target": "logo.mark.fill",
        "severity": "error",
        "rationale": "The SoundCloud cloud-waveform mark renders in the brand orange, the deeper red-orange gradient variant, or as a flat reversed white / black mark on chromatic backgrounds. Filling the mark with the neutral grays or the Pantone approximation (kept as a documented variant only) breaks the published brand treatment.\n",
        "allowed": [
          "soundcloud-orange",
          "soundcloud-red-orange",
          "soundcloud-white",
          "soundcloud-black"
        ],
        "forbidden": [
          "soundcloud-gray",
          "soundcloud-gray-light",
          "soundcloud-charcoal",
          "soundcloud-pantone"
        ]
      },
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "The SoundCloud mark has a fixed aspect ratio and a small, published set of color variants (orange, white, black, and the orange-to-red-orange gradient). Stretching, rotating, or filling it with arbitrary colors conflicts with the brand's straightforward, creator-forward voice.\n",
        "treatments": [
          "stretched",
          "rotated",
          "recolored",
          "drop-shadow",
          "on-busy-photo",
          "inverted-without-variant"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "SoundCloud Black (#111111) on SoundCloud White (#FFFFFF) gives ~19:1 — well clear of WCAG 2.1 Level AA. This rule encodes the floor any new foreground / background role pairing must clear on the light canvas.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "SoundCloud Orange (#FF8800) on white falls near the 3:1 AA-large floor — the saturated mid-orange is bright enough to read at interactive sizes but is not WCAG-AA-clear for small-text uses. Treat the orange as an accent for marks and interactive surfaces, not for body text.\n",
        "against": "background",
        "minRatio": 3,
        "standard": "WCAG-AA-large"
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.primary",
        "severity": "error",
        "rationale": "SoundCloud Orange is reserved for the brand mark, the play affordance, and the primary action. Using it for body text or for validation-failure / error states collides with its established positive-action meaning and dilutes the brand's only chromatic accent.\n",
        "forbiddenContexts": [
          "body-text",
          "secondary-link",
          "validation-failure"
        ]
      },
      {
        "type": "enumMembership",
        "target": "typography.heading.fontWeight",
        "severity": "warning",
        "rationale": "SoundCloud's display type runs Medium (500) through Bold (700) with the heaviest Black (900) cut reserved for hero / editorial headlines. Lighter weights read as body or UI weight and compromise the editorial impact of the marketing voice.\n",
        "allowed": [
          "500",
          "600",
          "700",
          "900"
        ]
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "warning",
        "rationale": "SoundCloud hero typography runs materially larger than the player UI's body text. A 1.5× floor between display and prose preserves the editorial hierarchy and prevents the creator-forward voice from collapsing into a single typographic register.\n",
        "requires": "body",
        "minSizeRatio": 1.5
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The light-first canvas makes contrast checks the default verification on every new role pairing, especially around the orange accent which sits near the AA-large floor on white.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "compositionConstraint",
        "target": "roles.colors.primary",
        "severity": "recommendation",
        "rationale": "SoundCloud Orange reads cleanest against pure white, deep black, or charcoal. Pairing it against the pale surface gray collapses the contrast and softens the orange's role as the brand's only chromatic accent.\n",
        "pairsWith": [
          "soundcloud-white",
          "soundcloud-black",
          "soundcloud-charcoal"
        ],
        "doesNotPairWith": [
          "soundcloud-gray-light",
          "soundcloud-surface"
        ]
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://htmlcolors.com/brand-color/soundcloud",
      "license": "Proprietary — All Rights Reserved",
      "attribution": "SoundCloud, the SoundCloud wordmark, and the orange cloud / waveform mark are trademarks of SoundCloud Global Limited & Co. KG. This atom captures brand-atoms' read of SoundCloud's publicly observable identity (the marketing site, the player UI, and the cross-cited brand-color values from third-party aggregators). It is not an official SoundCloud brand-guidelines document.\n",
      "importedDate": "2026-05-19",
      "notes": "SoundCloud does not publish a public brand-guidelines document with hex values. The primary orange (#FF8800) and secondary red-orange (#FF3300) are cross-cited by multiple third-party brand-color aggregators (htmlcolors.com, designpieces.com) and match the rendered values on the public player. SoundCloud's marketing site uses Interstate (proprietary, licensed from Font Bureau) for headlines and a system-sans stack for body. This atom substitutes `inter@1` as the open-source rendering fallback for both heading and body roles.\n"
    },
    "com.brand-atoms.references": {
      "palette": "soundcloud@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}