# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Airy, weightless sans-serif — floats like the atmosphere |
| **Examples** | Outfit Light, Satoshi Light |
| **Weight** | 300 (light — the type itself feels weightless) |
| **Tracking** | 0.08em-0.15em (generous — letters spaced like drifting particles) |
| **Size** | `clamp(2rem, 5vw, 4.5rem)` — large but airy |
| **Transform** | Sentence case — never bold, never loud |

**Why airy sans:** The style is weightless composition — the type must float with the elements, not anchor them. Outfit Light and Satoshi Light have open, gentle forms. Generous letter-spacing makes headlines feel like they're suspended in the mist rather than printed on the page.

**Delicate serif alternative:** For editorial accents on wellness or luxury positions, a delicate serif (Cormorant Garamond, Italiana) at 300 weight works for a single hero word — used rarely, never for full headlines.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display, light weight |
| **Examples** | Outfit Light (300), Satoshi Light |
| **Weight** | 300 (light — drifting, not grounded) |
| **Tracking** | 0.02em-0.05em (slightly open, breathable) |
| **Size** | `clamp(0.9375rem, 1.2vw, 1.125rem)` — 15-18px |
| **Line Height** | 1.8-2.0 (very generous — slow, dreamlike reading) |

**Why light weight and open line height:** Heavy type reads as solid, anchored, real. Light type at 300 with a 1.8+ line height reads as a thought drifting through the page. The reading pace should match the motion pace — slow.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, light weight, wide tracking |
| **Examples** | Outfit Light, Satoshi Light |
| **Weight** | 300 |
| **Tracking** | 0.2em-0.35em (very wide — whispered annotations) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, captions, timestamps. These feel like dream annotations — "DRIFTING", "AURORA", "WEIGHTLESS". The wide tracking spreads them out like dust motes in light.

---

## Type Scale

```
Display:  clamp(2rem, 5vw, 4.5rem)   — airy, generous tracking
Body:     clamp(0.9375rem, 1.2vw, 1.125rem) — 15-18px, light, open leading
Micro:    10-12px                    — wide-tracked whispers
```

The scale is tall (10px to 72px) but every level is light weight. The hierarchy comes from size and spacing, never from weight contrast — the page should feel uniformly soft, with no type that shouts.

---

## Font Pairing Logic

**Single family approach:** One airy sans (Outfit or Satoshi) at light weights throughout. Consistency is the dream — one voice, floating at different sizes. Optionally pair with a delicate serif for a single hero word (see Display above) — never more than one accent per viewport.

**Never:** Bold or black weights (weight is gravity — this style is weightless), tight tracking (letters must breathe), decorative display fonts (personality competes with the atmosphere), or uppercase display headlines (too forceful).

# Color Architecture

## Ground

The ground is the atmosphere itself — soft gradient mesh fields bleeding into each other. There is no flat background color. For text areas and transitions:

```css
--color-ground-light: #F6F1F0;    /* Warm ivory with a blush hint — like cream morning light */
--color-ground-dark: #1B1624;     /* Deep plum-tinted night — the dark side of a dream */
```

**Why tinted ground:** No pure #FFFFFF and no pure #000000. Ivory (#F6F1F0) keeps the light side warm and soft, like light through closed eyelids. Plum-tinted night (#1B1624) lets dark sections feel like dusk in a dream — never void-like, never harsh.

---

## Pastel Base

```css
--pastel-lavender: #E3DCF0;      /* Lavender — soft, calm, primary */
--pastel-blush: #F5DDE3;         /* Blush pink — tender, warm */
--pastel-powder-blue: #DCE9F2;   /* Powder blue — airy, sky-like */
--pastel-mint: #DFF0E6;          /* Mint — fresh but muted */
--pastel-cream: #F7F0E2;         /* Cream — soft, milky */
```

**These are the atmosphere.** They never sit flat — they exist as gradient mesh fields, aurora washes, and translucent overlays. The palette is low-saturation by design: bold saturated colors are banned from this style. Everything feels like it was filmed through frosted glass.

