Arweave
Specimen
Deep charcoal grid, stark sans-serif, electric orange accents; precise, powerful, code-focused.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | OPEN_SANS | 48px | 600 | 1.33 | -0.96px | Aa Bb Cc |
| body | OPEN_SANS | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | OPEN_SANS | 12px | 600 | 1.33 | 0 | Aa Bb Cc |
| button | OPEN_SANS | 18px | 400 | 1.56 | 0 | Aa Bb Cc |
Max content width 1216px
:root {
--color-dominant: #f4841e;
--color-surface: #0c141c;
--color-ink: #f7c295;
--color-accent: #6a9a63;
--color-detail: #d8a4d4;
}
/* CSS variables exposed by source */
:root {
--color-neutral-100: #f6f7f9;
--text-2xl: 1.5rem;
--text-lg: 1.125rem;
--color-neutral-600: #929fa5;
--font-ibm-plex-mono: "IBM_PLEX_MONO", "IBM_PLEX_MONO Fallback";
--color-neutral-500: #b1bcc2;
--color-neutral-300: #d9e1e4;
--color-brand-200: #c5e5b4;
--color-brand-600: #417e38;
--text-5xl--line-height: 1;
--text-2xl--line-height: 1.33333;
--text-base--line-height: 1.5;
--spacing: .25rem;
--color-neutral-200: #e9edf0;
--color-shadow: #101828;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-brand-400: #84ba64;
--text-xl--line-height: 1.4;
--font-weight-semibold: 600;
--color-brand-900: #1a3f1d;
--text-sm: .875rem;
--color-pulse-300: #ddeaf814;
--font-open-sans: "OPEN_SANS", "OPEN_SANS Fallback";
--text-lg--line-height: 1.55556;
--color-white: #fff;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--text-4xl: 2.25rem;
--color-pulse-100: #0000330f;
--color-gray-200: lab(91.6229% -.159115 -2.26791);
--font-weight-regular: 400;
--text-3xl--line-height: 1.2;
--text-5xl: 3rem;
--color-neutral-950: #0d121c;
--text-xs: .75rem;
--color-black: #000;
--text-xs--line-height: 1.33333;
--text-sm--line-height: 1.42857;
--font-weight-medium: 500;
--color-neutral-700: #6e7b83;
--color-neutral-400: #cbd4d9;
--text-3xl: 1.875rem;
--radius-xs: .125rem;
--color-pulse-200: #00002d17;
--color-neutral-800: #556066;
--radius-md: .375rem;
--color-neutral-900: #2c3437;
--text-xl: 1.25rem;
--text-4xl--line-height: 1.11111;
--color-pulse-400: #d3edf81d;
--text-base: 1rem;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--twoslash-tag-bg: #3772cf20;
--header-height: calc(.25rem*16);
--tw-ring-shadow: 0 0 #0000;
--twoslash-docs-font: sans-serif;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--twoslash-warn-bg: #c37d0d20;
--twoslash-docs-color: #888;
}Drop-in prompt
Build a landing page in the visual style of Nodejs.
Reference design system (extracted from the live site):
- Palette: #f4841e, #0c141c, #f7c295, #6a9a63, #d8a4d4
- Typefaces: OPEN_SANS
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/nodejs-org--en-about