# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, neutral sans-serif — doesn't compete with the imagery |
| **Examples** | Geist, Inter, Söhne, Aktiv Grotesk, Satoshi |
| **Weight** | 300-400 (light — the imagery is heavy, the type is not) |
| **Tracking** | 0.02em-0.06em (slightly open, breathable) |
| **Size** | `clamp(1.5rem, 3vw, 3rem)` — moderate, not monumental |
| **Transform** | Sentence case, never uppercase for display |

**Why neutral sans:** The imagery is surreal and dreamlike. The typography should be the opposite — neutral, clean, invisible. If the type has personality, it competes with the imagery. Geist and Inter are designed to be invisible — the reader sees through them to the content.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display, lighter weight |
| **Examples** | Geist Light, Inter Light (300), Söhne Light |
| **Weight** | 300-400 (light — floating, not grounded) |
| **Tracking** | 0.01em-0.02em (standard) |
| **Size** | `clamp(0.875rem, 1vw, 1rem)` — 14-16px |
| **Line Height** | 1.6-1.7 (generous, slow reading) |

**Why light weight:** The text should feel like it's floating over the imagery — weightless, translucent, dreamlike. Heavy type would anchor it to the page; light type lets it drift.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, light weight, wide tracking |
| **Examples** | Geist Light, Inter Light |
| **Weight** | 300 |
| **Tracking** | 0.15em-0.25em (very wide, like dream annotations) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, image captions, technical annotations. These tiny labels feel like the metadata of a dream — "LATENT SPACE", "SEED 42", "STEP 1000".

---

## Type Scale

```
Display:  clamp(1.5rem, 3vw, 3rem)    — moderate, neutral
Body:     clamp(0.875rem, 1vw, 1rem)  — 14-16px, light
Micro:    10-12px                      — dream annotations
```

The scale is compact — 10px to 48px. The contrast is between the surreal imagery and the neutral type, not between type sizes. The type is deliberately small — it doesn't compete with the visuals.

---

## Font Pairing Logic

**Single family approach:** Use one typeface (Geist or Inter) at multiple weights. Light for display, Light/Regular for body, Light for micro. The consistency creates visual quiet — one voice at different volumes, all whispering.

**Never:** Serif typefaces (too literary — this is synthetic, not editorial), decorative fonts (too much personality — competes with imagery), or monospace (too technical — this is dreamlike, not technical).

# Color Architecture

## Ground

The ground is the AI imagery itself — there is no solid background color. However, for text areas and transitions:

```css
--color-ground-dark: #0D0D12;     /* Near-black with slight purple tint */
--color-ground-light: #F0EDE8;    /* Warm off-white, like aged paper */
```

**Why tinted black:** Not pure #000000 — a slight purple/blue tint (#0D0D12) connects to the dreamlike palette. Pure black feels digital; tinted black feels like the dark parts of a dream.

---

## Desaturated Pastel Base

```css
--pastel-pink: #E8D5D5;       /* Dusty rose — soft, faded */
--pastel-lavender: #D5D5E8;   /* Muted lavender — dreamlike */
--pastel-blue: #D5DEE8;       /* Dusty blue — ethereal */
--pastel-green: #DDE8D5;      /* Pale sage — natural but muted */
--pastel-peach: #E8DDD5;     /* Warm peach — soft, faded */
```

**These are the base colors.** They appear in the AI imagery, in text overlays, and in UI elements. They're desaturated — pulled toward gray — so they feel like memories or dreams rather than reality.

---

## Saturated Accents

```css
--accent-magenta: #FF006E;    /* Vivid magenta — sudden, electric */
--accent-electric-blue: #3A86FF; /* Electric blue — dream vivid */
--accent-orange: #FB5607;     /* Saturated orange — warm vivid */
--accent-violet: #8338EC;    /* Deep violet — psychedelic */
```

**Usage:** Saturated accents appear WITHIN the desaturated pastel fields — a vivid magenta flower in a dusty pink field, an electric blue ripple in a muted lavender pool. The contrast between muted base and saturated accent is the dreamlike color dynamic.

