Ollama
Split Studio
Loading
Replicate
Electric indigo depths, crisp geometric sans-serifs, spacious digital expanse.
Click any value to copy. Roles are suggestions, not gospel.
- #ddda17oklch(86.3% 0.183 109)Dominant
- #7a320eoklch(41.2% 0.111 43)Surface
- #f49cefoklch(80.8% 0.148 329)Ink
- #6c8494oklch(60.0% 0.037 237)Accent
- #cbadb4oklch(77.6% 0.036 2)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | basier-square | 24px | 400 | 1.33 | 0 | Aa Bb Cc |
| h2 | rb-freigeist-neue | 72px | 700 | 1 | -1.8px | Aa Bb Cc |
| h3 | rb-freigeist-neue | 30px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | basier-square | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | basier-square | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | basier-square | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1920px
:root {
--color-dominant: #ddda17;
--color-surface: #7a320e;
--color-ink: #f49cef;
--color-accent: #6c8494;
--color-detail: #cbadb4;
}
/* CSS variables exposed by source */
:root {
--header-height: calc(4.5rem + 2.5rem);
--tw-ring-shadow: 0 0 #0000;
--green-a4: #00a83829;
--yellow-a3: #ffee0047;
--tomato-6: #fdbdaf;
--green-a11: #00713fde;
--tomato-a12: #460900e0;
--tomato-12: #5c271f;
--yellow-a6: #ebbc0097;
--indigo-a2: #0040ff08;
--tomato-a1: #ff000003;
--tomato-a9: #df2600d1;
--green-1: #fbfefc;
--indigo-3: #edf2fe;
--yellow-12: #473b1f;
--gray-7: #cecece;
--yellow-11: #9e6c00;
--tomato-a11: #cd2200ea;
--gray-a11: #0000009b;
--green-6: #adddc0;
--indigo-5: #d2deff;
--gray-4: #e8e8e8;
--yellow-a9: #ffe100d6;
--tw-border-spacing-x: 0;
--yellow-a1: #aaaa0006;
--indigo-a5: #0044ff2d;
--green-a12: #002616e6;
--gray-2: #f9f9f9;
--tomato-a5: #ff2e003d;
--yellow-6: #f3d768;
--yellow-10: #ffdc00;
--tw-ring-color: rgb(59 130 246 / .5);
--green-a9: #008f4acf;
--gray-3: #f0f0f0;
--gray-a4: #00000017;
--indigo-a10: #002ec9cc;
--green-9: #30a46c;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--yellow-a8: #c99700c6;
--gray-a9: #00000072;
--green-7: #8eceaa;
--gray-a12: #000000df;
--green-8: #5bb98b;
--indigo-a9: #0031d2c1;
--green-2: #f4fbf6;
--tw-ring-offset-width: 0px;
--site-navigation-header-height: 4.5rem;
--gray-a5: #0000001f;
--indigo-9: #3e63dd;
--gray-a2: #00000006;
--green-a1: #00c04004;
--site-navigation-banner-height: 2.5rem;
--tw-scroll-snap-strictness: proximity;
--tw-shadow-colored: 0 0 #0000;
--green-a10: #008647d4;
--indigo-12: #1f2d5c;
--tomato-a7: #e7280067;
--gray-6: #d9d9d9;
--yellow-8: #d5ae39;
}Drop-in prompt
Build a landing page in the visual style of Replicate.
Reference design system (extracted from the live site):
- Palette: #ddda17, #7a320e, #f49cef, #6c8494, #cbadb4
- Typefaces: basier-square, rb-freigeist-neue
- Macrostructure: Split Studio
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/replicate-com--openai-o1
