Graphite
Split Studio
Deep indigo expanse, crisp geometric sans, cool digital stillness.




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 | IBM Plex Serif | 54px | 500 | 1.12 | -1.96px | Aa Bb Cc |
| h2 | IBM Plex Serif | 36px | 400 | 1.33 | -0.72px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.63 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.63 | 0 | Aa Bb Cc |
Max content width 1160px
:root {
--color-dominant: #533c82;
--color-surface: #152853;
--color-ink: #b4a4d5;
--color-accent: #706c9f;
--color-detail: #c6c7ca;
}
/* CSS variables exposed by source */
:root {
--font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--font-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--shadow-opacity: 0.07;
--secondaryBg: hsl(250, 21%, 11%);
--background: hsl(250, 24%, 9%);
--font-inter-tight: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-ibm-plex-serif: 'IBM Plex Serif', Georgia, Cambria, 'Times New Roman', serif;
--foreground: hsl(0, 0%, 100%);
--cyan-50: hsl(180, 25%, 10%);
--green-900: hsl(152, 38%, 91%);
--cyan-800: hsl(180, 50%, 80%);
--pink-600: hsl(270, 70%, 65%);
--tw-ring-shadow: 0 0 #0000;
--blue-400: hsl(220, 72%, 45%);
--yellow-900: hsl(44, 78%, 90%);
--blue-500: hsl(220, 80%, 55%);
--gray-950: hsl(246, 4%, 97%);
--blue-800: hsl(220, 80%, 85%);
--blue-100: hsl(220, 55%, 13%);
--tw-border-spacing-x: 0;
--yellow-950: hsl(44, 75%, 97%);
--partnerProjectsGradient: linear-gradient(108.94deg, #16093B 18.43%, #221228 52.22%);
--tw-ring-color: #93c5fd80;
--blue-600: hsl(220, 80%, 65%);
--gray-600: hsl(246, 6%, 65%);
--blue-900: hsl(220, 80%, 95%);
--cyan-900: hsl(180, 58%, 91%);
--gray-700: hsl(246, 6%, 78%);
--yellow-200: hsl(44, 50%, 16%);
--blue-200: hsl(220, 62%, 25%);
--tw-rotate: 0;
--kickbackHerokGradient-900: t;
--tw-ring-offset-color: #fff;
--yellow-700: hsl(44, 78%, 72%);
--pink-800: hsl(270, 70%, 85%);
--ai-angle: 0deg;
--yellow-50: hsl(44, 40%, 08%);
--pink-50: hsl(270, 38%, 12%);
--yellow-300: hsl(44, 62%, 25%);
--yellow-100: hsl(44, 40%, 10%);
--cyan-400: hsl(180, 50%, 38%);
--tw-ring-offset-width: 0px;
--blue-50: hsl(220, 55%, 10%);
--gray-100: hsl(246, 18%, 15%);
--tw-scroll-snap-strictness: proximity;
--pink-300: hsl(270, 50%, 32%);
--red-100: hsl(1, 45%, 12%);
--green-100: hsl(152, 26%, 11%);
--pink-200: hsl(270, 45%, 24%);
--red-400: hsl(1, 62%, 35%);
--yellow-600: hsl(44, 78%, 62%);
--tw-shadow-colored: 0 0 #0000;
--gray-50: hsl(248, 21%, 13%);
--red-950: hsl(1, 55%, 98%);
--tw-skew-y: 0;
--cyan-700: hsl(180, 50%, 72%);
--cyan-950: hsl(180, 40%, 97%);
--pink-700: hsl(270, 70%, 75%);
--tw-ring-offset-shadow: 0 0 #0000;
--blue-700: hsl(220, 80%, 75%);
}Drop-in prompt
Build a landing page in the visual style of Railway.
Reference design system (extracted from the live site):
- Palette: #533c82, #152853, #b4a4d5, #706c9f, #c6c7ca
- Typefaces: IBM Plex Serif, Inter
- 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/railway-com