**Rule:** Saturated accents should be rare and surprising. If everything is saturated, the effect is lost. The saturation should feel like a vivid memory within a faded dream.

---

## Text

```css
--color-text-on-dark: rgba(240, 237, 232, 0.85);  /* Warm off-white, translucent */
--color-text-on-light: rgba(13, 13, 18, 0.85);    /* Dark, translucent */
--color-text-muted: rgba(240, 237, 232, 0.5);    /* Muted, for labels */
```

**Why translucent text:** The text should feel like it's floating over the imagery — not sitting on top of it. Translucent text (85% opacity) creates a sense that the text is part of the dream, not an annotation on top of it.

---

## Iridescent / Oily Surface Colors

```css
--iridescent-surface: conic-gradient(
  from 0deg,
  #E8D5D5, #D5D5E8, #D5DEE8, #DDE8D5, #E8DDD5, #E8D5D5
);
```

**Usage:** Iridescent surface colors appear on UI elements — buttons, borders, hover states. The iridescence shifts like oil on water — a rainbow that's desaturated and dreamlike, not vivid and holographic.

---

## Color Don'ts

| Don't | Do Instead |
|------|------------|
| Uniformly saturated palette | Desaturated base with rare saturated accents |
| Pure #000000 background | Tinted black #0D0D12 or the imagery itself |
| Pure #FFFFFF text | Translucent warm off-white (85% opacity) |
| Corporate color palettes | Dreamlike pastels — dusty, faded, memory-like |
| Sharp color transitions | Morphing, blending color shifts |
| Realistic color grading | Dreamlike color grading — impossible color combinations |

# Motion Principles

## Philosophy

Motion in AI-Surreal is **dreamlike and morphing**. Nothing snaps, nothing bounces, nothing moves with mechanical precision. Elements drift like objects in a dream — slowly, continuously, morphing between states. The motion should feel like watching a latent space interpolation — one image slowly becoming another, one form melting into the next.

---

## Drift Motion

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Full-bleed imagery | Subtle scale(1.0)→scale(1.04) + opacity breathing | 8-12s | `ease-in-out`, infinite |
| Floating text | translateY(0)→translateY(-8px)→0 | 6-8s | `ease-in-out`, infinite |
| UI elements | Subtle position drift (2-4px) | 10-15s | `ease-in-out`, infinite |

**The drift should be barely perceptible.** Like watching a dream — you don't notice the movement while it's happening, but when you look away and back, things have shifted. The motion creates a sense that the page is alive, breathing, dreaming.

---

## Morphing Transitions

```css
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33% { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
  66% { border-radius: 30% 70% 50% 50% / 40% 50% 60% 60%; }
}

.morph-element {
  animation: morph 12s ease-in-out infinite;
}
```

**Purpose:** Morphing transitions between states — one form slowly becoming another. This mimics the latent space interpolation of AI image generation: seed 42 slowly morphing into seed 43. The morphing should be slow (10-15s) and continuous.

---

## Parallax Through Latent Space

| Effect | Specification |
|--------|--------------|
| Scroll-linked image shift | As the user scrolls, the imagery slowly shifts — like moving through latent space |
| Depth parallax | Foreground elements drift faster than background (subtle, 3-5%) |
| Image crossfade | Between sections, images crossfade through 2-3 intermediate states |
| Color morphing | Pastel colors slowly shift hue as the user scrolls |

**The scroll should feel like traveling through latent space.** Each scroll position reveals a slightly different version of the image — like scrolling through AI-generated variations. The transitions should be smooth, morphing, dreamlike.

---

## Breathing / Pulsing

```css
@keyframes breathe {
  0%, 100% { opacity: 0.9; transform: scale(1.0); }
  50% { opacity: 1.0; transform: scale(1.02); }
}

.breathe {
  animation: breathe 6s ease-in-out infinite;
}
```

