Parceljs
Specimen
Deep indigo expanse, crisp sans-serif clarity, structured digital geometry.




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 | Roobert | 80px | 300 | 1 | -2.4px | Aa Bb Cc |
| h2 | Roobert | 64px | 300 | 1.05 | -1.28px | Aa Bb Cc |
| h3 | Roobert | 32px | 400 | 1.15 | -0.8px | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Helvetica | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #8c04fc;
--color-surface: #270c42;
--color-ink: #a531ee;
--color-accent: #9b6562;
--color-detail: #b8a1bf;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: #d1b8ff;
--font-neue-montreal: "PPNeueMontreal","PPNeueMontreal Fallback";
--color-green-25: #f5fff9;
--color-pink-500: #e615f2;
--color-orange-600: #6f4116;
--color-red-900: #210305;
--color-orange-800: #1f1105;
--color-blue-700: #002c6f;
--color-purple-800: #2a0052;
--color-orange-900: #0d0702;
--color-orange-50: #faefe5;
--color-blue-300: #70c5ff;
--color-text-secondary: #4d4d4d;
--color-gray-300: #b3b3b3;
--color-yellow-400: #c29800;
--font-neue-montreal-mono: "PPNeueMontrealMono","PPNeueMontrealMono Fallback";
--color-gray-500: #6b6b6b;
--color-green-500: #009e7a;
--color-white: #ffffff;
--color-gray-400: #8f8f8f;
--color-blue-400: #33acff;
--color-pink-50: #fce2fe;
--color-yellow-300: #e0bf00;
--color-gray-100: #e3e3e3;
--color-orange-25: #fdfaf6;
--color-purple-600: #8a05ff;
--color-lime-200: #96f64c;
--color-green-900: #001913;
--color-blue-800: #00183e;
--color-pink-100: #fac7ff;
--color-blue-100: #c2eaff;
--color-green-600: #006d4c;
--color-gray-25: #fafafa;
--color-text-faint: #6b6b6b;
--color-red-300: #f0989e;
--color-orange-500: #a25e20;
--color-lime-800: #0b1801;
--color-purple-25: #fbfaff;
--color-pink-600: #b500bf;
--color-pink-200: #f79ffe;
--color-green-400: #00db7c;
--color-yellow-50: #fffbc2;
--color-gray-600: #4d4d4d;
--color-orange-100: #f5dfcc;
--color-purple-400: #aa77fd;
--color-yellow-200: #ecd60e;
--color-blue-600: #005e9e;
--color-green-200: #5cffb8;
--color-red-600: #af1d27;
--color-border: #e3e3e3;
--color-blue-50: #e0f4ff;
--color-blue-25: #f5fbff;
--color-black: #000000;
--color-text-primary--inverted: #ffffff;
--color-background-secondary: #fafafa;
--color-orange-200: #eabe95;
--color-purple-500: #9b52fb;
--color-pink-25: #fef5ff;
--color-yellow-25: #fffeeb;
--color-pink-300: #f680ff;
}Drop-in prompt
Build a landing page in the visual style of Render.
Reference design system (extracted from the live site):
- Palette: #8c04fc, #270c42, #a531ee, #9b6562, #b8a1bf
- Typefaces: Roobert, ui-sans-serif, Helvetica
- 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/render-com--auth