Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
RétroSombreSpirituel
Vorschau

Dreamcore

Overview

Dreamcore is a surrealist internet aesthetic defined by liminal spaces, uncanny emptiness, VHS distortion, and the eerie nostalgia of places that feel familiar yet deeply wrong. It draws from half-remembered dreams, abandoned architecture, and the glitchy imperfection of degraded analog media. In digital design, Dreamcore manifests as unsettling layouts with washed-out palettes, off-kilter typography, static noise overlays, and compositions that provoke a sense of disorientation and vague unease -- as if the viewer has wandered into a space that exists between waking and sleep.

Visual Characteristics

Core Design Traits

  • Liminal space imagery: Empty corridors, deserted swimming pools, abandoned malls, featureless rooms, and infinite hallways that feel transitional and unresolved
  • VHS and analog distortion: Scanlines, chromatic aberration, tracking errors, color bleeding, and static noise that degrade the image surface
  • Washed-out, low-saturation palette: Faded yellows, sickly greens, desaturated blues, and off-whites that feel like overexposed film or aged monitors
  • Uncanny lighting: Fluorescent flicker, inconsistent shadow directions, overly bright rooms with no visible light source, and sunset skies that feel too vivid
  • Dreamlike scale distortion: Elements that are slightly too large or too small, rooms that feel impossibly deep, and proportions that defy logic
  • Text as ambient element: Words and labels that appear as signage, watermarks, or system messages rather than traditional typographic hierarchy
  • Empty negative space: Large expanses of nothingness that create unease through absence rather than presence

Design Principles

  • Create unease through subtlety, not shock: the most effective Dreamcore feels almost normal
  • Use emptiness as a compositional tool; what is missing matters more than what is present
  • Degrade the design surface with noise, blur, and analog artifacts to break digital perfection
  • Avoid clear narrative or logical structure; content should feel fragmented and disjointed
  • Let the viewer feel like an intruder in a space not meant for them
  • Balance nostalgia with wrongness: familiar elements placed in unfamiliar contexts

Color Palette

Swatch Hex Role
Void White #F0EDE4 Primary background, empty liminal space
Fluorescent Yellow #E8E4A0 Uncanny lighting, ambient wash
Static Grey #A8A8A0 Noise texture, muted surfaces
Pool Blue #7BA7BC Desaturated water, sky tones
Liminal Green #8B9E72 Sickly institutional surfaces
VHS Purple #7B6B8A Chromatic aberration accent
Faded Pink #C8A8A8 Warm distortion, skin tones
Monitor Black #1A1A1E Deep shadows, text
Hallway Beige #CCC4B0 Institutional walls, carpet tones
Error Red #A04040 Warning, glitch accent

CSS Custom Properties

:root {
  --dream-void: #F0EDE4;
  --dream-fluorescent: #E8E4A0;
  --dream-static: #A8A8A0;
  --dream-pool: #7BA7BC;
  --dream-liminal: #8B9E72;
  --dream-vhs: #7B6B8A;
  --dream-faded-pink: #C8A8A8;
  --dream-monitor: #1A1A1E;
  --dream-hallway: #CCC4B0;
  --dream-error: #A04040;
}

Typography

Font Weight(s) Usage Link
Space Mono 400, 700 Primary text; monospaced, system-terminal feel Space Mono
Courier Prime 400, 700 Body text; typewriter-quality mono with a worn texture Courier Prime
Inter 300, 400, 500 System UI text, labels, interface elements Inter
Creepster 400 Decorative accent for unsettling headers (use sparingly) Creepster
VT323 400 Pixel-style monospace for retro terminal and error messages VT323

Font Pairing Suggestions

Heading Body Mood
Space Mono 700 Courier Prime 400 Terminal log, institutional signage
VT323 400 Inter 300 Retro CRT meets modern liminal
Inter 500 Space Mono 400 Clean but off: corporate unreality

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Courier+Prime:wght@400;700&family=VT323&display=swap');

body {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dream-monitor);
  -webkit-font-smoothing: auto;
}

