Algolia
Feature Stack
Deep charcoal expanse, crisp monospace whispers, and electric violet accents pulse.




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 | Satoshi-Variable | 60px | 600 | 1 | 0 | Aa Bb Cc |
| h2 | Satoshi-Variable | 20px | 600 | 1.4 | 0 | Aa Bb Cc |
| h3 | Satoshi-Variable | 18px | 600 | 1.5 | 0 | Aa Bb Cc |
| body | Geist-Regular | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Geist-Regular | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Geist-Regular | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d02898;
--color-surface: #203f5e;
--color-ink: #acfc54;
--color-accent: #886f62;
--color-detail: #b8b9bd;
}
/* CSS variables exposed by source */
:root {
--color-indigo-400: oklch(67.3% .182 276.935);
--text-2xl: 1.5rem;
--text-dimmed: #878c99;
--color-purple-500: oklch(62.7% .265 303.9);
--color-sky-500: oklch(68.5% .169 237.323);
--color-rose-200: oklch(89.2% .058 10.001);
--color-pink-500: oklch(65.6% .241 354.308);
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--secondary-hover: #826dff;
--color-blue-700: oklch(48.8% .243 264.376);
--color-slate-500: oklch(55.4% .046 257.417);
--color-neutral-300: oklch(87% 0 none);
--text-light-dimmed: #a4a8b0;
--color-slate-900: oklch(20.8% .042 265.755);
--text-5xl--line-height: 1;
--color-emerald-700: oklch(50.8% .118 165.612);
--text-base--line-height: 1.5;
--color-indigo-800: oklch(39.8% .195 277.366);
--color-yellow-400: oklch(85.2% .199 91.936);
--color-purple-900: oklch(38.1% .176 304.987);
--color-green-500: oklch(72.3% .219 149.579);
--color-white: #fff;
--color-red-400: oklch(70.4% .191 22.216);
--text-lg--line-height: calc(1.75 / 1.125);
--color-blue-400: oklch(70.7% .165 254.624);
--font-weight-bold: 700;
--color-red-500: oklch(63.7% .237 25.331);
--color-rose-400: oklch(71.2% .194 13.428);
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--font-weight-light: 300;
--color-sky-700: oklch(50% .134 242.749);
--text-7xl--line-height: 1;
--color-pink-100: oklch(94.8% .028 342.258);
--text-xl: 1.25rem;
--color-gray-800: oklch(27.8% .033 256.848);
--color-orange-700: oklch(55.3% .195 38.402);
--color-lime-700: oklch(53.2% .157 131.589);
--color-orange-500: oklch(70.5% .213 47.604);
--color-slate-800: oklch(27.9% .041 260.031);
--color-sky-100: oklch(95.1% .026 236.824);
--text-2xl--line-height: calc(2 / 1.5);
--color-amber-500: oklch(76.9% .188 70.08);
--spacing: .25rem;
--color-orange-400: oklch(75% .183 55.934);
--color-pink-600: oklch(59.2% .249 .584);
--color-yellow-700: oklch(55.4% .135 66.442);
--text-8xl: 6rem;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--color-rose-500: oklch(64.5% .246 16.439);
--color-red-700: oklch(50.5% .213 27.518);
--text-sm: .875rem;
--color-indigo-200: oklch(87% .065 274.039);
--color-rose-600: oklch(58.6% .253 17.585);
--color-emerald-500: oklch(69.6% .17 162.48);
--color-blue-500: oklch(62.3% .214 259.815);
--color-pink-700: oklch(52.5% .223 3.958);
}Drop-in prompt
Build a landing page in the visual style of Trigger.
Reference design system (extracted from the live site):
- Palette: #d02898, #203f5e, #acfc54, #886f62, #b8b9bd
- Typefaces: Satoshi-Variable, Geist-Regular
- 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/trigger-dev