Builder — Blog
Specimen
Deep charcoal expanse, crisp sans-serif clarity, a minimalist, technically focused presence.




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 |
|---|---|---|---|---|---|---|
| h3 | Source Sans Pro | 15px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | Source Sans Pro | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e52b44;
--color-surface: #760e1c;
--color-ink: #f46c94;
--color-accent: #7c7c7c;
--color-detail: #c4c4c4;
}
/* CSS variables exposed by source */
:root {
--primary-color: #ea2845;
--background-3dp: #e8e8e8;
--primary-2dp: #da2640;
--background: #fdfdfd;
--color: #404040;
--background-4dp: #efefef;
--primary-3dp: #db2840;
--primary-accent-color: #ea2868;
--primary-5dp: #ff0023;
--primary-accent: #ea2868;
--primary-gradient: linear-gradient(90deg, #ea2845 0%, #ea2868 100%);
--primary-1dp: #d71e38;
--background-5dp: #cccccc;
--primary: #ea2845;
--background-1dp: #f7f7f7;
--background-2dp: #f0f2f3;
--primary-4dp: #e40020;
--color-1dp: #151515;
--company-logo-filter: grayscale(1);
--docsearch-primary-color: #ed2945;
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular";
--warning-color: #ed8529;
--docsearch-icon-stroke-width: 1.4;
--company-filter-hover: grayscale(0%);
--fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp";
--docsearch-footer-background: #fff;
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--docsearch-hit-height: 56px;
--docsearch-modal-height: 600px;
--error: #ed2945;
--company-filter: grayscale(100%);
--warning: #ffb36f;
--docsearch-spacing: 12px;
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;
--info: #0894e2;
--docsearch-logo-color: #ed2945;
--info-color: #0894e2;
--docsearch-footer-height: 44px;
--menu-color: #151515;
--docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
--error-background: #f9eff1;
--docsearch-hit-active-color: #fff;
--inline-code-color: #2876d2;
--code-background: #1d1d1d;
--fa-font-light: normal 300 1em/1 "Font Awesome 6 Light";
--warning-background: #fff5ec;
--docsearch-text-color: #1c1e21;
--docsearch-key-pressed-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);
--docsearch-searchbox-height: 56px;
--fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
--fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin";
--docsearch-searchbox-focus-background: transparent;
--docsearch-modal-width: 560px;
--info-background: rgba(8, 148, 226, .038);
--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12);
--fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";
--header-background: #151515;
--docsearch-hit-background: #fff;
--company-logo-opacity: .5;
}Drop-in prompt
Build a landing page in the visual style of Docs Nestjs.
Reference design system (extracted from the live site):
- Palette: #e52b44, #760e1c, #f46c94, #7c7c7c, #c4c4c4
- Typefaces: Source Sans Pro, Arial
- 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/docs-nestjs-com