Nytimes
Long Document
Cool, geometric blue-grey forms float on stark white, a precise, data-driven 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 | arizona | 16px | 400 | 1.8 | 0 | Aa Bb Cc |
| h3 | arizona | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.8 | 0 | Aa Bb Cc |
| caption | arizona | 14px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | departureMono | 12px | 400 | 1.33 | 0 | Aa Bb Cc |
Max content width 1536px
:root {
--color-dominant: #0c3cfc;
--color-surface: #7c94fc;
--color-ink: #011b82;
--color-accent: #688ca8;
--color-detail: #ced8ba;
}
/* CSS variables exposed by source */
:root {
--color-zinc-100: oklch(96.7% .001 286.375);
--text-2xl: 1.5rem;
--font-scale: 1;
--color-cobalt-600: oklch(50.58% .2886 264.84);
--color-cobalt-400: oklch(63.79% .1899 269.89);
--color-yellow-600: oklch(68.1% .162 75.834);
--color-cobalt-200: oklch(83.76% .0774 273.32);
--text-lg: 1.125rem;
--color-cobalt-300: oklch(76.12% .1218 272.4);
--color-blue-700: oklch(48.8% .243 264.376);
--color-cobalt-100: oklch(94.22% .0275 274.66);
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5/1);
--color-gray-300: oklch(87.2% .01 258.338);
--color-amber-300: oklch(87.9% .169 91.605);
--color-gray-500: oklch(55.1% .027 264.364);
--color-stone-950: oklch(14.7% .004 49.25);
--color-emerald-600: oklch(59.6% .145 163.225);
--text-lg--line-height: calc(1.75/1.125);
--color-white: #fff;
--radius-sm: .25rem;
--font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-red-500: oklch(63.7% .237 25.331);
--color-rose-400: oklch(71.2% .194 13.428);
--text-xs--line-height: calc(1/.75);
--radius-md: .375rem;
--text-xl: 1.25rem;
--color-yellow-100: oklch(97.3% .071 103.193);
--color-cobalt-700: oklch(47.65% .3102 264.11);
--color-green-600: oklch(62.7% .194 149.214);
--color-cobalt-50: oklch(97.05% .0054 274.97);
--color-sky-300: oklch(82.8% .111 230.318);
--color-stone-500: oklch(55.3% .013 58.071);
--color-sky-400: oklch(74.6% .16 232.661);
--text-2xl--line-height: calc(2/1.5);
--color-amber-500: oklch(76.9% .188 70.08);
--spacing: .25rem;
--background: #fbfbfb;
--color-stone-600: oklch(44.4% .011 73.639);
--text-xl--line-height: calc(1.75/1.25);
--font-weight-semibold: 600;
--color-rose-500: oklch(64.5% .246 16.439);
--color-red-700: oklch(50.5% .213 27.518);
--text-sm: .875rem;
--color-emerald-500: oklch(69.6% .17 162.48);
--color-blue-500: oklch(62.3% .214 259.815);
--color-gray-900: oklch(21% .034 264.665);
--color-amber-700: oklch(55.5% .163 48.998);
--color-cobalt-500: oklch(57.66% .2443 267.62);
--color-gray-700: oklch(37.3% .034 259.733);
--color-gray-600: oklch(44.6% .03 256.802);
--color-yellow-200: oklch(94.5% .129 101.54);
--color-blue-600: oklch(54.6% .245 262.881);
--text-4xl: 2.25rem;
--color-stone-200: oklch(92.3% .003 48.717);
--color-red-600: oklch(57.7% .245 27.325);
--text-sm--line-height: calc(1.25/.875);
--text-5xl: 3rem;
}Drop-in prompt
Build a landing page in the visual style of Making Software.
Reference design system (extracted from the live site):
- Palette: #0c3cfc, #7c94fc, #011b82, #688ca8, #ced8ba
- Typefaces: arizona, ui-sans-serif, departureMono
- 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/makingsoftware-com