---

## Aurora / Gradient Mesh

```css
--aurora-mesh: radial-gradient(
  120% 120% at 20% 20%, #F5DDE3 0%, transparent 45%
), radial-gradient(
  120% 120% at 80% 30%, #DCE9F2 0%, transparent 50%
), radial-gradient(
  100% 140% at 50% 80%, #E3DCF0 0%, transparent 55%
);
```

**Usage:** Gradient mesh IS the environment (design principle #2). Aurora effects are the same pastel family animated slowly — the colors breathe, drift, and bleed into one another. The saturation stays low so the effect reads as atmosphere, not decoration.

---

## Text

```css
--color-text-on-light: rgba(27, 22, 36, 0.78);   /* Plum-tinted dark, translucent */
--color-text-on-dark: rgba(246, 241, 240, 0.82); /* Warm ivory, translucent */
--color-text-muted: rgba(27, 22, 36, 0.45);      /* Muted, for labels */
```

**Why translucent text:** Text floats over the atmosphere — it does not sit on a card. Translucent text (75-85% opacity) keeps the dream intact; opaque text would puncture it.

---

## Glow & Diffusion

```css
--glow-soft: 0 8px 40px rgba(227, 220, 240, 0.6);        /* Lavender halo */
--glow-blush: 0 6px 32px rgba(245, 221, 227, 0.55);      /* Blush halo */
--glow-aurora: 0 0 60px rgba(220, 233, 242, 0.45);       /* Sky halo */
```

**Usage:** Glow replaces shadows. Shadows imply weight and groundedness; glow implies floating and light passing through. Every elevated element emits light rather than casting darkness.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Bold saturated colors | Low-saturation pastels — lavender, blush, powder blue, cream |
| Flat solid backgrounds | Gradient mesh, aurora washes, atmosphere |
| Pure #FFFFFF | Warm ivory #F6F1F0 |
| Pure #000000 | Plum-tinted night #1B1624 |
| Hard color transitions | Colors bleeding into each other, slow shifts |
| Shadows | Soft glow halos — light, not darkness |
| High contrast | Soft over sharp — diffused, low-contrast fields |

# Motion Principles

## Philosophy

Ethereal Dreamscape is the slowest style in the system (motion axis: 5). Motion is **weightless drift** — nothing snaps, nothing bounces, nothing is mechanical. Elements float as if gravity doesn't apply, the aurora shifts imperceptibly, and transitions feel like falling asleep — gradual, soft, inevitable. Motion should be felt, not noticed. If a visitor can describe the animation, it's too fast.

---

## Drift Motion

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Floating elements | translateY(0) → translateY(-14px) → 0 | 12-20s | `ease-in-out`, infinite |
| Hero imagery | Subtle scale(1.0) → scale(1.03) + opacity breathing | 15-25s | `ease-in-out`, infinite |
| Text blocks | translateY(0) → translateY(-6px) → 0 | 10-16s | `ease-in-out`, infinite |

**The drift must be barely perceptible.** Elements appear to hover, not animate. Different elements drift on different durations and offsets so nothing moves in lockstep — a field of petals, each on its own current.

---

## Aurora / Mesh Animation

```css
@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%; }
  50% { background-position: 100% 50%, 0% 100%, 100% 0%; }
}

.aurora {
  background: var(--aurora-mesh);
  background-size: 200% 200%;
  animation: aurora-shift 30s ease-in-out infinite;
}
```

**Purpose:** The gradient mesh IS the environment — it must be alive. The aurora drifts on a 30s+ cycle, slower than any other motion on the page, so the atmosphere moves beneath everything like weather. It should never speed up or feel mechanical.

---

## Gentle Parallax

| Effect | Specification |
|--------|--------------|
| Scroll-linked float | Background mesh shifts 1-3% slower than content — layers, not speed |
| Floating element depth | Foreground elements drift 2-4% faster than background |
| Section transitions | Translucent layers crossfade through soft blur (600ms+) |

**The parallax is depth, not speed.** No dramatic skews or fast scroll-velocity effects. The visitor should feel like they're moving through still air with things floating at different depths around them.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero | Opacity 0 → 1 + translateY(20px) → 0 | 2000-3000ms | `ease-out` | 0ms |
| Floating elements | Opacity 0 → 1, drift begins on mount | 2500ms | `ease-out` | 300-900ms |
| Headlines | Opacity 0 → 1 + translateY(14px) → 0 | 1800ms | `ease-out` | 600ms |
| Body text | Opacity 0 → 1 | 1500ms | `ease-out` | 1000ms |

**Key:** Entrances are fades with a hint of rise — like objects materializing from mist. Durations are 1500ms minimum. Never stagger more than a couple of elements; choreographed reveals feel rehearsed, not dreamlike.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Links | Color shift through pastel hues (800ms) | — |
| Buttons | Soft glow bloom, radius soften (1000ms) | Glow intensifies (600ms) |
| Imagery | Brightness 1.0 → 1.04 (1000ms) | — |
| Floating elements | Drift amplitude increases slightly (1200ms) | — |

**All hover transitions are 600ms+.** Fast hover states are the quickest way to break the spell — this style's interactions should feel like the page responding in its own slow time.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All drift: disabled (elements rest static)
- Aurora/mesh animation: static (single gradient frame)
- Parallax: disabled
- Entrance animations: instant opacity

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Fast or snappy transitions | This is the slowest style in the system — speed breaks the dream |
| Bounce or spring physics | Gravity doesn't apply here — elements float, they don't bounce |
| Mechanical, linear motion | Everything eases; drift has no beginning or end |
| Choreographed staggered reveals | Motion is continuous and ambient, not sequenced |
| Auto-playing carousels or slideshows | The visitor drifts through at their own pace |
| Particle fields or confetti | Too digital and busy — the atmosphere is enough |
| Horizontal or diagonal sweeping | Vertical weightless drift only — sweep is directional, drift is ambient |

# Layout Grammar

## Grid System

**No grid, no rows, no columns.** Elements are placed freely in space like objects drifting in a dream. The layout is so space-dominant it reads as sparse (density score 1). Layers of translucent wash overlap and slide beneath one another — soft pastel sheets at low opacity drifting over the gradient mesh. Internally:

- Canvas sections: 100vw width, `min-h-[100dvh]` — the atmosphere fills the frame
- Content containers: max-width 520px (moderate, floating)
- Placement: absolute, offset, weightless — never baseline-aligned to a grid
- Layering: overlapping translucent sheets with background-blur between them

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Full-bleed gradient-mesh atmosphere (aurora wash) |
| Text position | Floating — offset from center, breathing in place |
| Headline size | `clamp(2rem, 5vw, 4.5rem)` — delicate, airy sans (Outfit Light) |
| Letter-spacing | Generous — 0.08em to 0.12em on headings |
| Text opacity | 88% — luminous, translucent over the wash |

```
┌─────────────────────────────────────────┐
│                                         │
│                    ✦  drifting orb      │
│                                         │
│               WEIGHTLESS                │
│               Morning air over          │
│               lavender fields           │
│               [ENTER]                   │
│                                         │
│        [gradient mesh + mist layer]     │
└─────────────────────────────────────────┘
```

**The atmosphere is the hero.** Aurora gradient-mesh washes fill the frame. Text floats over them at 88% opacity, translucent and luminous. The gradient mesh carries 90% of the visual weight — the page reads like a soft recollection, mist over memory.

---

## Section Spacing

```css
--section-padding-y: clamp(6rem, 16vh, 12rem);
--content-max-width: 520px;
--edge-margin: clamp(2rem, 6vw, 6rem);
--layer-gap: clamp(4rem, 10vh, 8rem);
```

**Spacing is enormous.** Sections are scenes already dissolving — one dream state drifting into the next, separated by the slow pause of empty atmosphere. Nothing is crowded; crowding breaks the weightless illusion. The pacing is unhurried, like watching fog move.

---

## Layout Patterns

### Pattern 1: Gradient Wash + Floating Text
```
┌─────────────────────────────────────────┐
│                                         │
│        [full-bleed gradient mesh]       │
│                                         │
│     floating text — offset, luminous    │
│     (delicate, airy, letter-spaced)     │
│                                         │
└─────────────────────────────────────────┘
```

### Pattern 2: Overlapping Translucent Sheets
```
┌─────────────────────────────────────────┐
│                                         │
│   [wash A]                              │
│              [wash B — 60% opacity]     │
│                      [wash C — 40%]     │
│   text drifts above the overlap         │
│                                         │
└─────────────────────────────────────────┘
```

Layers slide over one another on scroll. Each sheet is soft-saturated so the stack stays legible and creates deep, ambiguous depth.

### Pattern 3: Drift Sequence (Dream Scroll)
```
┌─────────────────────────────────────────┐
│  [state 1 — weightless moment]          │
│  (elements hover, barely moving)        │
├─────────────────────────────────────────┤
│  [state 2 — intermediate drift]         │
│  (fog shifts, the wash breathes)        │
├─────────────────────────────────────────┤
│  [state 3 — dream settle]               │
│  (faint glow return, slow calm)         │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|---------------|
| **Desktop (1200px+)** | Full-wash atmosphere, layered translucent sheets, gentle parallax drift |
| **Tablet (768px)** | Washes still full-bleed, fewer overlapping sheets, reduced drift |
| **Mobile (375px)** | Full-wash atmosphere, text stacked above the wash (no overlap), no parallax |

**On mobile:** The atmosphere still dominates, but text sits directly on the wash rather than overlapping busy aurora deposits — legibility collapses in motion on small screens. Softness is carried by color and grain, not by high-speed blur.

---

## Layout Don'ts

| Don't                    | Do Instead                      |
|--------------------------|---------------------------------|
| Card grids               | Floating sections over gradient wash |
| Center-based layouts     | Asymmetric, weightless drift    |
| Dense rows of products   | Diluted generous blank space    |
| Tight, packed content    | Generous air, hovering content  |
| Heavy standard navigation | Minimal, translucent nav that floats |
| Solid bordered containers | Translucent wash sheets, no borders |
| Several hero elements looming | One elemental moment per scene |

# Texture & Surface

## Primary Texture: Gradient Mesh Atmosphere

The texture IS the atmosphere. Every surface should have the qualities of light passing through something soft:

| Quality | Description |
|---------|-------------|
| **Gradient mesh** | Pastel fields that bleed into each other — no seams, no hard boundaries |
| **Cloud-like diffusion** | Everything passes through soft blur — 1-3px Gaussian, like looking through mist |
| **Soft glow** | Light halos around elements — luminance instead of shadow |
| **Light leaks** | Occasional soft flares of warm cream or lavender light crossing a field |
| **Fine grain** | Nearly invisible film grain (0.01-0.02 opacity) — the texture of memory |

**The goal:** No surface should look manufactured. Every surface should look like it exists inside a dream — lit from within, diffused by atmosphere, soft at every edge.

---

## Soft Glow Surfaces

```css
.glow-surface {
  background: radial-gradient(
    80% 80% at 50% 40%,
    rgba(245, 221, 227, 0.5),
    rgba(227, 220, 240, 0.25) 60%,
    transparent 100%
  );
  filter: blur(1px);
  box-shadow: var(--glow-soft);
}
```

**Purpose:** UI elements glow rather than sit. The radial gradient + blur makes every surface look like a soft concentration of atmosphere — a bloom of light, not a panel. Borders are either absent or hairlines at 30% opacity.

---

## Mist & Fog Layers

```css
.mist-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(246, 241, 240, 0) 0%,
    rgba(246, 241, 240, 0.55) 40%,
    rgba(220, 233, 242, 0.35) 70%,
    rgba(246, 241, 240, 0) 100%
  );
  filter: blur(12px);
  mix-blend-mode: screen;
}
```

**Purpose:** Fog layers sit between background and content, creating depth through atmosphere rather than shadow. Overlapping translucent layers (design principle: layout is non-grid, layers overlap) are what make the page feel three-dimensional — not elevation, but weather.

---

## Image Processing

Imagery should be processed to live inside the dream:

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Soft blur** | Dreamlike focus | 0.5-2px Gaussian blur |
| **Low saturation** | Pastel diffusion | Saturation 60-75% |
| **Brightness lift** | Glowing, ethereal light | Brightness +5 to +10 |
| **Contrast reduction** | Soft over sharp | Contrast -10 to -15 |
| **Grain** | Memory-like texture | Opacity 0.01-0.02, overlay |
| **Light leak wash** | Cream or lavender flare | Soft overlay at 10-15% opacity |

**The goal:** Images look like memories of a place — bright, soft, slightly faded, with color fields that feel larger than the subject.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Gradient mesh + aurora, alive with slow drift |
| Cards/panels | None — no hard containers, no borders, no flat fills |
| Text | Floating directly on atmosphere, translucent |
| UI elements | Glow surfaces, blurred edges, 30% hairlines at most |
| Buttons | Glowing bloom, fully rounded (pill or organic blob) |
| Navigation | Floating, translucent, minimal |
| Dividers | None — sections melt into each other through fog |

**No cards, no panels, no hard edges.** The style bans hard edges entirely — every boundary diffuses. If a section needs separation, use mist or a change in atmosphere, never a line or a box.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Hard edges, sharp borders | Diffused edges, soft blur, fog |
| Flat solid-color surfaces | Gradient mesh, glow, atmosphere |
| Shadows and depth via darkness | Glow and light — luminance is the depth cue |
| Bold saturated textures | Low-saturation pastel washes |
| Geometric patterns | Cloud-like diffusion, organic fields |
| Heavy film grain | Nearly invisible grain (0.01-0.02) |
| Sharp photography | Soft, bright, slightly blurred imagery |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `gradient mesh` | The environment itself — pastel surfaces that bleed into each other, alive but calm |
| `aurora effect` | Slow-shifting, low-saturation color fields that ripple like northern lights |
| `floating element` | The core composition device — objects hover weightless, not grid-locked |
| `pastel diffusion` | Soft blur and cloud-like spread — no hard edges anywhere |
| `weightless drift` | The signature motion — slow, continuous, barely perceptible movement |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `light leak` | Film-style soft light bleeding into the frame — gentle, dreamlike glow |
| `soft glow` | Halation around elements — nothing is lit sharply, everything radiates |
| `mist` | Atmospheric fog that diffuses depth and softens layers |
| `cloud-like diffusion` | Edges dissolve into the background — surfaces have no borders |
| `translucent layer` | Overlapping semi-transparent planes that stack dreamlike depth |
| `gentle parallax` | Slow depth shift as the page moves — elements at different altitudes |
| `aurora gradient` | Animated mesh gradient — hue and position shift on a slow cycle |
| `breathing motion` | Subtle scale/opacity pulsing — the page is alive but asleep |
| `drifting hover` | Elements that float and bob slowly in place, never settling |
| `soft grain` | Fine film grain over everything — unifies the pastel fields |

---

## Context Terms

| Term | Mood |
|------|------|
| `dreamscape` | A scene from a dream — soft, weightless, otherworldly |
| `dream` | Slow, blurred, pastel, impossible calm |
| `weightless` | Zero gravity feel — floating, drifting, suspended |
| `ethereal` | Light, insubstantial, celestial |
| `otherworldly` | Beyond the ordinary — atmospheric, ungrounded |
| `misty` | Softened by fog — depth and contrast dissolved |
| `pastel` | Soft, low-saturation color — gentle, never loud |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `hard edges` | Everything blurs and diffuses — nothing is crisp |
| `sharp contrast` | The palette is soft and low-contrast — no striking light/dark jumps |
| `grid-locked layout` | Elements float freely in space — not aligned to a rigid grid |
| `bold saturated colors` | Saturation is the enemy — colors stay soft and faded |
| `fast motion` | Motion axis is 5/5 — everything drifts slowly, never snaps |
| `heavy type` | Only light weights — text should float, not anchor |
| `solid blocks` | Dense, filled surfaces — the page is translucent and layered |
| `geometric precision` | Shapes are organic, blurred, diffused — not exact |

---

## Prompt-Ready Phrases

```
"gradient mesh background — soft pastel fields bleeding into each other"
"aurora effect — low-saturation color fields with slow, continuous shift"
"floating elements — weightless drift, nothing grid-locked"
"pastel diffusion — soft blur, cloud-like edges, no hard borders"
"light leak — film-style soft light bleeding into the frame"
"soft glow — halation around elements, never sharp lighting"
"mist and fog — atmospheric layers dissolving depth"
"slow drift animations — 8-12s cycles, barely perceptible"
"gentle parallax — elements at different altitudes moving slowly"
"translucent overlapping layers — dreamlike stacked depth"
"soft grain over everything — unifies the pastel fields"
"light sans-serif (Outfit Light / Satoshi Light) with generous letter-spacing"
"no hard edges, no sharp contrast, no saturated color, no grid-locked layout"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Wellness brands** | The weightless, calming atmosphere embodies health, rest, and self-care |
| **Luxury skincare** | Soft pastel diffusion and glow signal premium, gentle, spa-like care |
| **Fragrance houses** | The atmospheric, dreamlike mood matches scent's intangible, evocative nature |
| **Meditation & sleep apps** | Slow drift, aurora effects, and pastel gradients create the exact mental state the product sells |
| **Creative portfolios** | Non-grid floating composition signals art direction and visual freedom |
| **Experiential campaigns** | The otherworldly aesthetic makes a launch feel like an event, not an ad |
| **Fantasy / dreamlike game art** | Floating elements and mist effects match imagined worlds directly |
| **Editorial (dreamlike, fashion, beauty)** | The ethereal mood suits aspirational, slow-paced longform features |