h1, h2, h3 {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dream-static);
}

.system-text {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--dream-liminal);
}

Layout Principles

  • Centered void: Large areas of empty background surrounding sparse, isolated content elements create the signature liminal emptiness
  • Off-grid placement: Elements positioned slightly off-center or at unexpected coordinates, breaking comfortable alignment expectations
  • Single-column isolation: Content presented one element at a time with excessive vertical spacing, forcing the viewer to scroll through emptiness
  • No visible navigation: Navigation elements are hidden, minimal, or disguised as ambient text; the viewer should feel lost
  • Oversized containers, undersized content: Cards and sections that feel too big for their content, creating an unsettling sense of empty rooms
  • Responsive approach: On mobile, the sense of emptiness intensifies with even more vertical space; avoid filling the viewport with content

CSS / Design Techniques

Liminal Card

.dream-card {
  background: var(--dream-void);
  border: 1px solid var(--dream-static);
  padding: 48px;
  max-width: 500px;
  position: relative;
  box-shadow: 0 0 40px rgba(26, 26, 30, 0.04);
}

.dream-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(168, 168, 160, 0.03) 2px,
    rgba(168, 168, 160, 0.03) 4px
  );
  pointer-events: none;
}

VHS Distortion Overlay

.dream-vhs-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.02) 0px,
    rgba(0, 0, 0, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
}

.dream-vhs-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(26, 26, 30, 0.08) 100%
  );
}

Glitch Button

.dream-button {
  background: transparent;
  color: var(--dream-monitor);
  border: 1px solid var(--dream-static);
  padding: 12px 32px;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.dream-button:hover {
  background: var(--dream-fluorescent);
  border-color: var(--dream-monitor);
  color: var(--dream-monitor);
  text-shadow:
    2px 0 var(--dream-error),
    -2px 0 var(--dream-pool);
}

Empty Hero Section

.dream-hero {
  background: var(--dream-hallway);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.dream-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(240,237,228,0.3) 0%, transparent 30%, transparent 70%, rgba(240,237,228,0.3) 100%);
  pointer-events: none;
}

.dream-hero h1 {
  font-family: 'Space Mono', monospace;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--dream-static);
  position: relative;
}

.dream-hero .subtitle {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--dream-liminal);
  margin-top: 24px;
  position: relative;
}

System Message

.dream-system {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--dream-liminal);
  background: rgba(26, 26, 30, 0.03);
  border-left: 2px solid var(--dream-static);
  padding: 12px 20px;
  margin: 32px 0;
}

.dream-system::before {
  content: '> ';
  color: var(--dream-error);
}

Fluorescent Navigation

.dream-nav {
  background: var(--dream-void);
  border-bottom: 1px solid rgba(168, 168, 160, 0.3);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dream-nav a {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dream-static);
  text-decoration: none;
  transition: color 0.3s ease;
}

.dream-nav a:hover {
  color: var(--dream-monitor);
  text-shadow:
    1px 0 var(--dream-error),
    -1px 0 var(--dream-pool);
}

Design Do's and Don'ts

Do

  • Use excessive empty space to create unease and isolation
  • Apply subtle analog distortions: scanlines, chromatic aberration, static noise
  • Choose washed-out, desaturated colors that feel like faded film or old monitors
  • Place text in unexpected positions as if it were ambient signage
  • Create compositions where something feels slightly wrong but hard to identify
  • Use monospaced and system fonts to evoke institutional or terminal environments
  • Let the viewer feel disoriented and uncertain about where to look or click

Don't

  • Use bright, saturated colors or cheerful palettes that feel inviting
  • Apply glossy effects, glass textures, or polished modern UI patterns
  • Create logical, well-labeled navigation that makes the experience comfortable
  • Fill the layout with dense content; emptiness is the primary material
  • Use decorative script fonts or ornamental flourishes; the aesthetic is cold and plain
  • Make things explicitly scary or horror-themed; Dreamcore is unsettling, not frightening
  • Overdo the VHS/glitch effects to the point of unreadability; subtlety is key
