# npm

> `npm@1.0.0`

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.


**Tags:** `npm`, `registry`, `javascript`, `nodejs`, `package-manager`, `brand`, `red`

## Atoms

### Palette

**npm** · `npm@1.0.0` · Proprietary — All Rights Reserved

> npm brand palette anchored on npm Red (#CB3837) — the fill of the iconic red-square mark that wraps the lowercase "npm" wordmark — paired with black, white, and a quiet grey supporting scale. The registry's visual identity is developer-direct: a red rectangle, a lowercase wordmark, and no decoration. npm is owned by GitHub (a Microsoft subsidiary) but retains a distinct mark from both parents. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Source Code Pro** `(source-code-pro@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `npm-red` | npm Red | `#CB3837` |
| `npm-red-dark` | npm Red Dark | `#A02B2A` |
| `npm-black` | npm Black | `#231F20` |
| `npm-charcoal` | npm Charcoal | `#2D2A2B` |
| `npm-slate` | npm Slate | `#4A4344` |
| `npm-gray` | npm Gray | `#8C8385` |
| `npm-light-gray` | npm Light Gray | `#E0DEDF` |
| `npm-off-white` | npm Off-White | `#FAF8F8` |
| `npm-white` | npm White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `npm-white` | `#FFFFFF` |
| `surface` | `npm-off-white` | `#FAF8F8` |
| `surface-elevated` | `npm-white` | `#FFFFFF` |
| `text-primary` | `npm-black` | `#231F20` |
| `text-secondary` | `npm-slate` | `#4A4344` |
| `text-tertiary` | `npm-gray` | `#8C8385` |
| `primary` | `npm-red` | `#CB3837` |
| `primary-hover` | `npm-red-dark` | `#A02B2A` |
| `accent` | `npm-red` | `#CB3837` |
| `accent-hover` | `npm-red-dark` | `#A02B2A` |
| `warning` | `npm-red` | `#CB3837` |
| `warning-hover` | `npm-red-dark` | `#A02B2A` |
| `error` | `npm-red-dark` | `#A02B2A` |
| `success` | `npm-slate` | `#4A4344` |
| `border` | `npm-light-gray` | `#E0DEDF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `npm-black` | `#231F20` |
| `surface` | `npm-charcoal` | `#2D2A2B` |
| `surface-elevated` | `npm-charcoal` | `#2D2A2B` |
| `text-primary` | `npm-white` | `#FFFFFF` |
| `text-secondary` | `npm-light-gray` | `#E0DEDF` |
| `text-tertiary` | `npm-gray` | `#8C8385` |
| `primary` | `npm-red` | `#CB3837` |
| `primary-hover` | `npm-red-dark` | `#A02B2A` |
| `accent` | `npm-red` | `#CB3837` |
| `accent-hover` | `npm-red-dark` | `#A02B2A` |
| `warning` | `npm-red` | `#CB3837` |
| `warning-hover` | `npm-red-dark` | `#A02B2A` |
| `error` | `npm-red-dark` | `#A02B2A` |
| `success` | `npm-light-gray` | `#E0DEDF` |
| `border` | `npm-slate` | `#4A4344` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `npm-red` | `#CB3837` |
| `on-identity` | `npm-white` | `#FFFFFF` |
| `primary` | `npm-red` | `#CB3837` |
| `primary-hover` | `npm-red-dark` | `#A02B2A` |
| `accent` | `npm-red` | `#CB3837` |
| `accent-hover` | `npm-red-dark` | `#A02B2A` |
| `mark` | `npm-red` | `#CB3837` |
| `background` | `npm-white` | `#FFFFFF` |
| `surface` | `npm-off-white` | `#FAF8F8` |
| `text-primary` | `npm-black` | `#231F20` |
| `text-secondary` | `npm-slate` | `#4A4344` |
| `error` | `npm-red-dark` | `#A02B2A` |
| `success` | `npm-slate` | `#4A4344` |
| `border` | `npm-light-gray` | `#E0DEDF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `enumMembership` → `wordmark.case`

- **allowed:** lowercase
- **forbidden:** uppercase, title-case, small-caps, Npm, NPM

> 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. 

#### `colorChoice` → `roles.colors.mark`

- **allowed:** npm-red
- **forbidden:** npm-black, npm-slate, npm-gray

> 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. 

#### `forbiddenTreatment` → `logo`

- **treatments:** recolored, rotated, stretched, skewed, drop-shadow, gradient-fill, wordmark-detached-from-square, square-without-wordmark, outlined-without-fill

> 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. 

#### `contextRestriction` → `trademark.use`

- **forbiddenContexts:** implied-endorsement, registry-name-substitution, product-name-prefix-without-approval

> 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. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> 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). 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> 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. 

### ⚠️ warning (1)

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> 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). 

### 💡 recommendation (1)

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> 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. 

## 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. 
- **Imported:** `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. 

---

*Generated by the brand-atoms converter. Source: `npm@1.0.0` from the encyclopedia.*