## Brand Personality Match

This style reinforces brands that are:
- **Soft** — gentle, calm, never aggressive or loud
- **Floating** — weightless, unburdened, aspirational rather than grounded
- **Otherworldly** — dreamlike, pastel, removed from harsh reality
- **Quietly premium** — luxury expressed through atmosphere, not logo size
- **Sensory** — the page is felt (mist, glow, drift) before it is read

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B** | The dreamlike aesthetic undermines seriousness and analytical trust |
| **Data-heavy dashboards** | Low density (axis: 1) and non-grid layout can't hold dense information |
| **News/journalism** | Soft pastels and drifting composition read as fluff, not credibility |
| **Hardware/technical products** | Specs and precision fight the soft-over-sharp principle |
| **E-commerce (catalog-heavy)** | Free-floating layout can't support tight product grids at scale |
| **Budget/mass-market brands** | The ethereal aesthetic signals luxury; it rings false at low price points |
| **High-contrast or bold brands** | If the identity needs energy or sharpness, this style smothers it |

## How to Decide

Ask: **"Does my brand want to feel like a dream — weightless, pastel, softly glowing, and free of hard edges?"**

If yes → Ethereal Dreamscape.
If no → Consider Quiet Editorial (if you want calm and minimal but grounded in text), Organic Botanical Warmth (if you want soft and natural but tactile and earthy), or Liquid Glass Noir (if you want atmospheric but dark and reflective).

