Ecologi
Ecosystem Index
Loading
Studio
Quiet, geometric clarity – muted earth tones and precise sans-serif architecture.
Click any value to copy. Roles are suggestions, not gospel.
- #dc4a1doklch(60.8% 0.190 36)Dominant
- #b02433oklch(49.7% 0.175 21)Surface
- #8fdcdboklch(84.4% 0.076 195)Ink
- #5d9a6coklch(63.2% 0.094 151)Accent
- #d7bab6oklch(81.3% 0.034 27)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 80px | 600 | 1 | -3.2px | Aa Bb Cc |
| h2 | Inter | 72px | 600 | 1 | -2.88px | Aa Bb Cc |
| h3 | sans-serif | 19px | 700 | 1 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | sans-serif | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dc4a1d;
--color-surface: #b02433;
--color-ink: #8fdcdb;
--color-accent: #5d9a6c;
--color-detail: #d7bab6;
}
/* CSS variables exposed by source */
:root {
--g-position-9: 100%;
--s-font-0a841c2d: 'DM Mono';
--g-position-10: 100%;
--g-position-8: 100%;
--g-color-5: rgba(0, 0, 0, 0);
--rebranding-loading-bar: #222;
--fa-style-family-classic: "Font Awesome 6 Free";
--g-color-0: rgba(0, 0, 0, 0);
--g-color-9: rgba(0, 0, 0, 0);
--g-position-1: 100%;
--g-position-4: 100%;
--g-color-4: rgba(0, 0, 0, 0);
--g-angle: 180deg;
--g-color-1: rgba(0, 0, 0, 0);
--g-color-7: rgba(0, 0, 0, 0);
--g-color-10: rgba(0, 0, 0, 0);
--s-font-d1864566: Lato;
--g-color-3: rgba(0, 0, 0, 0);
--g-position-3: 100%;
--g-color-8: rgba(0, 0, 0, 0);
--s-font-1fa86104: grandam;
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--rebranding-loading-bg: #e5e5e5;
--s-font-e3931b38: 'Inter Tight';
--g-color-2: rgba(0, 0, 0, 0);
--g-color-11: rgba(0, 0, 0, 0);
--g-position-6: 100%;
--g-position-7: 100%;
--g-position-11: 100%;
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
--g-position-5: 100%;
--g-position-0: 0.01%;
--g-position-2: 100%;
--fa-style-family-brands: "Font Awesome 6 Brands";
--g-color-6: rgba(0, 0, 0, 0);
--s-font-7bb7f657: Inter;
--s-font-68aa87c4: Inter,'Noto Sans JP';
}Drop-in prompt
Build a landing page in the visual style of Studio.
Reference design system (extracted from the live site):
- Palette: #dc4a1d, #b02433, #8fdcdb, #5d9a6c, #d7bab6
- Typefaces: Inter, Times, sans-serif
- Macrostructure: Ecosystem Index
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/studio-design
