Anthropic
Split Studio
Loading
Warp
Cool, obsidian geometry—crisp sans-serifs on vast, echoing digital space.
Click any value to copy. Roles are suggestions, not gospel.
- #7359c7oklch(54.6% 0.164 291)Dominant
- #21445boklch(37.1% 0.057 240)Surface
- #d0ebfaoklch(92.5% 0.035 232)Ink
- #816b76oklch(55.2% 0.032 347)Accent
- #97abc5oklch(73.5% 0.044 255)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | ABCFavorit | 18px | 400 | 1.11 | 0 | Aa Bb Cc |
| body | ABCFavorit | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ABCFavorit | 14px | 400 | 1.14 | 0 | Aa Bb Cc |
| button | ABCFavorit | 21px | 400 | 1.14 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7359c7;
--color-surface: #21445b;
--color-ink: #d0ebfa;
--color-accent: #816b76;
--color-detail: #97abc5;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--toastify-toast-min-height: 64px;
--tw-skew-x: 0;
--toastify-toast-width: 320px;
--toastify-z-index: 9999;
--tw-shadow: 0 0 #0000;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-text-opacity: 1;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--toastify-toast-max-height: 800px;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Warp.
Reference design system (extracted from the live site):
- Palette: #7359c7, #21445b, #d0ebfa, #816b76, #97abc5
- Typefaces: ABCFavorit
- 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/warp-net
