Claude Code
Cursor
Codex
GitHub Copilot
GrammarlyBrand
DESIGN.md · measured October 21, 2026
Node.js design system
Dark interface measured from nodejs.org: OPEN SANS type, dark orange accents, tonal surfaces and 4px corners.
- Background
- #0D121C
- Primary
- #AE5F00
- Type
- OPEN SANS
- Corners
- 4px
From nodejs.org ↗ · 279 elements at 1440×900 and 401×868 · Independent analysis, not affiliated with Node.js
Node.js colors
14 roles measured on the page, grouped by where each color is used.
Surfaces
Cool Charcoal
#0D121CbackgroundPage background · 4×Cool Graphite
#2C3437surface-container-lowRaised areas one step from the page · 4×Dark Green 10%
#417E381AoverlayTranslucent fill for cards and controls · 1×Text
White
#FFFFFFon-surface · --tw-ring-offset-colorPrimary text and headings · 12×Cool Mist
#ECEFF4on-surface-variantSecondary text · 29×Cool Mist
#D8DEE9on-surface-mutedMuted text and metadata · 15×Cool Slate
#6E7B83on-surface-subtleSubtle text and placeholders · 11×White
#FFFFFFon-primaryText and icons on primaryAccents
Dark Orange
#AE5F00primaryBrand color in the header · 1×Green
#84BA64secondary · --color-brand-400Brand accent (CSS variable) · 49×Dark Green
#417E38tertiary · --color-brand-600Brand accent (CSS variable) · 12×Borders
Cool Graphite
#2C3437outlineBorders and dividers · 12×Dark Green 30%
#417E384Doutline-variantSecondary dividers · 1×Status
Light Amber
#EBCB8BwarningWarnings and highlights · 1×Gradients
Node.js fonts
2 families.
AaOPEN SANSWeights 400, 600OPEN_SANS, OPEN_SANS Fallback
AaSFMono-RegularMonospace · Weights 400SFMono-Regular, Menlo, Consolas, Liberation Mono
headline-displayPage title (h1)Node.js48px · 600 · 1.33 · -0.02em
mobile 36px
mobile 36px
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 400 · 1.56
body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 600 · 1.5
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 600 · 1.43
codeCode and technical valuesconst ready = true;14px · 400 · 1.38
Contrast
Text on #0D121C
AaAAA
18.7:1AaAAA
16.3:1AaAAA
13.9:1AaLarge only
4.3:1Spacing
No strict grid · 81% are multiples of 4px
xs4pxsm8pxmd12pxlg18pxgutter8pxmargin32pxcontainer768pxBreakpoints: 896px
Shapes
Corner radii, most used first.
sm4px · 96×
lg8px · 40×
md6px · 16×
Depth
Inset
Shadow
Components
Rebuilt from the measured CSS.
v24.22.0 Latest LTS
Copy to clipboard
Start typing... ⌘ K
×
Inline link
Motion
Interface transitions
0.15s0.3scubic-bezier(0.4, 0, 0.2, 1)ease-out
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #0D121C for the page and lift surfaces in small steps: #2C3437.
- Keep text in 4 levels: #FFFFFF, #ECEFF4, #D8DEE9, #6E7B83.
- Use #AE5F00 as the brand accent: header, logo and key highlights.
- Set headlines in OPEN SANS with tight tracking (-0.02em).
- Reuse the measured spacing steps (8px, 12px, 18px).
- Use 4px corners on most elements; larger surfaces also use 8px and 6px.
- Use #6E7B83 for body text; it reaches 4.3:1 on #0D121C. Keep it for large text or metadata.
- Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Introduce new font families beyond OPEN SANS and SFMono-Regular.
- Use #AE5F00 for large backgrounds or body text.
- Make interface transitions slower than 0.3s.
DESIGN.md208 lines
---
version: alpha
name: Node.js
description: "Dark interface measured from nodejs.org: OPEN SANS type, dark orange accents, tonal surfaces and 4px corners."
colors:
background: "#0D121C"
surface: "#0D121C"
on-surface: "#FFFFFF"
on-background: "#FFFFFF"
on-surface-variant: "#ECEFF4"
on-surface-muted: "#D8DEE9"
on-surface-subtle: "#6E7B83"
surface-container-low: "#2C3437"
overlay: "#417E381A"
outline: "#2C3437"
outline-variant: "#417E384D"
primary: "#AE5F00"
on-primary: "#FFFFFF"
secondary: "#84BA64"
tertiary: "#417E38"
warning: "#EBCB8B"
typography:
headline-display:
fontFamily: OPEN SANS
fontSize: 48px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.02em
body-md:
fontFamily: OPEN SANS
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
body-lg:
fontFamily: OPEN SANS
fontSize: 18px
fontWeight: 400
lineHeight: 1.56
body-sm:
fontFamily: OPEN SANS
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
label-md:
fontFamily: OPEN SANS
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
label-sm:
fontFamily: OPEN SANS
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
code:
fontFamily: SFMono-Regular
fontSize: 14px
fontWeight: 400
lineHeight: 1.38
headline-display-mobile:
fontFamily: OPEN SANS
fontSize: 36px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.02em
rounded:
sm: 4px
md: 6px
lg: 8px
spacing:
xs: 4px
sm: 8px
md: 12px
lg: 18px
gutter: 8px
margin: 32px
container: 768px
components:
button-primary:
backgroundColor: "{colors.surface-container-low}"
textColor: "#B1BCC2"
typography: "{typography.body-sm}"
padding: 4px 10px 4px 4px
height: 30px
button-secondary:
backgroundColor: "{colors.surface-container-low}"
textColor: "#E9EDF0"
rounded: "{rounded.sm}"
padding: 4px 10px
height: 24px
button-secondary-hover:
backgroundColor: "#556066"
button-outline:
backgroundColor: "{colors.background}"
textColor: "#E9EDF0"
typography: "{typography.body-md}"
rounded: 12px
padding: 6px
height: 42px
button-ghost:
textColor: "{colors.on-surface}"
typography: "{typography.body-lg}"
rounded: 0px
padding: 0px
link:
textColor: "{colors.secondary}"
---
# Node.js Design System
## Overview
Node.js describes itself as: “Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.” The interface is dark, built on **Cool Charcoal (#0D121C)** with **White (#FFFFFF)** text, and **Dark Orange (#AE5F00)** as the main accent.
Type is set in **OPEN SANS**, with **SFMono-Regular** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 4px.
Measured from [nodejs.org](https://nodejs.org/en) on October 21, 2026 at 1440×900 and 401×868 from 279 rendered elements. Values are computed styles from the live page, not the original source files.
## Colors
The palette has 14 roles, plus gradient stops #84BA64, #417E38.
- **Cool Charcoal (#0D121C):** Page background, seen 4 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 12 times. Token `on-surface`, CSS `--tw-ring-offset-color`.
- **Cool Mist (#ECEFF4):** Secondary text, seen 29 times. Token `on-surface-variant`.
- **Cool Mist (#D8DEE9):** Muted text and metadata, seen 15 times. Token `on-surface-muted`.
- **Cool Slate (#6E7B83):** Subtle text and placeholders, seen 11 times. Token `on-surface-subtle`.
- **Cool Graphite (#2C3437):** Raised areas one step from the page, seen 4 times. Token `surface-container-low`.
- **Dark Green 10% (#417E381A):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Cool Graphite (#2C3437):** Borders and dividers, seen 12 times. Token `outline`.
- **Dark Green 30% (#417E384D):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Dark Orange (#AE5F00):** Brand color in the header, seen 1 time. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Green (#84BA64):** Brand accent (CSS variable), seen 49 times. Token `secondary`, CSS `--color-brand-400`.
- **Dark Green (#417E38):** Brand accent (CSS variable), seen 12 times. Token `tertiary`, CSS `--color-brand-600`.
- **Light Amber (#EBCB8B):** Warnings and highlights, seen 1 time. Token `warning`.
## Typography
**OPEN SANS** and **SFMono-Regular** (monospace) share the interface. Fallback stack: `OPEN_SANS, OPEN_SANS Fallback`. Other loaded fonts: OPEN_SANS, OPEN_SANS Fallback.
- **headline-display:** OPEN SANS 48px at weight 600, line height 1.33, tracking -0.02em (36px on mobile). Page title (h1).
- **body-md:** OPEN SANS 16px at weight 400, line height 1.5. Body text.
- **body-lg:** OPEN SANS 18px at weight 400, line height 1.56. Lead paragraphs.
- **body-sm:** OPEN SANS 14px at weight 400, line height 1.43. Secondary and small text.
- **label-md:** OPEN SANS 16px at weight 600, line height 1.5. Buttons, navigation and labels.
- **label-sm:** OPEN SANS 14px at weight 600, line height 1.43. Small labels and badges.
- **code:** SFMono-Regular 14px at weight 400, line height 1.38. Code and technical values.
## Layout
Spacing is mostly on a 4px grid (81% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.
- **Scale:** xs 4px, sm 8px, md 12px, lg 18px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 768px.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 896px.
## Elevation & Depth
Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#2C3437):
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(44, 52, 55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.20991 -0.003893 -0.0339065 / 0.05) 0px 1px 2px 0px`.
## Shapes
Most elements use 4px corners. Measured radii, most used first:
- **sm (4px):** 96 elements.
- **lg (8px):** 40 elements.
- **md (6px):** 16 elements.
## Components
Measured from the rendered page. Token values reference the tokens above.
- **button-primary (“v24.22.0 Latest LTS”):** #2C3437 fill, #B1BCC2 text, 14px/500, 3.35544e+07px radius, padding 4px 10px 4px 4px, border 1px solid #066291.
- **button-secondary (“Copy to clipboard”):** #2C3437 fill, #E9EDF0 text, 12px/500, 4px radius, padding 4px 10px.
- **button-secondary-hover:** background #556066, text #E9EDF0 on hover.
- **button-outline (“Start typing... ⌘ K”):** #0D121C fill, #E9EDF0 text, 16px/400, 12px radius, padding 6px, border 1px solid #2C3437.
- **button-ghost (“×”):** transparent fill, #FFFFFF text, 18px/400, padding 0px.
- **link:** transparent fill, #84BA64 text, padding 0px.
## Do's and Don'ts
- Do use #0D121C for the page and lift surfaces in small steps: #2C3437.
- Do keep text in 4 levels: #FFFFFF, #ECEFF4, #D8DEE9, #6E7B83.
- Do use #AE5F00 as the brand accent: header, logo and key highlights.
- Do set headlines in OPEN SANS with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 12px, 18px).
- Do use 4px corners on most elements; larger surfaces also use 8px and 6px.
- Don't use #6E7B83 for body text; it reaches 4.3:1 on #0D121C. Keep it for large text or metadata.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond OPEN SANS and SFMono-Regular.
- Don't use #AE5F00 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.
## Motion
Interface transitions are quick: 0.15s, 0.3s.
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.
Generated by [Sitepeel](https://sitepeel.dev/design-md/nodejs.org/), the free DESIGN.md generator.
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need more than one page?
Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.
More designs
See all →
FAQ
Questions
What can I build with the Node.js DESIGN.md?
Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, OPEN SANS type, spacing, corners and buttons instead of its own defaults.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Node.js’s official design system?
No. Sitepeel measured it from nodejs.org’s public page on October 21, 2026. It is an independent analysis, not made or approved by Node.js.
Can I use Node.js’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Node.js’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.