**Purpose:** Subtle breathing/pulsing on imagery and UI elements — like the page is alive. The effect should be barely perceptible — a 2% scale change and 10% opacity shift over 6 seconds. It creates a sense of organic, living motion.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Full-bleed imagery | Opacity 0→1 + scale(1.06)→1 | 2500ms | `ease-out` | 0ms |
| Display text | Opacity 0→1 + translateY(12px)→0 | 1500ms | `ease-out` | 800ms |
| Body text | Opacity 0→1 | 1200ms | `ease-out` | 1200ms |
| UI elements | Opacity 0→1 + scale(0.98)→1 | 1000ms | `ease-out` | 1500ms |

**Key:** All durations are VERY SLOW (1000ms+). This is the slowest-moving style. The motion should feel like emerging from a dream — gradual, inevitable, unhurried.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Imagery | Subtle brightness 1.0 → 1.03 (800ms) | — |
| Text | Opacity 0.85 → 1.0 (500ms) | — |
| Buttons | Iridescent gradient shift (1000ms) | — |
| Links | Color morph through pastel hues (600ms) | — |

**All hover transitions are slow (500ms+).** Quick hover states feel mechanical and break the dreamlike atmosphere.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All drift: disabled (static)
- Morphing: disabled
- Breathing: disabled
- 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, snappy transitions | Breaks the dreamlike atmosphere |
| Bounce or spring physics | Too energetic — this is drifting, not bouncing |
| Mechanical, linear motion | Too precise — dreams aren't precise |
| Staggered reveals | Motion should be continuous, not choreographed |
| Auto-playing carousels | The user controls the pace through scroll |
| Particle effects | Too digital — this is organic and dreamlike |

# Layout Grammar

## Grid System

**No visible grid.** The layout is image-dominant, asymmetric, and floating. Content drifts over full-bleed imagery. Internally:

- Full-bleed sections: 100vw width, `min-h-[100dvh]`
- Text containers: max-width 520px (moderate, floating)
- Text placement: asymmetric, floating, never centered in a grid
- Overlays: translucent, positioned at viewport edges or offset

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Full-bleed AI-generated surreal imagery |
| Text position | Floating, asymmetric — bottom-left or top-right offset |
| Headline size | `clamp(1.5rem, 3vw, 3rem)` — moderate, not monumental |
| Text opacity | 85% — translucent, floating over imagery |

```
┌─────────────────────────────────────────┐
│                                         │
│  [Full-bleed AI-generated surreal image]│
│  [Dreamlike, impossible materials]      │
│  [Morphing, drifting]                   │
│                                         │
│  LATENT SPACE                           │
│  Dreamlike compositions from            │
│  machine imagination                    │
│  [ENTER]                                │
└─────────────────────────────────────────┘
```

**The hero is the imagery.** Text floats over it, translucent and minimal. The image carries 90% of the visual weight.

---

## Section Spacing

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

**Spacing is generous.** The sections should feel like scenes in a dream — each with its own imagery, separated by the pause of whitespace. The pacing is slow, dreamlike, unhurried.

---

## Layout Patterns

