Cron
Split Studio
Deep indigo space, crisp sans-serif, and quiet, purposeful minimalism.




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 | ui-sans-serif | 60px | 600 | 1 | -1.2px | Aa Bb Cc |
| h2 | ui-sans-serif | 60px | 600 | 1 | -1.2px | 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-sans-serif | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
Max content width 1120px
:root {
--color-dominant: #7c3ceb;
--color-surface: #246a37;
--color-ink: #af88f3;
--color-accent: #675496;
--color-detail: #cccccc;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: #e9d5ff;
--color-fuchsia-700: #a21caf;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
--color-rose-200: #fecdd3;
--color-slate-200: #e2e8f0;
--color-sky-500: #0ea5e9;
--color-pink-500: #ec4899;
--color-violet-600: #7c3aed;
--color-orange-600: #ea580c;
--color-red-900: #7f1d1d;
--color-neutral-600: #525252;
--color-orange-800: #9a3412;
--color-teal-400: #2dd4bf;
--color-pink-950: #500724;
--color-blue-700: #1d4ed8;
--color-neutral-300: #d4d4d4;
--color-slate-500: #64748b;
--color-purple-800: #6b21a8;
--color-orange-900: #7c2d12;
--color-orange-50: #fff7ed;
--color-blue-300: #93c5fd;
--color-cyan-700: #0e7490;
--color-neutral-200: #e5e5e5;
--color-gray-300: #d4d4d4;
--color-yellow-400: #facc15;
--color-slate-300: #cbd5e1;
--color-cyan-200: #a5f3fc;
--color-amber-300: #fcd34d;
--color-gray-500: #737373;
--color-zinc-50: #fafafa;
--color-accent-300: #c4b5fd;
--color-green-500: #22c55e;
--color-accent-500: #8b5cf6;
--color-white: #fff;
--color-sky-600: #0284c7;
--color-gray-400: #a3a3a3;
--color-blue-400: #60a5fa;
--color-pink-50: #fdf2f8;
--color-accent-400: #a78bfa;
--color-slate-400: #94a3b8;
--color-stone-900: #1c1917;
--color-yellow-300: #fde047;
--color-zinc-950: #09090b;
--color-gray-100: #f5f5f5;
--color-teal-950: #042f2e;
--color-emerald-200: #a7f3d0;
--color-purple-600: #9333ea;
--color-teal-900: #134e4a;
--color-violet-800: #5b21b6;
--color-zinc-700: #3f3f46;
--color-neutral-700: #404040;
--color-violet-500: #8b5cf6;
--color-fuchsia-600: #c026d3;
--color-sky-50: #f0f9ff;
--color-purple: #a882ff;
--color-lime-200: #d9f99d;
--color-fuchsia-200: #f5d0fe;
--color-green-900: #14532d;
--color-rose-950: #4c0519;
}Drop-in prompt
Build a landing page in the visual style of Obsidian Md — Pricing.
Reference design system (extracted from the live site):
- Palette: #7c3ceb, #246a37, #af88f3, #675496, #cccccc
- Typefaces: ui-sans-serif
- 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/obsidian-md--pricing