Replicate
Split Studio
Loading
Ollama
Crisp, cool charcoal expanse; clean sans-serif whispers amongst playful, digital icons.
Click any value to copy. Roles are suggestions, not gospel.
- #fcd63eoklch(88.4% 0.164 94)Dominant
- #826802oklch(52.8% 0.107 91)Surface
- #fce480oklch(91.8% 0.123 96)Ink
- #767474oklch(56.1% 0.002 17)Accent
- #c1c1c1oklch(81.1% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | SF Pro Rounded | 36px | 500 | 1.11 | 0 | Aa Bb Cc |
| h2 | SF Pro Rounded | 36px | 500 | 1.11 | 0 | Aa Bb Cc |
| h3 | SF Pro Rounded | 36px | 500 | 1.11 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ui-sans-serif | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | ui-monospace | 14px | 400 | 0 | 0 | Aa Bb Cc |
Max content width 768px
:root {
--color-dominant: #fcd63e;
--color-surface: #826802;
--color-ink: #fce480;
--color-accent: #767474;
--color-detail: #c1c1c1;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--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;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: #3b82f680;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Ollama.
Reference design system (extracted from the live site):
- Palette: #fcd63e, #826802, #fce480, #767474, #c1c1c1
- Typefaces: SF Pro Rounded, ui-sans-serif, ui-monospace
- 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/ollama-com
