Confluent — About
Feature Stack
Loading
Pnpm
Warm, muted earth tones, crisp geometric type, open and functional spatial arrangement.
Click any value to copy. Roles are suggestions, not gospel.
- #f02927oklch(61.5% 0.231 28)Dominant
- #985013oklch(50.9% 0.118 54)Surface
- #fab870oklch(82.9% 0.117 67)Ink
- #9b7f5coklch(61.4% 0.060 73)Accent
- #d7caacoklch(84.2% 0.043 87)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 40px | 700 | 1.4 | -1.2px | Aa Bb Cc |
| h2 | Inter | 20px | 700 | 1.2 | 0 | Aa Bb Cc |
| h3 | Inter | 20px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.65 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 24px | 700 | 0 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f02927;
--color-surface: #985013;
--color-ink: #fab870;
--color-accent: #9b7f5c;
--color-detail: #d7caac;
}
/* CSS variables exposed by source */
:root {
--shadow-pop: 0 4px 12px rgba(0,0,0,.06);
--ifm-menu-link-padding-vertical: .375rem;
--ifm-spacing-vertical: 1rem;
--ifm-color-primary-contrast-background: #ebf2fc;
--ifm-pre-line-height: 1.45;
--docsearch-background-color: #f5f5fa;
--ifm-global-border-width: 1px;
--ifm-card-horizontal-spacing: 1rem;
--ifm-avatar-photo-size: 3rem;
--ifm-h2-font-size: 1.5rem;
--ifm-font-weight-semibold: 500;
--ifm-color-primary-lighter: #f8a648;
--ifm-scrollbar-track-background-color: #f1f1f1;
--ifm-color-success-darker: #008b00;
--ifm-alert-padding-horizontal: 1rem;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-success-contrast-foreground: #003100;
--ifm-blockquote-color: #444950;
--ifm-blockquote-font-size: 100%;
--docsearch-icon-stroke-width: 1.4;
--ifm-font-size-base: 100%;
--ifm-navbar-link-color: #1c1e21;
--ifm-breadcrumb-padding-vertical: .4rem;
--ifm-heading-font-family: ui-sans-serif,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--ifm-breadcrumb-separator-size-multiplier: 1.25;
--ifm-link-hover-color: #f69220;
--ifm-color-primary-dark: #f0850a;
--ifm-background-surface-color: #fff;
--ifm-tabs-padding-vertical: 1rem;
--docsearch-footer-background: rgba(255,255,255,.65);
--ifm-font-weight-base: 400;
--ifm-font-weight-normal: 400;
--ifm-color-secondary-contrast-background: #fdfdfe;
--ifm-color-emphasis-400: #ccd0d5;
--ifm-color-success-lightest: #80d280;
--ifm-navbar-item-padding-horizontal: .75rem;
--docsearch-hit-height: 56px;
--ifm-pre-border-radius: .4rem;
--ifm-color-white: #fff;
--docsearch-modal-height: 600px;
--ifm-list-margin: 1rem;
--ifm-color-primary-contrast-foreground: #102445;
--ifm-badge-border-width: 1px;
--docsearch-spacing: 12px;
--ifm-color-danger-lightest: #fd9c9f;
--ifm-color-warning-dark: #e6a700;
--ifm-color-danger-lighter: #fb7478;
--ifm-alert-color: #1c1e21;
--ifm-color-gray-900: #1c1e21;
--ifm-color-danger-light: #fb565b;
--docusaurus-collapse-button-bg: transparent;
--docsearch-key-background: #f5f5fa;
--ifm-lightest-value: 50%;
--ifm-color-primary-darkest: #bb6708;
--ifm-pills-spacing: .125rem;
--ifm-font-color-base: #1c1e21;
--ifm-breadcrumb-item-background-active: rgba(0,0,0,.05);
--ifm-color-success-light: #26b226;
--ifm-color-emphasis-900: #1c1e21;
--ifm-color-emphasis-500: #bec3c9;
}Drop-in prompt
Build a landing page in the visual style of Pnpm.
Reference design system (extracted from the live site):
- Palette: #f02927, #985013, #fab870, #9b7f5c, #d7caac
- Typefaces: Inter, ui-sans-serif
- Macrostructure: Feature Stack
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/pnpm-io
