---
name: Immersive Garden
description: "Worth including as a benchmark for ultra-refined, minimalist luxury UI that avoids common SaaS patterns in favor of a gallery-like experience."
version: alpha

colors:
  background: "#e8e8e8"
  primary: "#030303"
  neutral: "#e8e8e8"
  line: "rgba(3,3,3,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 40px
  3xl: 48px

---

## Overview

A refined digital studio focusing on high-end, immersive experiences.

*A quiet gallery space where architecture meets digital art.*

## Colors

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

- **Background (`#e8e8e8`)** — uses `bg` token
- **Primary text (`#030303`)** — uses `ink` token
- **Muted (`#e8e8e8`)** — uses `muted` token
- **Borders (`rgba(3,3,3,0.1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Use strict 16px base units with large, breathing margins for spatial balance.

## Elevation & Depth

- Borders: None

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Text-only interactive elements relying on subtle opacity and color shifts.
- **card:** Minimalist project showcases relying on high-resolution imagery.
- **hero:** Full-viewport immersive scene with a 3D sculptural background.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```