Minimal So
Index-First
Loading
Perplexity
Cool, spacious, and precise—monospaced clarity on a hushed, near-black canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #c8c836oklch(80.8% 0.159 109)Dominant
- #68681coklch(50.2% 0.096 109)Surface
- #fcfcf4oklch(98.9% 0.011 107)Ink
- #5a9da0oklch(65.3% 0.068 199)Accent
- #c4bcbcoklch(80.2% 0.009 17)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| body | pplxSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | pplxSans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | pplxSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1240px
:root {
--color-dominant: #c8c836;
--color-surface: #68681c;
--color-ink: #fcfcf4;
--color-accent: #5a9da0;
--color-detail: #c4bcbc;
}
/* CSS variables exposed by source */
:root {
--foreground-subtlest-color: 26.42% .013 93.9 / .07;
--radius-2xs: 2px;
--radius-sm: 6px;
--background-raised-color: 98.93% .003 48.72;
--border-medium: #271a0024;
--accent-bg-strong: #016a71;
--bg-inverse: #27251e;
--font-weight-mono-bold: 700;
--shadow-overlay-border: #0000000d;
--radius-md: 8px;
--radius-lg: 12px;
--font-weight-mono-semibold: 600;
--spacing-lg: 12px;
--font-weight-sans-semibold: 560;
--spacing-8xl: 44px;
--surface-underlay: #f3f0ec;
--font-weight-serif-light: 335;
--foreground-inverse-color: 97.98% .005 78.3;
--font-weight-mono-regular: 400;
--spacing-ml: 10px;
--spacing-xl: 16px;
--border-focus-neutral-color: 26.42% .013 93.9 / .2;
--spacing-3xl: 24px;
--surface-inverse: #27251e;
--size-lg: 32px;
--background-base-color: 97.98% .005 78.3;
--background-underlay-color: 97.98% .005 78.3;
--border-inverse: #fdfbfa;
--font-weight-serif-medium: 535;
--spacing-2xs: 2px;
--font-weight-condensed-medium: 500;
--background-quiet-color: 22.82% .047 83.09 / .07;
--bg-base: #fdfbfa;
--font-weight-sans-light: 320;
--fg-primary: #27251e;
--accent-bg-soft: #016a7117;
--font-weight-medium: 480;
--font-weight-normal: 400;
--bg-raised: #fff;
--spacing-6xl: 36px;
--font-weight-sans-bold: 640;
--size-ml: 24px;
--surface-base: #fdfbfa;
--accent-border-strong: #016a71;
--bg-subtle: #271a0009;
--font-weight-condensed-regular: 400;
--spacing-4xl: 28px;
--foreground-quieter-color: 26.42% .013 93.9 / .4;
--spacing-7xl: 40px;
--spacing-2xl: 20px;
--spacing-sm: 6px;
--foreground-quiet-color: 26.42% .013 93.9 / .65;
--foreground-subtle-color: 26.42% .013 93.9 / .14;
--spacing-9xl: 48px;
--font-weight-bold: 640;
--radius-2xl: 16px;
--font-weight-mono-medium: 500;
--accent-fg-primary: #016a71;
--spacing-one: 1px;
--fg-inverse: #fdfbfa;
}Drop-in prompt
Build a landing page in the visual style of Perplexity.
Reference design system (extracted from the live site):
- Palette: #c8c836, #68681c, #fcfcf4, #5a9da0, #c4bcbc
- Typefaces: pplxSans
- 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/perplexity-ai--enterprise