# Reference Gallery

## Live Sites

### Ethereal Dreamscape Reference Implementation
- **What works:** Full-bleed gradient mesh backgrounds, floating translucent elements, pastel aurora surfaces, slow drift motion, weightless non-grid composition
- **URL:** Reference implementation — the canonical example of this style

### Aesop (aesop.com)
- **What works:** Restrained, atmospheric minimalism; soft neutrals and cream; slow, editorial pacing that lets surfaces and light do the work — the closest grounded cousin of the dreamscape palette
- **URL:** aesop.com

### Olaplex (olaplex.com)
- **What works:** Blush, powder, and cream pastel washes; soft glow on product surfaces; gentle floating composition in hero sections; beauty-science warmth without clinical harshness
- **URL:** olaplex.com

### Airbnb — Experience/Stories Moments (airbnb.com)
- **What works:** Occasional soft, dreamlike art direction in featured stays and editorial moments — misty landscapes, muted pastel skies, slow crossfades between scenes; proof the aesthetic works for aspirational lifestyle at scale
- **URL:** airbnb.com (featured collections and online experiences landing pages)

### thatgamecompany — Sky: Children of the Light (thatgamecompany.com)
- **What works:** Fantasy-game art direction with exactly this DNA: floating islands, soft gradient skies, luminous pastel silhouettes, weightless motion, drifting particles — the most direct fantasy-game exemplar of the style
- **URL:** thatgamecompany.com