### Pattern 1: Full-Bleed Image + Floating Text
```
┌─────────────────────────────────────────┐
│  [Full-bleed AI surreal imagery]        │
│                                         │
│       floating text                    │
│       (translucent, offset)             │
│                                         │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Image + Text
```
┌──────────────────┬──────────────────────┐
│                  │                      │
│  [AI surreal    │  Label               │
│   imagery]       │  Headline            │
│                  │  Body text           │
│                  │  (translucent)       │
│                  │                      │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Image Sequence (Latent Space Scroll)
```
┌─────────────────────────────────────────┐
│  [Image state 1]                       │
│  (morphs as you scroll)                 │
├─────────────────────────────────────────┤
│  [Image state 2]                       │
│  (intermediate morph)                  │
├─────────────────────────────────────────┤
│  [Image state 3]                       │
│  (final state)                          │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full-bleed imagery, floating text, parallax through latent space |
| **Tablet (768px)** | Imagery still full-bleed, text overlays simplified, reduced parallax |
| **Mobile (375px)** | Full-bleed imagery, text below image (stacked), minimal parallax |

**On mobile:** The imagery should still dominate. Text stacks below the image rather than overlaying — overlays can be hard to read on small screens. The dreamlike quality is maintained through the imagery, not the motion.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Card grids | Full-bleed image sections with floating text |
| Centered, grid-based layouts | Asymmetric, floating, image-dominant |
| Dense content areas | Generous spacing with surreal imagery |
| Text-heavy sections | Minimal text — imagery carries the weight |
| Standard navigation | Minimal, translucent nav that floats |
| Bordered containers | No borders — content floats freely over imagery |
| Multiple images per section | One full-bleed image per section (or morphing sequence) |

# Texture & Surface

## Primary Texture: AI-Generated Imagery

The texture IS the AI imagery. Every image should have the qualities of machine-generated art:

| Quality | Description |
|---------|-------------|
| **Impossible materials** | Surfaces that don't exist in reality — liquid metal flowers, glass clouds, stone water |
| **Hybrid surfaces** | Materials blending into each other — flesh becoming stone, water becoming light |
| **Scale ambiguity** | Objects at impossible scales — a tiny galaxy, a massive cell, a landscape inside a drop |
| **Physics violations** | Gravity, light, and shadow that don't obey real-world physics |
| **Intentional artifacts** | AI glitches, weird geometry, texture inconsistencies — featured, not hidden |

**The goal:** Every image should feel like it came from a machine's imagination — not a photograph, not an illustration, but something that could only exist in latent space.

---

## Morphing Surfaces

```css
.morph-surface {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 12s ease-in-out infinite;
  filter: blur(0.5px);
}

@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33% { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
  66% { border-radius: 30% 70% 50% 50% / 40% 50% 60% 60%; }
}
```

**Purpose:** UI elements with morphing borders — shapes that slowly shift like organic, living surfaces. This echoes the morphing quality of AI imagery and creates a sense that the UI is part of the same dreamlike world.

---

## Iridescent / Oily Surfaces

```css
.iridescent-surface {
  background: conic-gradient(
    from 0deg,
    #E8D5D5, #D5D5E8, #D5DEE8, #DDE8D5, #E8DDD5, #E8D5D5
  );
  background-size: 200% 200%;
  animation: iridescent-shift 8s ease-in-out infinite;
  filter: saturate(0.7);
}

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

**Purpose:** Iridescent surfaces on UI elements — like oil on water or a soap bubble. The iridescence is desaturated (filter: saturate(0.7)) to match the dreamlike palette. It shifts slowly, creating a living, shimmering surface.

---

## Image Processing

AI imagery should be processed to enhance the dreamlike quality:

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Slight blur** | Soft, dreamlike focus | 0.5-1px Gaussian blur |
| **Color grade** | Desaturated pastels with saturated accents | Saturation 80-90% base, selective saturation boost |
| **Contrast reduction** | Faded, memory-like | Contrast -10 to -15 |
| **Warm/cool shift** | Dreamlike color temperature | Slight purple/blue tint in shadows |
| **Grain** | Subtle analog texture | Opacity 0.02-0.03, overlay |

**The goal:** The imagery should feel like a memory or a dream — slightly faded, slightly blurred, with vivid accents that feel like remembered details.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Full-bleed AI surreal imagery |
| Text overlays | Translucent (85% opacity), floating, no background |
| UI elements | Morphing borders, iridescent surfaces |
| Buttons | Iridescent gradient, morphing border-radius |
| Navigation | Translucent, floating, minimal |
| Dividers | None — sections transition via morphing crossfades |

**No cards, no panels, no solid backgrounds.** Everything floats over the imagery. The only surfaces are the morphing, iridescent UI elements.

---

## Texture Don'ts

