{
  "id": "tiktok",
  "version": "1.0.0",
  "name": "TikTok",
  "description": "TikTok is the global short-form video platform owned by ByteDance, the most downloaded consumer app of its era. The brand identity is a chromatic three-color composition: a black canvas anchoring the iconic music-note \"d\" mark composed of red and cyan layers offset against a white core — a deliberate glitch-art chromatic- aberration signature. The brand is dark-first, gen-Z-facing, and unapologetically expressive: the wordmark and mark read as a paired chromatic accent on solid black across the consumer app and marketing surfaces.\n",
  "provenance": {
    "source": "https://www.tiktok.com/about/brand-guidelines",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "TikTok Pte. Ltd. (a ByteDance Ltd. subsidiary) — TikTok, the TikTok wordmark, and the music-note \"d\" mark are registered trademarks of TikTok Pte. Ltd. The signature TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) are documented across TikTok's brand-guidelines page and verified against the deployed TikTok logomark SVG. TikTok Display (the proprietary corporate typeface, designed by Grilli Type) is the brand display face; Inter is referenced here as the open-source fallback.\n",
    "importedDate": "2026-05-18",
    "notes": "TikTok Display (the proprietary face) is a commercial license and not publicly distributed. This atom references Inter for both heading and body roles and notes TikTok Display as the proprietary primary in provenance. The chromatic-offset treatment on the \"d\" mark is the most-policed brand element — the red and cyan layers are NOT interchangeable, and the offset MUST be applied as specified in the brand-guidelines.\n"
  },
  "tags": [
    "social",
    "video",
    "tiktok",
    "bytedance",
    "dark-first",
    "chromatic",
    "consumer"
  ],
  "palette": {
    "ref": "tiktok@1.0.0",
    "swatches": [
      {
        "id": "tiktok-red",
        "name": "TikTok Red",
        "value": "#FE2C55",
        "description": "Signature warm red — the red-channel anchor of the chromatic mark and a primary brand accent.",
        "aliases": []
      },
      {
        "id": "tiktok-cyan",
        "name": "TikTok Cyan",
        "value": "#25F4EE",
        "description": "Signature cyan — the cyan-channel anchor of the chromatic mark, offset against the red.",
        "aliases": []
      },
      {
        "id": "tiktok-red-deep",
        "name": "TikTok Red Deep",
        "value": "#D91E45",
        "description": "Authored deeper red used for hover/pressed states on the primary red.",
        "aliases": []
      },
      {
        "id": "tiktok-cyan-deep",
        "name": "TikTok Cyan Deep",
        "value": "#0BB8B3",
        "description": "Authored deeper cyan used for hover/pressed states on the cyan accent.",
        "aliases": []
      },
      {
        "id": "tiktok-black",
        "name": "TikTok Black",
        "value": "#000000",
        "description": "Canonical canvas — the TikTok consumer surface and wordmark frame is solid black.",
        "aliases": []
      },
      {
        "id": "tiktok-near-black",
        "name": "TikTok Near-Black",
        "value": "#121212",
        "description": "Elevated surface on the dark canvas — feed background, modal headers.",
        "aliases": []
      },
      {
        "id": "tiktok-charcoal",
        "name": "TikTok Charcoal",
        "value": "#1F1F1F",
        "description": "Hovered surface and elevated tiles on the dark mode.",
        "aliases": []
      },
      {
        "id": "tiktok-white",
        "name": "TikTok White",
        "value": "#FFFFFF",
        "description": "Primary text on the dark canvas; the core \"d\" mark interior; reversed wordmark fill on light surfaces.",
        "aliases": []
      },
      {
        "id": "tiktok-fog",
        "name": "TikTok Fog",
        "value": "#F1F1F2",
        "description": "Authored light-mode canvas; secondary surface for marketing.",
        "aliases": []
      },
      {
        "id": "tiktok-gray",
        "name": "TikTok Gray",
        "value": "#86878B",
        "description": "Secondary text and metadata across both modes.",
        "aliases": []
      },
      {
        "id": "tiktok-gray-light",
        "name": "TikTok Gray Light",
        "value": "#BBBBBC",
        "description": "Tertiary text and inactive icons on the dark canvas.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "tiktok-fog",
          "surface": "tiktok-white",
          "surface-elevated": "tiktok-white",
          "text-primary": "tiktok-black",
          "text-secondary": "tiktok-gray",
          "text-tertiary": "tiktok-gray-light",
          "primary": "tiktok-red",
          "primary-hover": "tiktok-red-deep",
          "accent": "tiktok-cyan",
          "accent-hover": "tiktok-cyan-deep",
          "warning": "tiktok-red-deep",
          "warning-hover": "tiktok-red",
          "error": "tiktok-red-deep",
          "success": "tiktok-cyan"
        }
      },
      "dark": {
        "roles": {
          "background": "tiktok-black",
          "surface": "tiktok-near-black",
          "surface-elevated": "tiktok-charcoal",
          "text-primary": "tiktok-white",
          "text-secondary": "tiktok-gray-light",
          "text-tertiary": "tiktok-gray",
          "primary": "tiktok-red",
          "primary-hover": "tiktok-red-deep",
          "accent": "tiktok-cyan",
          "accent-hover": "tiktok-cyan-deep",
          "warning": "tiktok-red",
          "warning-hover": "tiktok-red-deep",
          "error": "tiktok-red",
          "success": "tiktok-cyan"
        }
      }
    }
  },
  "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": "tiktok-black",
      "on-identity": "tiktok-white",
      "background": "tiktok-black",
      "surface": "tiktok-near-black",
      "surface-elevated": "tiktok-charcoal",
      "text-primary": "tiktok-white",
      "text-secondary": "tiktok-gray-light",
      "text-tertiary": "tiktok-gray",
      "primary": "tiktok-red",
      "primary-hover": "tiktok-red-deep",
      "accent": "tiktok-cyan",
      "accent-hover": "tiktok-cyan-deep",
      "mark": "tiktok-white",
      "mark-channel-red": "tiktok-red",
      "mark-channel-cyan": "tiktok-cyan",
      "text-emphasis": "tiktok-white"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "wordmark": "heading",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark.core",
      "severity": "error",
      "rationale": "The TikTok music-note \"d\" mark has a white core (on dark backgrounds) or a black core (on light backgrounds), with the red and cyan layers offset behind it. The red and cyan are chromatic-channel anchors, not core-fill colors — using either for the core breaks the chromatic-aberration signature.\n",
      "allowed": [
        "tiktok-white",
        "tiktok-black"
      ],
      "forbidden": [
        "tiktok-red",
        "tiktok-cyan",
        "tiktok-red-deep",
        "tiktok-cyan-deep",
        "tiktok-gray"
      ]
    },
    {
      "type": "colorChoice",
      "target": "logo.mark.channels",
      "severity": "error",
      "rationale": "The chromatic-offset channels on the \"d\" mark MUST be the published TikTok Red (#FE2C55) and TikTok Cyan (#25F4EE) — the deeper hover variants are interactive-state values for product chrome, not channel anchors. The mark's identity is the specific red-and-cyan duotone, not \"any red, any cyan.\"\n",
      "allowed": [
        "tiktok-red",
        "tiktok-cyan"
      ],
      "forbidden": [
        "tiktok-red-deep",
        "tiktok-cyan-deep",
        "tiktok-white",
        "tiktok-black"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "TikTok's brand-guidelines program is explicit: the chromatic offset on the \"d\" mark MUST be applied as published, with the red and cyan layers at the specified offset distance. Flattening the mark to a single color, recoloring the channels, or misaligning the offset destroys the defining brand element.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "inverted-without-variant",
        "flattened-to-single-color",
        "misaligned-chromatic-offset"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "TikTok White on TikTok Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on TikTok surfaces.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "TikTok Red on TikTok Black gives ~5:1 — clears AA-large and approaches AA-normal. Buttons using the red fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA against the black canvas.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "TikTok Display headlines on marketing surfaces use Medium (500), Bold (700), and Black (900) weights. Lighter cuts read as feed body and compromise the gen-Z-facing expressive voice the brand depends on.\n",
      "allowed": [
        "500",
        "700",
        "900"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "TikTok Red is reserved for primary CTAs (\"Follow,\" \"Like,\" \"Sign Up\") and the chromatic-channel anchor on the mark. Using it inside body copy or for secondary links dilutes the signature accent and breaks the interactive signal the red carries throughout the product.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link"
      ]
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The TikTok Red and TikTok Cyan are paired anchors — the brand is built on this duotone chromatic relationship. Pairing the red with its own hover-state deeper red on the same surface creates a muddy two-red composition that flattens the chromatic signature.\n",
      "pairsWith": [
        "tiktok-cyan",
        "tiktok-black",
        "tiktok-white"
      ],
      "doesNotPairWith": [
        "tiktok-red-deep"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    }
  ]
}