NIKI Studio
Split Studio
Deep charcoal expanse, crisp geometric sans-serif, quiet digital 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 |
|---|---|---|---|---|---|---|
| body | FT System Grotesk | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | FT System Grotesk | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7f7f7f;
--color-surface: #bcbcbc;
--color-ink: #424242;
--color-accent: #696969;
--color-detail: #4c4c4c;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--font-grotesk: "FT System Grotesk",system-ui,sans-serif;
--text-lg: 1.125rem;
--color-neutral-500: oklch(55.6% 0 0);
--text-5xl--line-height: 1;
--text-2xl--line-height: calc(2/1.5);
--text-base--line-height: calc(1.5/1);
--spacing: .25rem;
--background: #fff;
--color-neutral-200: oklch(92.2% 0 0);
--text-xl--line-height: calc(1.75/1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--text-lg--line-height: calc(1.75/1.125);
--color-red-400: oklch(70.4% .191 22.216);
--color-white: #fff;
--radius-sm: .25rem;
--font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--text-4xl: 2.25rem;
--color-red-500: oklch(63.7% .237 25.331);
--text-sm--line-height: calc(1.25/.875);
--text-3xl--line-height: calc(2.25/1.875);
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--color-black: #000;
--text-xs--line-height: calc(1/.75);
--text-xs: .75rem;
--color-neutral-700: oklch(37.1% 0 0);
--font-weight-medium: 500;
--color-neutral-400: oklch(70.8% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--text-xl: 1.25rem;
--text-4xl--line-height: calc(2.5/2.25);
--foreground: #000;
--radius-lg: .5rem;
--text-base: 1rem;
--container-md: 28rem;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--leading-snug: 1.375;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--tw-inset-ring-shadow: 0 0 #0000;
--tw-translate-z: 0;
--container-3xl: 48rem;
--tw-translate-y: 0;
--animate-spin: spin 1s linear infinite;
--tw-inset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--tw-shadow-alpha: 100%;
--blur-3xl: 64px;
--leading-tight: 1.25;
--tw-border-style: solid;
--tw-shadow: 0 0 #0000;
--container-sm: 24rem;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--default-font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--container-lg: 32rem;
}Drop-in prompt
Build a landing page in the visual style of NorthGarden.
Reference design system (extracted from the live site):
- Palette: #7f7f7f, #bcbcbc, #424242, #696969, #4c4c4c
- Typefaces: FT System Grotesk
- 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/northgarden-com