Immersive Garden
Split Studio
Loading
Aino — Design & Technology Agency
Cool slate geometry—crisp sans-serif, vast open spaces, precisely muted greys.
Click any value to copy. Roles are suggestions, not gospel.
- #83837boklch(60.8% 0.012 107)Dominant
- #bebebaoklch(80.0% 0.006 107)Surface
- #444440oklch(38.5% 0.007 107)Ink
- #8c8c89oklch(63.9% 0.004 107)Accent
- #c4c4c0oklch(81.9% 0.006 107)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | abcplus | 13px | 500 | 1.39 | 0.54px | Aa Bb Cc |
| h3 | abcplus | 13px | 500 | 1.39 | 0.54px | Aa Bb Cc |
| body | abcplus | 13px | 400 | 1.29 | 0.54px | Aa Bb Cc |
| button | abcplus | 13px | 500 | 1.29 | 0.54px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #83837b;
--color-surface: #bebeba;
--color-ink: #444440;
--color-accent: #8c8c89;
--color-detail: #c4c4c0;
}
/* CSS variables exposed by source */
:root {
--border-radius: calc(calc(8.089887640449438 * 1px) * .4);
--font-size: 12.583146067415731px;
--ch: 8.089887640449438;
--light: 245,245,240;
--strip-4: 86;
--screen-height: 900;
--strip-6: 130;
--strip-7: 152;
--col: 42;
--black-rgb: 24,24,24;
--s7: calc(152 * calc(8.089887640449438 * 1px));
--black: rgb(24,24,24);
--cols: 178;
--line-height: 16.179775280898877px;
--s2: calc(42 * calc(8.089887640449438 * 1px));
--white: rgb(245,245,240);
--rows: 55;
--strip-8: 174;
--step: calc((100vw - calc(calc(8.089887640449438 * 1px) * 2)) / 4);
--line-padding: calc(16.179775280898877px * .439233);
--line: 16.179775280898877px;
--s6: calc(130 * calc(8.089887640449438 * 1px));
--dark: 24,24,24;
--strip-3: 64;
--s1: calc(20 * calc(8.089887640449438 * 1px));
--s4: calc(86 * calc(8.089887640449438 * 1px));
--s5: calc(108 * calc(8.089887640449438 * 1px));
--pure-white: #fff;
--fullcol: calc((42 + 2) * calc(8.089887640449438 * 1px));
--strip-1: 20;
--tablet: 1024px;
--s8: calc(174 * calc(8.089887640449438 * 1px));
--strip-5: 108;
--strip-2: 42;
--char2: calc(calc(8.089887640449438 * 1px) * 2);
--pure-black: #000;
--s3: calc(64 * calc(8.089887640449438 * 1px));
--char: calc(8.089887640449438 * 1px);
--white-rgb: 245,245,240;
--mobile: 768px;
--letter-spacing: 0.5400000000000001px;
}Drop-in prompt
Build a landing page in the visual style of Aino — Design & Technology Agency.
Reference design system (extracted from the live site):
- Palette: #83837b, #bebeba, #444440, #8c8c89, #c4c4c0
- Typefaces: abcplus
- 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/aino-agency
