Algolia
Feature Stack
Loading
Splice
Electric indigo depth, crisp sans-serif lines floating in a vast, cool digital space.
Click any value to copy. Roles are suggestions, not gospel.
- #ea0430oklch(59.2% 0.238 23)Dominant
- #37106foklch(30.4% 0.147 294)Surface
- #fc7c95oklch(74.0% 0.157 9)Ink
- #52939doklch(62.4% 0.068 208)Accent
- #dbcaceoklch(85.4% 0.020 1)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | InterVariable | 26px | 700 | 1.43 | 0 | Aa Bb Cc |
| h2 | SoehneBreit | 36px | 400 | 1.25 | -0.3996px | Aa Bb Cc |
| h3 | Soehne | 20px | 400 | 1.25 | -0.084px | Aa Bb Cc |
| body | InterVariable | 13px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | InterVariable | 16px | 500 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ea0430;
--color-surface: #37106f;
--color-ink: #fc7c95;
--color-accent: #52939d;
--color-detail: #dbcace;
}
/* CSS variables exposed by source */
:root {
--font-size-5: 1rem;
--text-on-inverse: #121214;
--font-size-fluid-2: clamp(1.75rem, 1.56vi + 1.56rem, 2.25rem);
--font-family-default: "InterVariable", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
--text-02: #c8c9cc;
--font-size-fluid-3: clamp(1.25rem, 1vi + 1.31rem, 1.75rem);
--surface-action-disabled: #45464d;
--font-size-2: 2.25rem;
--surface-action-neutral-hover: #63656d;
--text-01: #fff;
--font-size-3-small: 1.25rem;
--font-weight-bold: 700;
--border-radius-md: 1rem;
--font-size-2-small: 1.75rem;
--border-radius-xs: .25rem;
--font-size-fluid-0: clamp(3rem, 3.54vi + 2.17rem, 4.5rem);
--font-size-6-small: .875rem;
--font-size-0-small: 3rem;
--font-size-5-small: 1rem;
--font-size-3: 1.75rem;
--text-secondary: #303236;
--surface-action-destructive-hover: #b61701;
--surface-page: #ffffff;
--font-size-7: .75rem;
--font-size-7-small: .75rem;
--font-size-1-small: 2.25rem;
--space-4xl: 3.75rem;
--font-size-4-small: 1.25rem;
--font-weight-extra-bold: 700;
--text-03: #a6a8ad;
--border-destructive: #e81d01;
--text-destructive: #e81d01;
--font-family-expressive-wide: "SoehneBreit", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
--font-size-1: 3rem;
--space-3xl: 3.5rem;
--text-04: #fff;
--surface-action: #1253ff;
--primary: #1253ff;
--font-size-4: 1.25rem;
--space-sm: 1rem;
--surface-action-hover: #0033ff;
--space-xl: 2rem;
--text-disabled: #81838a;
--space-2xl: 3rem;
--font-size-base: 16px;
--font-size-6: .875rem;
--text-on-color: #ffffff;
--space-2xs: .25rem;
--space-3xs: .125rem;
--font-size-0: 4.5rem;
--surface-translucent: rgba(250, 250, 251, .08);
--space-5xl: 5rem;
--surface-action-disabled-on-color: #a6a8ad;
--border-radius-sm: .5rem;
--space-lg: 1.5rem;
--space-6xl: 7.5rem;
--border-radius-2xs: .125rem;
--space-xs: .5rem;
--border-default: #c8c9cc;
--surface-action-neutral-selected: #45464d;
}Drop-in prompt
Build a landing page in the visual style of Splice.
Reference design system (extracted from the live site):
- Palette: #ea0430, #37106f, #fc7c95, #52939d, #dbcace
- Typefaces: InterVariable, SoehneBreit
- 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/splice-com
