{
  "id": "typescript",
  "version": "1.0.0",
  "name": "TypeScript",
  "description": "TypeScript is JavaScript with syntax for types — a strongly-typed superset of JavaScript developed and maintained by Microsoft. The brand voice is precise, pragmatic, and editor-first: tooling is part of the message. The visual identity is intentionally minimal — a single blue rounded-square mark with the white \"TS\" lettermark inside it. Color appears as identity, hierarchy, and status; the brand does not lean on illustration.\n",
  "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"
  },
  "tags": [
    "typescript",
    "programming-language",
    "microsoft",
    "blue",
    "open-source"
  ],
  "palette": {
    "ref": "typescript@1.0.0",
    "swatches": [
      {
        "id": "ts-blue",
        "name": "TypeScript Blue",
        "value": "#3178C6",
        "description": "Primary brand color — the rounded-square mark fill. The \"TS\" lettermark sits on this blue in white.\n",
        "aliases": []
      },
      {
        "id": "ts-blue-bright",
        "name": "TypeScript Blue Bright",
        "value": "#4F8AD0",
        "description": "Brighter variant used on dark backgrounds for legibility.",
        "aliases": []
      },
      {
        "id": "ts-blue-dark",
        "name": "TypeScript Blue Dark",
        "value": "#235A9E",
        "description": "Darker variant used for hover states and shadows.",
        "aliases": []
      },
      {
        "id": "ts-black",
        "name": "TypeScript Black",
        "value": "#0E1217",
        "description": "Dark-mode page canvas.",
        "aliases": []
      },
      {
        "id": "ts-charcoal",
        "name": "TypeScript Charcoal",
        "value": "#1C232C",
        "description": "Elevated dark surface for cards and panels.",
        "aliases": []
      },
      {
        "id": "ts-gray",
        "name": "TypeScript Gray",
        "value": "#5C5C5C",
        "description": "Mid neutral for body text and dividers.",
        "aliases": []
      },
      {
        "id": "ts-light-gray",
        "name": "TypeScript Light Gray",
        "value": "#D5D5D5",
        "description": "Hairline borders on light canvas.",
        "aliases": []
      },
      {
        "id": "ts-off-white",
        "name": "TypeScript Off-White",
        "value": "#F4F4F4",
        "description": "Subtle layered surface on the light canvas.",
        "aliases": []
      },
      {
        "id": "ts-white",
        "name": "TypeScript White",
        "value": "#FFFFFF",
        "description": "Page canvas in light mode; reversed letter color on the mark.",
        "aliases": []
      },
      {
        "id": "ts-success",
        "name": "TypeScript Success",
        "value": "#2EA043",
        "description": "Status success color.",
        "aliases": []
      },
      {
        "id": "ts-warning",
        "name": "TypeScript Warning",
        "value": "#D29922",
        "description": "Status warning color.",
        "aliases": []
      },
      {
        "id": "ts-error",
        "name": "TypeScript Error",
        "value": "#CF222E",
        "description": "Status error color.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "ts-white",
          "surface": "ts-off-white",
          "surface-elevated": "ts-white",
          "text-primary": "ts-black",
          "text-secondary": "ts-gray",
          "text-tertiary": "ts-blue-dark",
          "primary": "ts-blue",
          "primary-hover": "ts-blue-dark",
          "accent": "ts-blue-dark",
          "accent-hover": "ts-blue",
          "warning": "ts-warning",
          "warning-hover": "ts-warning",
          "error": "ts-error",
          "success": "ts-success"
        }
      },
      "dark": {
        "roles": {
          "background": "ts-black",
          "surface": "ts-charcoal",
          "surface-elevated": "ts-charcoal",
          "text-primary": "ts-white",
          "text-secondary": "ts-light-gray",
          "text-tertiary": "ts-blue-bright",
          "primary": "ts-blue-bright",
          "primary-hover": "ts-blue",
          "accent": "ts-blue",
          "accent-hover": "ts-blue-bright",
          "warning": "ts-warning",
          "warning-hover": "ts-warning",
          "error": "ts-error",
          "success": "ts-success"
        }
      }
    }
  },
  "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": "source-code-pro@1.0.0",
      "family": "Source Code Pro",
      "classification": "monospace",
      "source": {
        "kind": "google-fonts",
        "family": "Source Code Pro",
        "url": "https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
      },
      "fallbackStack": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "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"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "ts-blue",
      "on-identity": "ts-white",
      "primary": "ts-blue",
      "primary-hover": "ts-blue-dark",
      "accent": "ts-blue-dark",
      "accent-hover": "ts-blue",
      "background": "ts-white",
      "surface": "ts-off-white",
      "text-primary": "ts-black",
      "text-secondary": "ts-gray"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "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"
      ]
    }
  ]
}