Algolia
Feature Stack
Loading
Everything App for your teams
Deep indigo expanse, crisp sans-serif geometry, and a subtly glowing, digital depth.
Click any value to copy. Roles are suggestions, not gospel.
- #448cd0oklch(62.5% 0.126 249)Dominant
- #9dafe7oklch(76.1% 0.083 271)Surface
- #0c1c5eoklch(26.6% 0.119 267)Ink
- #b07961oklch(62.6% 0.078 44)Accent
- #b9b2cdoklch(77.8% 0.039 297)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | __esbuild_b38aaf | 84px | 600 | 0.9 | -3.36px | Aa Bb Cc |
| h2 | __esbuild_b38aaf | 80px | 600 | 0.8 | -4px | Aa Bb Cc |
| h3 | __esbuild_b38aaf | 28px | 400 | 1 | -0.56px | Aa Bb Cc |
| body | __Inter_f367f3 | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | __Inter_f367f3 | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #448cd0;
--color-surface: #9dafe7;
--color-ink: #0c1c5e;
--color-accent: #b07961;
--color-detail: #b9b2cd;
}
/* CSS variables exposed by source */
:root {
--font-mono: "__sf_0aa2f2","__sf_Fallback_0aa2f2";
--font-inter: "__Inter_f367f3","__Inter_Fallback_f367f3";
--font-esbuild: "__esbuild_b38aaf","__esbuild_Fallback_b38aaf";
--tw-ring-offset-shadow: 0 0 #0000;
--hero-mask-y: 0;
--tw-ring-shadow: 0 0 #0000;
--shiki-foreground: #f9fafa;
--shiki-token-embed: #fff;
--shiki-token-parameter: #ff990a;
--tw-border-spacing-x: 0;
--shiki-token-keyword: #ff4d89;
--tw-scale-y: 1;
--shiki-token-constant: #bf6afb;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--shiki-token-comment: #777a88;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--hero-mask-x: 0;
--shiki-color-background: transparent;
--tw-skew-x: 0;
--shiki-token-operator: #ff4d89;
--shiki-token-string-expression: #47d18c;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--shiki-token-string: #00ca53;
--tw-scroll-snap-strictness: proximity;
--hero-mask-size: 300px;
--shiki-token-link: #47d18c;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--shiki-background: #111112;
--shiki-token-punctuation: grey;
--tw-border-spacing-y: 0;
--tw-skew-y: 0;
--shiki-token-function: #4da6ff;
--shiki-color-text: #f9fafa;
}Drop-in prompt
Build a landing page in the visual style of Everything App for your teams.
Reference design system (extracted from the live site):
- Palette: #448cd0, #9dafe7, #0c1c5e, #b07961, #b9b2cd
- Typefaces: __esbuild_b38aaf, __Inter_f367f3
- 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/huly-io