### Byredo (byredo.com)
- **What works:** Fragrance-house minimalism with dreamlike restraint — negative space, muted pastel tints, soft-focus imagery, generous letter-spacing on thin type
- **URL:** byredo.com

### Awwwards Ethereal/Dreamlike Sites
- **What works:** Gradient mesh backgrounds, floating elements, aurora effects, slow drift transitions, pastel palettes in award-winning art direction
- **URL:** awwwards.com (search "ethereal," "dreamlike," or "gradient mesh" trends)

## Key Visual References

### Imagery Style
- **Soft-focus photography** — mist, fog, lens glow, haze between subject and camera
- **Floating subjects** — objects suspended weightless, not resting on surfaces
- **Aurora / gradient mesh surfaces** — color fields that shift and breathe like living skies
- **Cloud-like diffusion** — everything softens at the edges; nothing is sharp

### Color References
- **Lavender** — #C9B8E8 (soft pastel base)
- **Blush pink** — #F2C9D8 (warm pastel accent)
- **Powder blue** — #BBD8E8 (cool pastel accent)
- **Cream** — #F7F1E8 (grounding neutral, text-friendly surface)
- **Mint** — #C5E5D8 (secondary pastel accent)
- **Low-saturation gradients** — pastels bleed into each other; never more than 2-3 hues on screen at once

