Perplexity
Index-First
Crisp, cool grayscale, clean geometric forms, expansive digital stillness.




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 | Geist Variable | 48px | 600 | 1 | -1.2px | Aa Bb Cc |
| h2 | Geist Variable | 14px | 500 | 1.43 | 0.35px | Aa Bb Cc |
| h3 | Geist Variable | 20px | 600 | 1.4 | 0 | Aa Bb Cc |
| body | Geist Variable | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Geist Variable | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Geist Variable | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fcdc24;
--color-surface: #826f01;
--color-ink: #fcec84;
--color-accent: #8b8b8c;
--color-detail: #9ca4bc;
}
/* CSS variables exposed by source */
:root {
--border: color-mix(in oklab, #000 10%, transparent);
--color-zinc-100: oklch(96.7% .001 286.375);
--color-amber-400: oklch(82.8% .189 84.429);
--text-2xl: 1.5rem;
--color-zinc-200: oklch(92% .004 286.32);
--text-lg: 1.125rem;
--primary-foreground: oklch(98.5% 0 0);
--color-blue-700: oklch(48.8% .243 264.376);
--color-amber-600: oklch(66.6% .179 58.318);
--text-5xl--line-height: 1;
--color-emerald-700: oklch(50.8% .118 165.612);
--text-base--line-height: calc(1.5 / 1);
--radius-4xl: 2rem;
--accent-foreground: oklch(21% .006 285.885);
--color-zinc-50: oklch(98.5% 0 0);
--text-lg--line-height: calc(1.75 / 1.125);
--color-red-400: oklch(70.4% .191 22.216);
--color-white: #fff;
--color-blue-400: oklch(70.7% .165 254.624);
--radius: .625rem;
--color-zinc-950: oklch(14.1% .005 285.823);
--color-red-500: oklch(63.7% .237 25.331);
--color-zinc-700: oklch(37% .013 285.805);
--text-xs--line-height: calc(1 / .75);
--font-geist-mono: "Geist Mono Variable", ui-monospace, monospace;
--radius-2xl: 1rem;
--radius-md: calc(.625rem - 2px);
--text-xl: 1.25rem;
--color-green-600: oklch(62.7% .194 149.214);
--accent: color-mix(in oklab, #000 4%, transparent);
--color-zinc-500: oklch(55.2% .016 285.938);
--color-zinc-900: oklch(21% .006 285.885);
--color-zinc-800: oklch(27.4% .006 286.033);
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: oklch(21% .006 285.885);
--color-amber-500: oklch(76.9% .188 70.08);
--spacing: .25rem;
--background: #fff;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-red-700: oklch(50.5% .213 27.518);
--color-emerald-500: oklch(69.6% .17 162.48);
--color-blue-500: oklch(62.3% .214 259.815);
--color-zinc-400: oklch(70.5% .015 286.067);
--color-amber-700: oklch(55.5% .163 48.998);
--color-zinc-600: oklch(44.2% .017 285.786);
--text-4xl: 2.25rem;
--color-amber-950: oklch(27.9% .077 45.635);
--font-geist-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
--text-sm--line-height: calc(1.25 / .875);
--color-border: color-mix(in oklab, #000 10%, transparent);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--text-xs: .75rem;
--color-black: #000;
--font-weight-medium: 500;
--font-weight-normal: 400;
--color-emerald-400: oklch(76.5% .177 163.223);
}Drop-in prompt
Build a landing page in the visual style of Minimal So — Changelog.
Reference design system (extracted from the live site):
- Palette: #fcdc24, #826f01, #fcec84, #8b8b8c, #9ca4bc
- Typefaces: Geist Variable
- Macrostructure: Index-First
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/minimal-so--changelog