Algolia
Feature Stack
Deep indigo expanse, clean sans-serif geometry, subtly glowing digital constellations.




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 | Mona Sans VF | 32px | 600 | 1.5 | 0 | Aa Bb Cc |
| h2 | Mona Sans VF | 24px | 600 | 1.5 | 0 | Aa Bb Cc |
| h3 | Mona Sans VF | 12px | 600 | 1.63 | 0 | Aa Bb Cc |
| body | Mona Sans VF | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Mona Sans VF | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #584ab6;
--color-surface: #040742;
--color-ink: #ac8ced;
--color-accent: #64a484;
--color-detail: #b2b3c5;
}
/* CSS variables exposed by source */
:root {
--brand-text-weight-300: 400;
--brand-animation-variant-scaleInLeft-end: 1;
--bgColor-black: #010409;
--brand-control-radio-dot-checked-hover: #309a4d;
--brand-RiverBreakout-variant-gridline-spacing-outerBlock: 4rem;
--brand-breakpoint-xlarge: 80rem;
--brand-RiverAccordion-variant-gridline-spacing-outerInline: 4rem;
--text-body-size-medium: .875rem;
--brand-Label-color-green-blue-start: #5fed83;
--brand-Testimonial-quoteMarkBackground-teal: #024b4d;
--brand-color-text-muted: #a4aea6;
--brand-SubNav-color-link-bgColor: #323834;
--fontStack-sansSerif: "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-Icon-color-coral: #fa9072;
--brand-control-checkbox-fg-checked-disabled: color-mix(in srgb, #08872b, #000 20%);
--brand-control-radio-border-disabled: #353d37;
--brand-breakpoint-xsmall: 20rem;
--brand-IDE-playPauseControl-rest: #4d4e6a;
--brand-breakpoint-large: 63.25rem;
--brand-Tabs-list-borderWidth-active: max(2px, .125rem);
--brand-Tabs-item-underline-rest: #fff;
--text-codeBlock-size: .8125rem;
--brand-Prose-blockquote-spacing: 1.5rem;
--brand-control-medium-lineBoxHeight: 1rem;
--brand-text-weight-normal: 400;
--brand-VideoPlayer-closedCaption-text-padding: .625rem;
--brand-Testimonial-quoteMarkColor-pink-blue-end: #78bafe;
--brand-text-letterSpacing-100: .21px;
--brand-body-fontFamily: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-Icon-color-lemon: #f4da38;
--brand-Eyebrowbanner-fgColor-green-blue-end: #78bafe;
--fgColor-success: #3fb950;
--brand-Eyebrowbanner-icon-background-teal: #024b4d;
--border-severe-muted: .0625rem solid #db6d2866;
--brand-videoPlayer-title-fgColor: #d2d9d4;
--brand-Grid-spacing-margin: 1rem;
--brand-text-size-700: 2.5rem;
--brand-PricingOptions-item-bgColor-solid: #0f1511;
--brand-Testimonial-quote-color-default: #fff;
--brand-videoPlayer-playButton-bgColor-rest: #0a50db;
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
--text-body-shorthand-small: 400 .75rem / 1.625 "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-animation-variant-scaleInRight-distance: -1.25rem;
--brand-Icon-background-coral: #500a00;
--color-ansi-yellow-bright: #e3b341;
--brand-Testimonial-quoteMarkColor-indigo: #8d9ff8;
--brand-box-spacing-normal: 1.5rem;
--bgColor-open-muted: #2ea04326;
--brand-Eyebrowbanner-fgColor-purple: #c08bfc;
--bgColor-white: #fff;
--brand-borderRadius-small: .25rem;
--brand-CTABanner-shadow-color-start: #5fed83;
--brand-Eyebrowbanner-fgColor-purple-red-end: #fd8986;
--brand-color-text-emphasized: #23ea57;
--text-title-size-large: 2rem;
--brand-River-label-margin: 1rem;
--bgColor-open-emphasis: #238636;
--color-project-gradient-out: #161b2200;
--brand-stack-gap-spacious: 3rem;
--brand-Accordion-toggle-color-end: #5fed83;
}Drop-in prompt
Build a landing page in the visual style of Github — Docs.
Reference design system (extracted from the live site):
- Palette: #584ab6, #040742, #ac8ced, #64a484, #b2b3c5
- Typefaces: Mona Sans VF
- 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/github-com--docs