Nbstudio Co Uk — About
Split Studio
Loading
Area17
Crisp, cool, off-white geometry—precise sans-serifs on a spacious, airy, technical canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #fbf214oklch(93.8% 0.199 107)Dominant
- #868214oklch(59.2% 0.121 107)Surface
- #fcf77coklch(95.6% 0.145 107)Ink
- #7b7872oklch(57.3% 0.010 85)Accent
- #bcbcbcoklch(79.5% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| h2 | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| h3 | SuisseIntl | 20px | 400 | 1.4 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | SuisseIntl | 16px | 400 | 1.4 | 0.064px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fbf214;
--color-surface: #868214;
--color-ink: #fcf77c;
--color-accent: #7b7872;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--spacing-row-logo: 6.25rem;
--bg-dynamic: #fff;
--21: 140%;
--r: 5rem;
--4p: 0;
--2s: -.014em;
--31: 110%;
--5h: 0 0 #0000;
--w: 14.5rem;
--4v: 0;
--1g: 110%;
--1l: 115%;
--2q: 2.625rem;
--2z: 500;
--2k: 400;
--22: .004em;
--10: SuisseIntl, Arial, sans-serif;
--1p: 1.5rem;
--s: 6rem;
--i: 4.5rem;
--logo-base-height: 56.25%;
--1u: 1.25rem;
--p: 3rem;
--l: .75rem;
--3: 16px;
--77: #666666;
--1o: 600;
--6a: 44px;
--4q: 0;
--1k: 2rem;
--1w: 0;
--1x: SuisseIntl, Arial, sans-serif;
--12: Arial, sans-serif;
--79: #949494;
--35: .75rem;
--3c: -.01em;
--1n: SuisseIntl, Arial, sans-serif;
--7: rgba(127, 255, 255, .25);
--2u: 500;
--1v: 120%;
--5b: 0px;
--5c: #E6E6E6;
--2d: 140%;
--vh: 9px;
--2i: 140%;
--0: #E6E6E6;
--v: 12rem;
--2p: 500;
--1j: 500;
--1t: 600;
--36: 140%;
--26: 1rem;
--2c: 1.25rem;
--2h: 1.25rem;
--2y: SuisseIntl, Arial, sans-serif;
--4o: #1A1A1A;
--7e: #FDF313;
--1m: -.013em;
--7a: #E1E1E1;
--32: -.014em;
}Drop-in prompt
Build a landing page in the visual style of Area17.
Reference design system (extracted from the live site):
- Palette: #fbf214, #868214, #fcf77c, #7b7872, #bcbcbc
- Typefaces: ui-sans-serif, SuisseIntl
- 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/area17-com
