{
  "id": "npm",
  "version": "1.0.0",
  "name": "npm",
  "description": "npm is the default package registry for Node.js and the JavaScript ecosystem — the place where `npm install <name>` resolves the world's largest collection of open-source packages by count. The registry is operated by npm, Inc., a subsidiary of GitHub (which is itself part of Microsoft), but the npm brand persists as its own distinct identity. The voice is terse and developer-direct: lowercase letters, imperative verbs, and runnable commands over marketing copy. Visually, npm is the red rectangle with a lowercase white \"npm\" wordmark — one of the most-recognizable marks in developer tooling.\n",
  "provenance": {
    "source": "https://www.npmjs.com/",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "\"npm\" and the npm logo are trademarks of npm, Inc., a subsidiary of GitHub, Inc., a subsidiary of Microsoft. Brand-atoms' encoding of npm Red (#CB3837) is the canonical value carried by the simple-icons project's \"npm\" entry, matched against the resolved fill of the red-square mark used across npmjs.com.\n",
    "importedDate": "2026-05-19",
    "notes": "npmjs.com does not publish a formal public brand-guidelines page; the rules below are encoded against the de facto identity (lowercase wordmark inside the red square, Microsoft Corporate Trademarks and Service Marks Guidelines that cover npm as a Microsoft-family mark, and the npm, Inc. terms-of-service trademark notices). The \"npm\" name is intentionally lowercase per long-standing convention; do not Title-Case it in headlines or marketing copy.\n"
  },
  "tags": [
    "npm",
    "registry",
    "javascript",
    "nodejs",
    "package-manager",
    "brand",
    "red"
  ],
  "palette": {
    "ref": "npm@1.0.0",
    "swatches": [
      {
        "id": "npm-red",
        "name": "npm Red",
        "value": "#CB3837",
        "description": "Primary brand color — the fill of the red-square npm mark. Source: simple-icons canonical entry for \"npm\".\n",
        "aliases": []
      },
      {
        "id": "npm-red-dark",
        "name": "npm Red Dark",
        "value": "#A02B2A",
        "description": "Pressed / active variant of npm Red for hover states.",
        "aliases": []
      },
      {
        "id": "npm-black",
        "name": "npm Black",
        "value": "#231F20",
        "description": "Wordmark color when rendered outside the red square; the \"npm\" lowercase letterform when set in solid color.\n",
        "aliases": []
      },
      {
        "id": "npm-charcoal",
        "name": "npm Charcoal",
        "value": "#2D2A2B",
        "description": "Elevated dark surface for cards and panels.",
        "aliases": []
      },
      {
        "id": "npm-slate",
        "name": "npm Slate",
        "value": "#4A4344",
        "description": "Body text on light canvas; secondary copy.",
        "aliases": []
      },
      {
        "id": "npm-gray",
        "name": "npm Gray",
        "value": "#8C8385",
        "description": "Tertiary text and quiet UI; muted divider tone.",
        "aliases": []
      },
      {
        "id": "npm-light-gray",
        "name": "npm Light Gray",
        "value": "#E0DEDF",
        "description": "Hairline borders on light canvas.",
        "aliases": []
      },
      {
        "id": "npm-off-white",
        "name": "npm Off-White",
        "value": "#FAF8F8",
        "description": "Subtle layered surface on light canvas.",
        "aliases": []
      },
      {
        "id": "npm-white",
        "name": "npm White",
        "value": "#FFFFFF",
        "description": "Page canvas in light mode; lowercase wordmark fill inside the red square.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "npm-white",
          "surface": "npm-off-white",
          "surface-elevated": "npm-white",
          "text-primary": "npm-black",
          "text-secondary": "npm-slate",
          "text-tertiary": "npm-gray",
          "primary": "npm-red",
          "primary-hover": "npm-red-dark",
          "accent": "npm-red",
          "accent-hover": "npm-red-dark",
          "warning": "npm-red",
          "warning-hover": "npm-red-dark",
          "error": "npm-red-dark",
          "success": "npm-slate",
          "border": "npm-light-gray"
        }
      },
      "dark": {
        "roles": {
          "background": "npm-black",
          "surface": "npm-charcoal",
          "surface-elevated": "npm-charcoal",
          "text-primary": "npm-white",
          "text-secondary": "npm-light-gray",
          "text-tertiary": "npm-gray",
          "primary": "npm-red",
          "primary-hover": "npm-red-dark",
          "accent": "npm-red",
          "accent-hover": "npm-red-dark",
          "warning": "npm-red",
          "warning-hover": "npm-red-dark",
          "error": "npm-red-dark",
          "success": "npm-light-gray",
          "border": "npm-slate"
        }
      }
    }
  },
  "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": "npm-red",
      "on-identity": "npm-white",
      "primary": "npm-red",
      "primary-hover": "npm-red-dark",
      "accent": "npm-red",
      "accent-hover": "npm-red-dark",
      "mark": "npm-red",
      "background": "npm-white",
      "surface": "npm-off-white",
      "text-primary": "npm-black",
      "text-secondary": "npm-slate",
      "error": "npm-red-dark",
      "success": "npm-slate",
      "border": "npm-light-gray"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "enumMembership",
      "target": "wordmark.case",
      "severity": "error",
      "rationale": "The npm wordmark is intentionally lowercase. \"NPM\" and \"Npm\" both misrepresent the mark and conflict with the brand's terse, developer-direct voice. The lowercase convention dates from the project's origin as \"node package manager\" and is preserved across npmjs.com and the CLI.\n",
      "allowed": [
        "lowercase"
      ],
      "forbidden": [
        "uppercase",
        "title-case",
        "small-caps",
        "Npm",
        "NPM"
      ]
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.mark",
      "severity": "error",
      "rationale": "The npm mark is rendered in npm Red (#CB3837). A black, slate, or gray square mark is not a recognized variant; monochrome treatments fall outside the canonical identity expression.\n",
      "allowed": [
        "npm-red"
      ],
      "forbidden": [
        "npm-black",
        "npm-slate",
        "npm-gray"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "The npm mark is the unified red-square + lowercase wordmark combination. Detaching the wordmark, rendering the square without the wordmark, or using an outlined (non-filled) variant all break the mark's recognized expression.\n",
      "treatments": [
        "recolored",
        "rotated",
        "stretched",
        "skewed",
        "drop-shadow",
        "gradient-fill",
        "wordmark-detached-from-square",
        "square-without-wordmark",
        "outlined-without-fill"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "trademark.use",
      "severity": "error",
      "rationale": "As a Microsoft-family mark, \"npm\" is subject to the Microsoft Corporate Trademarks and Service Marks Guidelines: third-party products cannot imply endorsement, cannot substitute \"npm\" as a generic name for any package registry, and cannot prefix \"npm\" onto a product name without prior approval.\n",
      "forbiddenContexts": [
        "implied-endorsement",
        "registry-name-substitution",
        "product-name-prefix-without-approval"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "npm Black (#231F20) on npm White exceeds 14:1 — clears WCAG AA decisively for body text on registry surfaces (package pages, search results, version histories).\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "warning",
      "rationale": "npm Red (#CB3837) on White sits around 4.8:1 — clears WCAG AA for body text and matches the mark fill. Reserve npm Red Dark (#A02B2A) for hover and pressed states; it clears AA with additional headroom (~7:1).\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "recommendation",
      "rationale": "npmjs.com uses a single humanist sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy on package pages, version histories, and security-advisory listings.\n",
      "requires": "body",
      "minSizeRatio": 1.5
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. As the registry of record for the JavaScript ecosystem, npmjs.com is consumed by the entire front-end developer population; AA is the floor.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    }
  ]
}