Algolia
Feature Stack
Deep charcoal expanse, sharp geometric type, flickering magenta accents pulse with data.




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 | system-ui | 53px | 800 | 1 | 0 | Aa Bb Cc |
| h2 | system-ui | 24px | 500 | 1.38 | 0 | Aa Bb Cc |
| h3 | system-ui | 24px | 700 | 1.33 | 0 | Aa Bb Cc |
| body | system-ui | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | system-ui | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | system-ui | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1280px
:root {
--color-dominant: #ba6091;
--color-surface: #5c2c44;
--color-ink: #f373b4;
--color-accent: #a46c6c;
--color-detail: #d9b3c6;
}
/* CSS variables exposed by source */
:root {
--inkeep-zIndices-skipLink: 1600;
--inkeep-colors-inkeepPrimary-medium: #f267ad;
--inkeep-lineHeights-shorter: 1.25;
--inkeep-colors-telegram-900: #003F5E;
--inkeep-fontSizes-sm: 0.875rem;
--inkeep-space-3-5: 0.875rem;
--inkeep-radii-base: 0.25rem;
--inkeep-transition-property-dimensions: width,height;
--inkeep-zIndices-toast: 1700;
--inkeep-colors-purple-800: #44337A;
--inkeep-zIndices-sticky: 1100;
--inkeep-radii-3xl: 1.5rem;
--inkeep-space-80: 20rem;
--inkeep-sizes-2xs: 16rem;
--inkeep-colors-grayAlpha-800: rgba(1, 15, 25, 0.79);
--inkeep-fontSizes-2xs: 0.625rem;
--inkeep-colors-blue-800: #2a4365;
--inkeep-colors-cyan-200: #9DECF9;
--inkeep-colors-teal-900: #1D4044;
--inkeep-colors-whatsapp-200: #90edb3;
--inkeep-colors-linkedin-800: #005E93;
--inkeep-fontWeights-thin: 200;
--inkeep-radii-none: 0;
--inkeep-colors-grayAlpha-100: rgba(22, 56, 90, 0.06);
--inkeep-sizes-32: 8rem;
--inkeep-colors-pink-500: #D53F8C;
--inkeep-space-96: 24rem;
--inkeep-colors-telegram-600: #007AB8;
--inkeep-colors-twitter-800: #136B9E;
--inkeep-colors-gray-900: #11181c;
--inkeep-colors-linkedin-300: #68C7EC;
--inkeep-fontSizes-8xl: 6rem;
--inkeep-colors-inkeepPrimary-lightSubtle: #fcf4f7;
--inkeep-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
--inkeep-lineHeights-base: 1.5;
--inkeep-shadows-boxShadow: none;
--inkeep-colors-red-800: #822727;
--inkeep-colors-red-100: #FED7D7;
--inkeep-fontWeights-bold: 700;
--inkeep-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
--inkeep-fontSizes-5xl: 3rem;
--inkeep-colors-twitter-300: #83CDF7;
--inkeep-sizes-80: 20rem;
--inkeep-colors-green-400: #48BB78;
--inkeep-transition-duration-faster: 100ms;
--inkeep-colors-purple-50: #FAF5FF;
--inkeep-colors-grayDark-800: #282828;
--inkeep-shadows-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
--inkeep-shadows-dark-lg: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px;
--inkeep-radii-2xl: 1rem;
--inkeep-colors-inkeepExpandedPrimary-400: #ff77c6;
--inkeep-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
--inkeep-shadows-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--inkeep-colors-facebook-200: #B7C2DA;
--inkeep-colors-gray-600: #889096;
--inkeep-transition-duration-slow: 300ms;
--inkeep-colors-telegram-400: #47A9DA;
--inkeep-colors-yellow-50: #FFFFF0;
--inkeep-fontWeights-normal: 400;
--inkeep-fontSizes-6xl: 3.75rem;
}Drop-in prompt
Build a landing page in the visual style of Bun — Docs.
Reference design system (extracted from the live site):
- Palette: #ba6091, #5c2c44, #f373b4, #a46c6c, #d9b3c6
- Typefaces: system-ui
- 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/bun-com--reference