{
  "$description": "Brand: TypeScript (typescript@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette typescript@1.0.0",
      "ts-blue": {
        "$value": "#3178C6",
        "$type": "color",
        "$description": "Primary brand color — the rounded-square mark fill. The \"TS\" lettermark sits on this blue in white.\n"
      },
      "ts-blue-bright": {
        "$value": "#4F8AD0",
        "$type": "color",
        "$description": "Brighter variant used on dark backgrounds for legibility."
      },
      "ts-blue-dark": {
        "$value": "#235A9E",
        "$type": "color",
        "$description": "Darker variant used for hover states and shadows."
      },
      "ts-black": {
        "$value": "#0E1217",
        "$type": "color",
        "$description": "Dark-mode page canvas."
      },
      "ts-charcoal": {
        "$value": "#1C232C",
        "$type": "color",
        "$description": "Elevated dark surface for cards and panels."
      },
      "ts-gray": {
        "$value": "#5C5C5C",
        "$type": "color",
        "$description": "Mid neutral for body text and dividers."
      },
      "ts-light-gray": {
        "$value": "#D5D5D5",
        "$type": "color",
        "$description": "Hairline borders on light canvas."
      },
      "ts-off-white": {
        "$value": "#F4F4F4",
        "$type": "color",
        "$description": "Subtle layered surface on the light canvas."
      },
      "ts-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Page canvas in light mode; reversed letter color on the mark."
      },
      "ts-success": {
        "$value": "#2EA043",
        "$type": "color",
        "$description": "Status success color."
      },
      "ts-warning": {
        "$value": "#D29922",
        "$type": "color",
        "$description": "Status warning color."
      },
      "ts-error": {
        "$value": "#CF222E",
        "$type": "color",
        "$description": "Status error color."
      }
    }
  },
  "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": [
          "Source Code Pro",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → Source Code Pro (source-code-pro@1.0.0)"
      },
      "weight": {
        "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"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "The TypeScript branding page explicitly forbids modifying the shape of the logo, integrating it into a product's own logo, or using it to name a product in a way that implies TypeScript endorsement.\n",
        "treatments": [
          "shape-modified",
          "integrated-into-product-logo",
          "recolored",
          "rotated",
          "skewed",
          "on-busy-photo"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.identity",
        "severity": "error",
        "rationale": "TS Blue (#3178C6) is the single canonical identity color; a brighter variant exists for dark-surface legibility. Status hues (success / warning / error) are functional and must not stand in as the brand identity color.\n",
        "allowed": [
          "ts-blue",
          "ts-blue-bright"
        ],
        "forbidden": [
          "ts-success",
          "ts-warning",
          "ts-error"
        ]
      },
      {
        "type": "enumMembership",
        "target": "logo.variant",
        "severity": "warning",
        "rationale": "The TypeScript branding pack publishes three approved variants: the blue rounded-square with white TS cutout, a single-color monochrome variant, and a full \"TypeScript\" lettermark. Other variants are not approved.\n",
        "allowed": [
          "ts-cutout-blue",
          "ts-monochrome",
          "typescript-lettermark"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "TypeScript Black (#0E1217) on TS White exceeds 18:1 — well above the WCAG AA threshold for body text.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.primary",
        "severity": "error",
        "rationale": "TS Blue (#3178C6) on White sits around 5.0:1 — clears WCAG AA for body text. Consumers should verify against the actual rendered weight before using TS Blue for fine text on white surfaces.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "recommendation",
        "rationale": "typescriptlang.org uses a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.\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 TypeScript brand is designed AA-compliant when TS Blue is used as the primary interactive color on the documented backgrounds.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "contextRestriction",
        "target": "trademark.use",
        "severity": "error",
        "rationale": "Microsoft's branding page forbids product names that imply TypeScript's endorsement (e.g. \"TypeScript Lint\", \"TypeScript Plus\"). Use the mark to indicate compatibility, not as part of a product identity.\n",
        "forbiddenContexts": [
          "product-name-prefix",
          "implied-endorsement"
        ]
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://www.typescriptlang.org/branding",
      "license": "Apache-2.0",
      "attribution": "TypeScript is a trademark of Microsoft Corporation; the TypeScript compiler and language libraries are released under the Apache-2.0 license. The typescriptlang.org branding page permits use of the blue lettermark for indicating TypeScript compatibility but forbids modifying the mark, integrating it into product logos, or naming a product in a way that implies TypeScript endorsement. This atom is brand-atoms' machine-readable encoding of those rules; no logos are bundled.\n",
      "importedDate": "2026-05-18",
      "notes": "Microsoft does not publish a hex value alongside the TypeScript branding page; the canonical TS Blue (#3178C6) is the SVG fill in the design assets pack distributed at typescriptlang.org/branding and matches the value published by the simple-icons project.\n"
    },
    "com.brand-atoms.references": {
      "palette": "typescript@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "source-code-pro@1.0.0"
      }
    }
  }
}