# Immersive Garden · Design system migration spec

> Source: https://immersive-g.com  ·  Curated by OpenDesign  ·  en

> Worth including as a benchmark for ultra-refined, minimalist luxury UI that avoids common SaaS patterns in favor of a gallery-like experience.

## 1. Identity DNA

The Immersive Garden system is built on a philosophy of subtraction, treating the digital interface as a quiet gallery space where architecture meets digital art. Like a well-considered exhibition, every element is placed with deliberate intent, leaving vast expanses of negative space to let the work breathe.

**One-liner:** A refined digital studio focusing on high-end, immersive experiences.
**Keywords:** elegant · minimalist · immersive · sculptural · premium
**Analogy:** A quiet gallery space where architecture meets digital art.

## 2. Color

The color system operates on a binary principle of extreme restraint, relying on a strict light-on-dark and dark-on-light contrast. This monochromatic grayscale palette uses a very light gray background against near-black text, eliminating chromatic noise to focus attention on form and content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#e8e8e8` | main background |
| `--ink` | `#030303` | body text |
| `--muted` | `#e8e8e8` | placeholder |
| `--line` | `rgba(3,3,3,0.1)` | divider |

**Color principle:** Extreme restraint; rely on a strict light-on-dark / dark-on-light binary with high contrast.

The guiding principle is that color serves contrast and clarity, never decoration.

## 3. Typography

Typographic hierarchy is established through size and family alone, deliberately avoiding bold weights. Display typography uses a transitional-serif for elegant, impactful headlines, while body text and navigation employ a clean grotesque-sans for legibility, with wide letter-spacing for uppercase labels.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 44px | 1.1 | 400 | -0.5px | Hero headlines |
| body | 16px | 1.4 | 400 | 0px | Body text and navigation |
| caption | 14px | 1.1 | 400 | 0px | Small UI elements and labels |

**Type rules:**
- Use wide letter-spacing for uppercase labels.
- Keep line-heights tight for display typography.
- Never use bold weights; rely on size and font-family for hierarchy.

## 4. Spacing

The spatial rhythm is governed by a strict 16px base unit, applied with large, breathing margins that create a sense of sculptural balance.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 40 / 48 / 160 px
- **Rhythm:** Use strict 16px base units with large, breathing margins for spatial balance.

## 5. Surfaces

Surfaces are defined by their absence of embellishment—there are no shadows, no borders, and no decorative lines. Depth is communicated through layout and negative space alone, with elements separated purely by whitespace.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** None

## 6. Layout

The layout skeleton is a full-screen canvas, treating each viewport as a complete composition. Content is anchored to specific zones within this expansive field, prioritizing massive negative space over dense information packing.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 16px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-screen canvas layouts with content anchored to specific zones.

## 7. Motion & Interaction

Motion is slow and deliberate, with elegant opacity fades for page transitions and smooth, linear movements for 3D WebGL elements. Hover states are subtle, relying on slight color shifts and opacity changes to suggest interactivity without demanding attention.

- **Durations:** micro 250ms · small 300ms · medium 1900ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Slow, elegant opacity fades for page transitions.
  - Subtle hover states for interactive text elements.
  - Smooth, linear movements for 3D WebGL elements.

- **Hover:** Subtle color shifts and opacity changes on navigation and CTA text.
- **Click:** Immediate visual feedback via state change.
- **Transition:** Consistent 0.3s easing for standard UI updates and 1.9s for large canvas transitions.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is sophisticated and understated, matching the visual restraint. Headlines are short, impactful statements in elegant serif, while calls-to-action are minimal text links that avoid visual noise.

- **Tone:** Sophisticated, understated, and highly professional.
- **Headline style:** Short, impactful statements with elegant serif typography.
- **CTA style:** Understated text links with minimal visual noise.
- **Avoid:** Overly technical jargon. / Aggressive sales language. / Visual clutter or decorative elements. / Bright, saturated colors.

### Don'ts
- ❌ Don't use bold weights — the screenshot shows only regular weights for all text elements.
- ❌ Don't add drop shadows — the screenshot shows perfectly flat, matte UI surfaces.
- ❌ Don't use bright accent colors — the palette is strictly monochromatic grayscale.
- ❌ Don't use rounded containers — the layout relies on sharp edges and full-bleed imagery.
- ❌ Don't clutter the layout — the screenshot demonstrates extreme use of negative space.
- ❌ Don't use decorative borders — elements are separated by whitespace rather than lines.

The system deliberately avoids what it considers visual clutter: bold weights, drop shadows, bright accents, rounded containers, and decorative borders.

## System Prompt (paste into AI tool)

```
This site is a premium digital agency portfolio, characterized by an elegant, monochromatic color palette using light grays (#e8e8e8) and near-blacks (#030303). Typography relies on a refined combination of transitional-serif for display and grotesque-sans for body. The layout is spacious and minimalist, utilizing full-viewport canvases and extreme negative space. Critical constraints: strictly avoid bold font weights, never use drop shadows or decorative borders, and maintain a high-contrast grayscale aesthetic. Always prioritize refined, studio-grade presentation over functional density.
```
