Area17
Split Studio
Deep crimson and muted grey, sharp sans-serif whispers across expansive, quiet space.




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 | Inter | 110px | 900 | 0.8 | -6px | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #8c162e;
--color-surface: #ec8ca0;
--color-ink: #943c4c;
--color-accent: #ac5a68;
--color-detail: #c3abaf;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--color-glass: #0a0a0a73;
--font-weight-black: 900;
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--radius-3xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-base--line-height: 1.5;
--spacing: .25rem;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--text-8xl: 6rem;
--text-xl--line-height: calc(1.75 / 1.25);
--color-glass-border: #ffffff14;
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-accent-glow: #91122c99;
--color-dark-grey: #050505;
--color-emerald-600: oklch(59.6% .145 163.225);
--shadow-color: #0000001a;
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--radius-sm: .25rem;
--font-weight-extrabold: 800;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-weight-bold: 700;
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: 1.2;
--text-6xl: 3.75rem;
--text-3xl: 1.875rem;
--color-black: #000;
--text-xs--line-height: calc(1 / .75);
--text-color: #0a0a0a;
--text-xs: .75rem;
--font-weight-medium: 500;
--color-light-grey: #a3a3a3;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--text-6xl--line-height: 1;
--primary: #91122c;
--text-xl: 1.25rem;
--radius-lg: .5rem;
--bg-color: #ececec;
--text-base: 1rem;
--color-claret: #91122c;
--container-md: 28rem;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--aspect-video: 16 / 9;
--leading-relaxed: 1.625;
--drop-shadow-md: 0 3px 3px #0000001f;
--leading-snug: 1.375;
--tw-drop-shadow-alpha: 100%;
--tracking-tighter: -.05em;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--dock-bg: #ffffffb3;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-translate-z: 0;
--tw-gradient-via: rgba(0, 0, 0, 0);
--tw-scale-y: 1;
}Drop-in prompt
Build a landing page in the visual style of Cyrillic Digital - Digital Innovation / Indie Spirit.
Reference design system (extracted from the live site):
- Palette: #8c162e, #ec8ca0, #943c4c, #ac5a68, #c3abaf
- Typefaces: 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/cyrillic-digital