Algolia
Feature Stack
Loading
Rippling
Deep violet gradients, crisp sans-serif, expansive digital depth—efficient, authoritative, and subtly futuristic.
Click any value to copy. Roles are suggestions, not gospel.
- #f2a21foklch(77.3% 0.158 72)Dominant
- #5b0c63oklch(34.3% 0.149 324)Surface
- #efd0a5oklch(87.3% 0.066 76)Ink
- #91658coklch(56.6% 0.079 331)Accent
- #c695caoklch(73.4% 0.092 324)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | __basel_e55247 | 48px | 500 | 1.08 | -1.5px | Aa Bb Cc |
| h2 | __basel_e55247 | 42px | 500 | 1.14 | -1.5px | Aa Bb Cc |
| h3 | __basel_e55247 | 30px | 500 | 1.2 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Arial | 16px | 700 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #f2a21f;
--color-surface: #5b0c63;
--color-ink: #efd0a5;
--color-accent: #91658c;
--color-detail: #c695ca;
}
/* CSS variables exposed by source */
:root {
--font-basel: "__basel_e55247","__basel_Fallback_e55247";
--font-styrene-a: "__styreneA_d301d6","__styreneA_Fallback_d301d6";
--tw-ring-offset-shadow: 0 0 #0000;
--header-height: 80px;
--tw-ring-shadow: 0 0 #0000;
--twc-shadow-color-primary: 0deg 0% 0%/10%;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--sa-uid: '0-6fc02185-88bd-524d-60b4-9cc843565ffd';
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--twc-shadow-color-secondary: 0deg 0% 0%/8%;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: #2780ce80;
--tw-translate-y: 0;
--twc-shadow-color-tertiary: 0deg 0% 0%/55%;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Rippling.
Reference design system (extracted from the live site):
- Palette: #f2a21f, #5b0c63, #efd0a5, #91658c, #c695ca
- Typefaces: __basel_e55247, Times, Arial
- 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/rippling-com
