W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
npm
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/npm/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/npm/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
npm
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by npm
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
npm
A clear hierarchy in npm's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ npm-red #CB3837 accent-hover
→ npm-red-dark #A02B2A background
→ npm-white #FFFFFF border
→ npm-light-gray #E0DEDF error
→ npm-red-dark #A02B2A identity
→ npm-red #CB3837 mark
→ npm-red #CB3837 on-identity
→ npm-white #FFFFFF primary
→ npm-red #CB3837 primary-hover
→ npm-red-dark #A02B2A success
→ npm-slate #4A4344 surface
→ npm-off-white #FAF8F8 text-primary
→ npm-black #231F20 text-secondary
→ npm-slate #4A4344 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from npm)
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 Rules (8 typed constraints)
error · 6 rules
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 rule
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 rule
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.