| Don't | Do Instead |
|------|------------|
| Realistic photography | AI-generated surreal imagery |
| Clean, artifact-free images | Intentional AI artifacts as design elements |
| Sharp, precise borders | Morphing, organic borders |
| Solid color backgrounds | Full-bleed AI imagery |
| Flat UI surfaces | Iridescent, morphing, oily surfaces |
| Digital gradients | Iridescent conic gradients with desaturated shifts |
| Geometric patterns | Organic, morphing, dreamlike textures |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `latent space` | The space of possible images — the source of all AI imagery |
| `synthetic media` | AI-generated imagery embraced as aesthetic, not hidden |
| `dreamlike` | Slow, morphing, impossible — the core mood |
| `morphing transitions` | One state slowly becoming another — latent space interpolation |
| `desaturated pastels` | The base palette — faded, memory-like, dusty |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `impossible materials` | Surfaces that don't exist in reality — liquid metal flowers, glass clouds |
| `hybrid surfaces` | Materials blending — flesh becoming stone, water becoming light |
| `scale ambiguity` | Objects at impossible scales — tiny galaxy, massive cell |
| `intentional artifacts` | AI glitches featured as design elements |
| `saturated accents` | Vivid colors within desaturated fields — vivid memory in faded dream |
| `drift motion` | Slow, continuous, barely perceptible movement |
| `breathing` | Subtle scale/opacity pulsing — the page is alive |
| `iridescent surface` | Oil-on-water shimmer — desaturated rainbow |
| `morphing border` | Border-radius that slowly shifts — organic, living shape |
| `translucent text` | 85% opacity text floating over imagery |

---

## Context Terms

| Term | Mood |
|------|------|
| `dream` | Slow, morphing, impossible, vivid accents |
| `memory` | Faded, desaturated, with vivid remembered details |
| `latent space interpolation` | One image slowly becoming another |
| `uncanny valley` | Almost real but not quite — the AI aesthetic |
| `machine imagination` | Images that could only come from a machine |
| `surreal` | Impossible, dreamlike, beyond reality |
| `ethereal` | Light, floating, insubstantial |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `realistic photography` | The imagery must be synthetic, not real |
| `geometric precision` | Everything should be organic, morphing, imprecise |
| `corporate minimalism` | Too clean, too professional — this is dreamlike, not corporate |
| `sharp edges` | Everything morphs, drifts, blends |
| `snappy motion` | Motion is slow, dreamlike, morphing |
| `saturated palette` | Base is desaturated — saturation is the rare accent |
| `card-based layout` | Full-bleed imagery with floating text, not cards |
| `text-heavy` | Imagery carries 90% of the weight — text is minimal |
| `solid backgrounds` | The imagery IS the background |
| `digital gradients` | Iridescent, morphing, oily surfaces — not smooth gradients |

---

## Prompt-Ready Phrases

