{
  "$description": "Brand: npm (npm@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette npm@1.0.0",
      "npm-red": {
        "$value": "#CB3837",
        "$type": "color",
        "$description": "Primary brand color — the fill of the red-square npm mark. Source: simple-icons canonical entry for \"npm\".\n"
      },
      "npm-red-dark": {
        "$value": "#A02B2A",
        "$type": "color",
        "$description": "Pressed / active variant of npm Red for hover states."
      },
      "npm-black": {
        "$value": "#231F20",
        "$type": "color",
        "$description": "Wordmark color when rendered outside the red square; the \"npm\" lowercase letterform when set in solid color.\n"
      },
      "npm-charcoal": {
        "$value": "#2D2A2B",
        "$type": "color",
        "$description": "Elevated dark surface for cards and panels."
      },
      "npm-slate": {
        "$value": "#4A4344",
        "$type": "color",
        "$description": "Body text on light canvas; secondary copy."
      },
      "npm-gray": {
        "$value": "#8C8385",
        "$type": "color",
        "$description": "Tertiary text and quiet UI; muted divider tone."
      },
      "npm-light-gray": {
        "$value": "#E0DEDF",
        "$type": "color",
        "$description": "Hairline borders on light canvas."
      },
      "npm-off-white": {
        "$value": "#FAF8F8",
        "$type": "color",
        "$description": "Subtle layered surface on light canvas."
      },
      "npm-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Page canvas in light mode; lowercase wordmark fill inside the red square."
      }
    }
  },
  "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": "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"
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.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"
    },
    "com.brand-atoms.references": {
      "palette": "npm@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "source-code-pro@1.0.0"
      }
    }
  }
}