### Typography References
- **Outfit Light** — airy sans, light weight, doesn't compete with atmosphere
- **Satoshi Light** — clean, geometric-soft alternative sans
- **Delicate serif accent (optional)** — Fraunces Light Italic or similar for poetic display lines
- **Generous letter-spacing** — wide tracking on labels and headings, 0.15-0.25em, uppercase optional
- **Small-to-medium display sizes** — display max 3rem, body 14-16px; the atmosphere is the hero, not the type

### Motion References
- **Drift** — 12-20s, barely perceptible, ease-in-out, infinite
- **Float/bob** — 3-5% translateY, 8-12s, gentle sine wave
- **Aurora shift** — gradient position/opacity animation, 15-30s, seamless loop
- **Parallax** — very gentle, 5-10% of scroll velocity
- **Entrance** — 2000-3000ms for imagery, 1500ms for text, soft fade + slight upward drift (VERY slow)

## Screenshot Notes

> When capturing references for this style, look for:
> - The atmosphere (must be dreamlike, misty, softly glowing — not crisp or clinical)
> - The color palette (must be low-saturation pastels — lavender, blush, powder blue, cream — no bold saturated hues)
> - The motion (must be slow, drifting, floating — never snappy or bouncy)
> - The text density (must be minimal — atmosphere carries most of the weight)
> - The composition (must be free-floating and layered, not grid-locked)
> - The edges (must be soft, blurred, diffused — no hard lines or sharp contrast)
> - The overall mood (must feel weightless, calm, otherworldly)