npm
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.
9 swatches 15 light roles 15 dark roles
Swatches
npm-red
#CB3837
Primary brand color — the fill of the red-square npm mark. Source: simple-icons canonical entry for "npm".
npm-red-dark
#A02B2A
Pressed / active variant of npm Red for hover states.
npm-black
#231F20
Wordmark color when rendered outside the red square; the "npm" lowercase letterform when set in solid color.
npm-charcoal
#2D2A2B
Elevated dark surface for cards and panels.
npm-slate
#4A4344
Body text on light canvas; secondary copy.
npm-gray
#8C8385
Tertiary text and quiet UI; muted divider tone.
npm-light-gray
#E0DEDF
Hairline borders on light canvas.
npm-off-white
#FAF8F8
Subtle layered surface on light canvas.
npm-white
#FFFFFF
Page canvas in light mode; lowercase wordmark fill inside the red square.
Mode role mappings
Light mode (15 roles)
accent
→ npm-red accent-hover
→ npm-red-dark background
→ npm-white border
→ npm-light-gray error
→ npm-red-dark primary
→ npm-red primary-hover
→ npm-red-dark success
→ npm-slate surface
→ npm-off-white surface-elevated
→ npm-white text-primary
→ npm-black text-secondary
→ npm-slate text-tertiary
→ npm-gray warning
→ npm-red warning-hover
→ npm-red-dark Dark mode (15 roles)
accent
→ npm-red accent-hover
→ npm-red-dark background
→ npm-black border
→ npm-slate error
→ npm-red-dark primary
→ npm-red primary-hover
→ npm-red-dark success
→ npm-light-gray surface
→ npm-charcoal surface-elevated
→ npm-charcoal text-primary
→ npm-white text-secondary
→ npm-light-gray text-tertiary
→ npm-gray warning
→ npm-red warning-hover
→ npm-red-dark Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/develop/data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- "npm" and the npm logo are trademarks of npm, Inc., a subsidiary of GitHub (Microsoft). Brand-atoms' encoding of npm Red cross-references the simple-icons project's published canonical value (title: "npm", hex: "CB3837") for the npm wordmark mark.
- Imported
-
2026-05-19 - Notes
- The npmjs.com site does not publish a public brand-color page; the #CB3837 value is the long-stable canonical for the npm red-square mark and is the value carried by the simple-icons project. The lowercase wordmark inside a red rectangle is the entire mark — no separate icon, no monogram. The npm registry is light-first; this palette encodes a sensible dark-mode inversion for surfaces that need it.