Deel — About
Split Studio
Deep charcoal expanse, precise sans-serif geometry, cool, focused clarity.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | __suisseFont_3f347b | 32px | 400 | 1.25 | 0.2px | Aa Bb Cc |
| h2 | __suisseFont_3f347b | 20px | 400 | 1.4 | 0.125px | Aa Bb Cc |
| h3 | __suisseFont_3f347b | 20px | 400 | 1.4 | 0.125px | Aa Bb Cc |
| body | __suisseFont_3f347b | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | __suisseFont_3f347b | 12px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e1512d;
--color-surface: #c8dbe8;
--color-ink: #0d8db3;
--color-accent: #9c569e;
--color-detail: #b3cccc;
}
/* CSS variables exposed by source */
:root {
--font-ibm-plex-mono: "__IBM_Plex_Mono_65c68c","__IBM_Plex_Mono_Fallback_65c68c";
--chakra-colors-red-30: hsl(10, 80%, 30%);
--chakra-transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--chakra-fontSizes-3xl: 2.13rem;
--chakra-sizes-13: 3.25rem;
--chakra-sizes-52: 13rem;
--chakra-colors-green-300: #68D391;
--chakra-radii-none: 0;
--chakra-colors-textWarningSecondaryLight: hsl(30, 80%, 90%);
--chakra-colors-blue-90: hsl(230, 68%, 90%);
--chakra-colors-red-700: #9B2C2C;
--chakra-space-0-5: 0.125rem;
--chakra-colors-blue-800: #2a4365;
--chakra-colors-telegram-100: #C5E4F3;
--chakra-space-56: 14rem;
--chakra-space-0-3: 0.3rem;
--chakra-colors-orange-800: #7B341E;
--chakra-colors-teal-800: #234E52;
--chakra-sizes-12: 3rem;
--chakra-fonts-mono: '__IBM_Plex_Mono_65c68c','__IBM_Plex_Mono_Fallback_65c68c';
--chakra-sizes-4-75: 1.25rem;
--chakra-space-48: 12rem;
--chakra-space-9: 2.25rem;
--chakra-sizes-3-5: 0.875rem;
--chakra-space-52: 13rem;
--chakra-colors-textSuccessTertiaryDark: hsl(90, 80%, 20%);
--chakra-sizes-sm: 24rem;
--chakra-borders-1px: 1px solid;
--chakra-transition-duration-normal: 200ms;
--chakra-colors-purple-300: #B794F4;
--chakra-colors-cyan-500: #00B5D8;
--chakra-colors-twitter-50: #E5F4FD;
--chakra-sizes-6: 1.5rem;
--chakra-lineHeights-double: 2;
--chakra-colors-purple-200: #D6BCFA;
--chakra-letterSpacings-widest: 0.1em;
--chakra-colors-surfaceWarningPrimaryDark: hsl(30, 80%, 70%);
--chakra-space-4: 1rem;
--chakra-colors-pink-800: #702459;
--chakra-colors-yellow-200: #FAF089;
--chakra-colors-textAccentComplimentaryContrastDark: hsl(0, 0%, 100%);
--chakra-colors-white: #FFFFFF;
--chakra-fonts-body: '__suisseFont_3f347b','__suisseFont_Fallback_3f347b';
--chakra-colors-base-20: hsl(0, 0%, 20%);
--chakra-sizes-15: 4.3125rem;
--chakra-colors-surfaceFailureSecondaryLight: hsl(10, 80%, 90%);
--chakra-colors-surfaceAccentTertiaryDark: hsl(230, 68%, 30%);
--chakra-colors-gray-600: #4A5568;
--chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
--chakra-colors-red-600: #C53030;
--chakra-space-22: 5.625rem;
--chakra-colors-cyan-100: #C4F1F9;
--chakra-colors-textPrimaryDark: hsl(0, 0%, 100%);
--chakra-colors-devMode: #000099;
--chakra-colors-orange-20: hsl(30, 80%, 20%);
--chakra-lineHeights-3: .75rem;
--chakra-colors-linkedin-300: #68C7EC;
--chakra-sizes-80: 20rem;
--chakra-space-36: 9rem;
--chakra-blur-xl: 24px;
}Drop-in prompt
Build a landing page in the visual style of Pipe | Embedded Financial Solutions.
Reference design system (extracted from the live site):
- Palette: #e1512d, #c8dbe8, #0d8db3, #9c569e, #b3cccc
- Typefaces: __suisseFont_3f347b
- 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/pipe-com