Algolia
Feature Stack
Loading
Polypane
Deep charcoal expanse, crisp sans-serif lines, and luminous teal accents hum with focused precision.
Click any value to copy. Roles are suggestions, not gospel.
- #3cb4fcoklch(73.6% 0.147 240)Dominant
- #1db5a2oklch(69.6% 0.120 182)Surface
- #8ac8e7oklch(80.2% 0.077 231)Ink
- #5ea980oklch(67.5% 0.097 158)Accent
- #95c3b7oklch(78.1% 0.052 177)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter var | 60px | 900 | 0.98 | 0 | Aa Bb Cc |
| h2 | Inter var | 44px | 900 | 1.25 | -0.66px | Aa Bb Cc |
| h3 | Inter var | 13px | 700 | 1.75 | 0 | Aa Bb Cc |
| body | Inter var | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
| caption | Inter var | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Inter var | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #3cb4fc;
--color-surface: #1db5a2;
--color-ink: #8ac8e7;
--color-accent: #5ea980;
--color-detail: #95c3b7;
}
/* CSS variables exposed by source */
:root {
--docsearch-hit-shadow: none;
--docsearch-footer-background: #fff;
--docsearch-footer-shadow: none;
--docsearch-footer-height: 44px;
--docsearch-key-gradient: none;
--docsearch-hit-active-color: #fff;
--docsearch-hit-height: 44px;
--docsearch-primary-color: #616161;
--docsearch-hit-background: #fafafa;
--docsearch-muted-color: #747576;
--docsearch-container-background: rgba(0,0,0,0.7490196078431373);
--docsearch-modal-height: 600px;
--docsearch-text-color: #333338;
--docsearch-searchbox-shadow: none;
--docsearch-searchbox-background: #fff;
--docsearch-searchbox-height: 56px;
--docsearch-spacing: 16px;
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;
--docsearch-hit-color: #444950;
--docsearch-icon-stroke-width: 2;
--docsearch-key-shadow: none;
--docsearch-modal-background: #fff;
--docsearch-highlight-color: #2c82ad;
--docsearch-searchbox-focus-background: #fff;
--docsearch-logo-color: #333338;
--docsearch-modal-width: 560px;
}Drop-in prompt
Build a landing page in the visual style of Polypane.
Reference design system (extracted from the live site):
- Palette: #3cb4fc, #1db5a2, #8ac8e7, #5ea980, #95c3b7
- Typefaces: Inter var
- 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/polypane-app
