Immersive Garden
Split Studio
Loading
Geex | UI/UX Design, Branding & Development for Startups
Subtle, sculpted light grey forms float on a boundless, softly glowing white expanse.
Click any value to copy. Roles are suggestions, not gospel.
- #868278oklch(60.7% 0.016 89)Dominant
- #c0beb9oklch(80.2% 0.007 89)Surface
- #45433eoklch(38.3% 0.009 89)Ink
- #7a7976oklch(57.6% 0.005 91)Accent
- #c1bfbaoklch(80.5% 0.007 89)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Instrument Serif | 120px | 400 | 0.8 | -1.3px | Aa Bb Cc |
| h2 | Instrument Serif | 96px | 400 | 1 | -1.3px | Aa Bb Cc |
| h3 | Instrument Serif | 24px | 400 | 1.2 | -0.32px | Aa Bb Cc |
| body | Instrument Serif | 16px | 400 | 1.1 | -0.32px | Aa Bb Cc |
| button | Instrument Serif | 24px | 400 | 1.1 | -0.32px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #868278;
--color-surface: #c0beb9;
--color-ink: #45433e;
--color-accent: #7a7976;
--color-detail: #c1bfba;
}
/* CSS variables exposed by source */
:root {
--background-color--background-error<deleted|relume-variable-background-color-8>: #fef3f2;
--background-color--background-success<deleted|relume-variable-background-color-6>: #ecfdf3;
--text-color--text-success<deleted|relume-variable-text-color-4>: #027a48;
--background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee;
--border-color--border-primary<deleted|relume-variable-border-color-1>: black;
--text-color--text-primary<deleted|relume-variable-text-color-1>: black;
--text-color--text-error<deleted|relume-variable-text-color-5>: #b42318;
--link-color--link-primary<deleted|relume-variable-link-color-1>: black;
--transparent: #0000;
--base-color-system--error-red-light<deleted|relume-variable-system-color-6>: #fef3f2;
--dark-grey: #939393;
--base-color-system--success-green<deleted|relume-variable-system-color-1>: #027a48;
--fs-list-renderindex: 0;
--grey-text: #c9c9c9;
--black: black;
--soft-grey: #f4f4f2;
--base-color-system--success-green-light<deleted|relume-variable-system-color-2>: #ecfdf3;
--swiper-navigation-size: 44px;
--base-color-neutral--white<deleted|relume-variable-color-neutral-2>: white;
--base-color-neutral--neutral-lightest<deleted|relume-variable-color-neutral-3>: #eee;
--white: white;
--base-color-neutral--black<deleted|relume-variable-color-neutral-1>: black;
--swiper-theme-color: #007aff;
--base-color-system--error-red<deleted|relume-variable-system-color-5>: #b42318;
}Drop-in prompt
Build a landing page in the visual style of Geex | UI/UX Design, Branding & Development for Startups.
Reference design system (extracted from the live site):
- Palette: #868278, #c0beb9, #45433e, #7a7976, #c1bfba
- Typefaces: Instrument Serif
- 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/geex-arts-com
