Nytimes
Long Document
Warm, muted earth tones and generous whitespace breathe quiet, contemplative clarity.




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 | bodyFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| h2 | headingFont | 56px | 400 | 1 | 0 | Aa Bb Cc |
| body | bodyFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | bodyFont | 14px | 400 | 1.36 | 0 | Aa Bb Cc |
| button | bodyFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #bc841c;
--color-surface: #a05e08;
--color-ink: #e5a484;
--color-accent: #678b9b;
--color-detail: #d8c5b9;
}
/* CSS variables exposed by source */
:root {
--color-psyche-stone-200: #ebe9e0;
--color-aeon-red: #971a1d;
--text-2xl: 1.4375rem;
--text-7xl: 4.5rem;
--color-red-900: lab(28.5139% 44.5539 29.0463);
--text-lg: 1.0625rem;
--color-orange-800: lab(37.1566% 46.6433 50.5562);
--text-8xl--line-height: 5.25rem;
--color-psyche-stone-100: #f4f1ea;
--color-psyche-warm-grey-75: #716c6c;
--font-body: "bodyFont", "bodyFont Fallback", sans-serif;
--text-5xl--line-height: 3.5rem;
--text-base--line-height: 1.625rem;
--color-psyche-blue-100-hover: #005da1;
--color-psyche-stone-400: #d6d4cc;
--color-amber-300: lab(86.4156% 6.13147 78.3961);
--text-lg--line-height: 1.6875rem;
--color-white: #fff;
--color-psyche-green-100: #005645;
--radius-sm: .25rem;
--color-psyche-green-100-hover: #00705a;
--font-weight-bold: 700;
--color-psyche-red-25: #ebdedc;
--font-article-main: "articleFont", "articleFont Fallback", serif;
--text-6xl: 3.5rem;
--color-sophia-red: #f74d41;
--text-xs--line-height: 1rem;
--radius-md: .375rem;
--color-psyche-blue-25: #dae4eb;
--text-7xl--line-height: 5rem;
--radius-lg: .5rem;
--text-xl: 1.1875rem;
--color-orange-300: lab(80.8059% 21.7313 50.4455);
--font-heading: "headingFont", "headingFont Fallback", serif;
--color-psyche-blue-100: #004f88;
--color-psyche-warm-grey-100: #443d3d;
--text-2xl--line-height: 2rem;
--color-psyche-red-100: #971005;
--spacing: .25rem;
--font-meta: "metaFont", "metaFont Fallback", monospace;
--text-8xl: 5rem;
--text-xl--line-height: 1.75rem;
--font-weight-semibold: 600;
--color-psyche-stone-300: #e0ded6;
--color-red-700: lab(40.4273% 67.2623 53.7441);
--text-sm: .875rem;
--text-4xl: 2.5rem;
--color-psyche-green-25: #ddebe7;
--text-sm--line-height: 1.1875rem;
--color-psyche-yellow-25: #f0dece;
--color-gray-200: lab(91.6229% -.159115 -2.26791);
--text-3xl--line-height: 2.5rem;
--text-5xl: 3rem;
--text-xs: .75rem;
--color-black: #000;
--text-3xl: 2rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--radius-xs: .125rem;
--color-psyche-stone-500: #cccac2;
}Drop-in prompt
Build a landing page in the visual style of Psyche.
Reference design system (extracted from the live site):
- Palette: #bc841c, #a05e08, #e5a484, #678b9b, #d8c5b9
- Typefaces: bodyFont, headingFont
- Macrostructure: Long Document
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/psyche-co