{
  "$description": "Brand: TikTok (tiktok@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette tiktok@1.0.0",
      "tiktok-red": {
        "$value": "#FE2C55",
        "$type": "color",
        "$description": "Signature warm red — the red-channel anchor of the chromatic mark and a primary brand accent."
      },
      "tiktok-cyan": {
        "$value": "#25F4EE",
        "$type": "color",
        "$description": "Signature cyan — the cyan-channel anchor of the chromatic mark, offset against the red."
      },
      "tiktok-red-deep": {
        "$value": "#D91E45",
        "$type": "color",
        "$description": "Authored deeper red used for hover/pressed states on the primary red."
      },
      "tiktok-cyan-deep": {
        "$value": "#0BB8B3",
        "$type": "color",
        "$description": "Authored deeper cyan used for hover/pressed states on the cyan accent."
      },
      "tiktok-black": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Canonical canvas — the TikTok consumer surface and wordmark frame is solid black."
      },
      "tiktok-near-black": {
        "$value": "#121212",
        "$type": "color",
        "$description": "Elevated surface on the dark canvas — feed background, modal headers."
      },
      "tiktok-charcoal": {
        "$value": "#1F1F1F",
        "$type": "color",
        "$description": "Hovered surface and elevated tiles on the dark mode."
      },
      "tiktok-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text on the dark canvas; the core \"d\" mark interior; reversed wordmark fill on light surfaces."
      },
      "tiktok-fog": {
        "$value": "#F1F1F2",
        "$type": "color",
        "$description": "Authored light-mode canvas; secondary surface for marketing."
      },
      "tiktok-gray": {
        "$value": "#86878B",
        "$type": "color",
        "$description": "Secondary text and metadata across both modes."
      },
      "tiktok-gray-light": {
        "$value": "#BBBBBC",
        "$type": "color",
        "$description": "Tertiary text and inactive icons on the dark canvas."
      }
    }
  },
  "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.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"
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.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"
    },
    "com.brand-atoms.references": {
      "palette": "tiktok@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}