```
"full-bleed AI-generated surreal imagery as hero"
"desaturated pastel palette with rare saturated accents"
"morphing transitions between states (latent space interpolation)"
"drift motion — slow, continuous, barely perceptible (8-12s)"
"breathing animation — subtle scale/opacity pulsing"
"translucent text at 85% opacity floating over imagery"
"impossible materials — liquid metal flowers, glass clouds, stone water"
"intentional AI artifacts as design elements"
"iridescent surface — desaturated conic gradient with slow shift"
"morphing border-radius — organic, living UI shapes"
"neutral sans-serif (Geist/Inter) at light weight — doesn't compete"
"image-dominant layout — text is metadata, not message"
"no cards, no solid backgrounds — everything floats over imagery"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **AI/ML companies** | The aesthetic literally embodies the product — synthetic, machine-imagined |
| **Creative tech** | The dreamlike, experimental aesthetic signals creative capability |
| **Experimental portfolios** | Artists and designers exploring AI as a medium |
| **Art direction for tech brands** | The surreal aesthetic differentiates from corporate tech design |
| **Music visuals** | The dreamlike, morphing quality matches ambient and experimental music |
| **Generative art platforms** | The style showcases what generative tools can create |
| **Fashion (avant-garde)** | The impossible materials and surreal compositions push fashion forward |

## Brand Personality Match

This style reinforces brands that are:
- **Synthetic** — embracing AI and machine generation as aesthetic
- **Dreamlike** — ethereal, morphing, not grounded in reality
- **Experimental** — pushing boundaries, not following conventions
- **Visual-first** — imagery carries the message, text is secondary
- **Uncanny** — comfortable with the uncanny valley

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B** | Too surreal, too experimental for professional services |
| **E-commerce** | The image-dominant layout can't support product grids |
| **News/journalism** | The dreamlike aesthetic undermines credibility |
| **Healthcare** | The uncanny, synthetic quality is the opposite of reassuring |
| **Government/legal** | Too experimental, too "internet" |
| **Content-heavy sites** | The minimal text and image-dominant layout can't support long-form content |
| **Brands needing trust** | The surreal, morphing aesthetic feels unstable and dreamlike |

## How to Decide

Ask: **"Does my brand want to feel like a machine's dream — synthetic, surreal, and unapologetically AI-generated?"**

If yes → AI-Surreal / Latent Space.
If no → Consider Ethereal Dreamscape (if you want dreamy without AI), Dark Cinematic Studio (if you want dark and atmospheric), or Generative Algorithmic (if you want computational but precise).

# Reference Gallery

## Live Sites

### AI-Surreal Reference Implementation
- **What works:** Full-bleed AI-generated surreal imagery, desaturated pastels with saturated accents, morphing transitions, drift motion, translucent floating text
- **URL:** Reference implementation — the canonical example of this style

### Refik Anadol (refikanadol.com)
- **What works:** AI-generated data art, machine-learning visualizations, dreamlike computational aesthetics
- **URL:** refikanadol.com

### Bot & Dolly (botanddolly.com)
- **What works:** Experimental design, robotic cinematography, surreal visual compositions
- **URL:** botanddolly.com (archive)

### Awwwards Experimental Sites
- **What works:** AI-generated imagery, morphing transitions, dreamlike color palettes, drift motion
- **URL:** awwwards.com (search "surreal" or "AI art" trends)

## Key Visual References

### AI Imagery Style
- **Impossible materials** — liquid metal flowers, glass clouds, stone water
- **Hybrid surfaces** — materials blending into each other
- **Scale ambiguity** — tiny galaxies, massive cells, landscapes inside drops
- **Intentional artifacts** — AI glitches featured as design elements

### Color References
- **Desaturated pastels** — dusty rose #E8D5D5, muted lavender #D5D5E8, dusty blue #D5DEE8
- **Saturated accents** — vivid magenta #FF006E, electric blue #3A86FF, deep violet #8338EC
- **Tinted black** — #0D0D12 (slight purple tint, not pure black)
- **Translucent text** — 85% opacity warm off-white

### Typography References
- **Geist Light** — neutral, invisible, doesn't compete with imagery
- **Inter Light (300)** — clean, readable, light weight
- **Small sizes** — display max 3rem, body 14-16px, micro 10-12px
- **Wide tracking on labels** — 0.15-0.25em, uppercase

### Motion References
- **Drift** — 8-12s, barely perceptible, ease-in-out, infinite
- **Morphing** — border-radius shifts, 12s, organic
- **Breathing** — 2% scale, 10% opacity, 6s, ease-in-out
- **Entrance** — 2500ms for imagery, 1500ms for text (VERY slow)

## Screenshot Notes

> When capturing references for this style, look for:
> - The imagery (must be AI-generated, not photographic)
> - The color palette (must be desaturated base with rare saturated accents)
> - The motion (must be slow, drift, morph — not snappy)
> - The text density (must be minimal — imagery carries 90% of weight)
> - The UI shapes (must be morphing, organic — not sharp/geometric)
> - The backgrounds (must be full-bleed imagery — no solid colors)
> - The overall mood (must feel dreamlike, synthetic, uncanny)