Aesthetic Relationship
Weirdcore Close sibling; both use surreal, unsettling imagery but Weirdcore is more aggressively distorted and chaotic
Vaporwave Shares VHS nostalgia and surreal digital spaces; Vaporwave is more colorful, ironic, and consumer-culture-focused
Liminal Space Overlapping category; liminal spaces are the primary subject matter of Dreamcore photography
Y2K Both reference late-90s/early-2000s digital aesthetics; Y2K is optimistic and glossy while Dreamcore is eerie and degraded
Dark Academia Both mine nostalgia for old institutional spaces; Dark Academia is scholarly and warm while Dreamcore is cold and empty
Brutalism (web) Shares raw, uncomfortable design choices and rejection of UX conventions; Brutalism is aggressive while Dreamcore is passively unsettling

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dreamcore Layout</title>
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=VT323&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Space Mono', 'Courier New', monospace;
      font-size: 0.95rem;
      line-height: 1.7;
      color: #1A1A1E;
      background: #F0EDE4;
      min-height: 100vh;
      position: relative;
    }

    /* Scanline overlay */
    body::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 1000;
      background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.015) 0px,
        rgba(0,0,0,0.015) 1px,
        transparent 1px,
        transparent 3px
      );
    }

    .nav {
      background: #F0EDE4;
      border-bottom: 1px solid rgba(168,168,160,0.3);
      padding: 24px 40px;
      display: flex;
      justify-content: space-between;
    }

    .nav a {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #A8A8A0;
      text-decoration: none;
    }

    .hero {
      background: #CCC4B0;
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg,
        rgba(240,237,228,0.3) 0%, transparent 30%,
        transparent 70%, rgba(240,237,228,0.3) 100%);
    }

    .hero h1 {
      font-size: 1.4rem;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: #A8A8A0;
      position: relative;
    }

    .hero .sub {
      font-family: 'VT323', monospace;
      font-size: 1rem;
      color: #8B9E72;
      margin-top: 24px;
      position: relative;
    }

    .content {
      max-width: 600px;
      margin: 100px auto;
      padding: 0 40px;
    }

    .card {
      background: #F0EDE4;
      border: 1px solid #A8A8A0;
      padding: 48px;
      margin-bottom: 60px;
      position: relative;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(168,168,160,0.03) 2px,
        rgba(168,168,160,0.03) 4px
      );
      pointer-events: none;
    }

    .card h2 {
      font-size: 0.85rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #A8A8A0;
      margin-bottom: 16px;
    }

    .card p {
      color: rgba(26,26,30,0.6);
      font-size: 0.9rem;
    }

    .system {
      font-family: 'VT323', monospace;
      font-size: 1.1rem;
      color: #8B9E72;
      border-left: 2px solid #A8A8A0;
      padding: 12px 20px;
      margin: 40px 0;
    }

    .system::before {
      content: '> ';
      color: #A04040;
    }

    .button {
      display: inline-block;
      margin-top: 20px;
      background: transparent;
      color: #1A1A1E;
      border: 1px solid #A8A8A0;
      padding: 10px 28px;
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#">room_0x00</a>
    <div>
      <a href="#">corridor</a>
      <a href="#" style="margin-left:24px;">exit</a>
    </div>
  </nav>
  <header class="hero">
    <h1>You are here</h1>
    <div class="sub">location unknown . . . do you remember this place?</div>
  </header>
  <main class="content">
    <div class="system">this room should not exist</div>
    <div class="card">
      <h2>Room 14</h2>
      <p>The fluorescent lights hum at a frequency you cannot name.
         The carpet smells like 1997. No one else is here.</p>
      <a href="#" class="button">enter</a>
    </div>
    <div class="card">
      <h2>The Pool</h2>
      <p>Still water reflects a ceiling that should not be this high.
         The clock on the wall reads a time that has not happened yet.</p>
      <a href="#" class="button">enter</a>
    </div>
  </main>
</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.