REC 00:00:00
SIGNAL LOST
DO NOT ADJUST YOUR DISPLAY
LOCATION UNKNOWN -- DO NOT ENTER
design system reference

Dreamcore

you have been here before . . . you just don't remember
14
this document describes a space that should not exist
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.
. . . corridor a . . .
section 01

Visual Characteristics

[ ]
Liminal Space Imagery
Empty corridors, deserted swimming pools, abandoned malls, featureless rooms, and infinite hallways that feel transitional and unresolved.
///
VHS & Analog Distortion
Scanlines, chromatic aberration, tracking errors, color bleeding, and static noise that degrade the image surface.
~~~
Washed-Out 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.
. . . corridor b . . .
section 02

Color Palette

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
section 02.1

CSS Custom Properties

--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
. . . corridor c . . .
section 03

Typography

Space Mono -- Primary
The fluorescent lights hum at a frequency you cannot name.
Monospaced, system-terminal feel. Used for headings and primary text throughout the Dreamcore system. Weights: 400, 700.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Courier Prime -- Body
The carpet smells like 1997. No one else is here.
Typewriter-quality mono with a worn texture. Ideal for body text and descriptive passages. Weights: 400, 700.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Inter -- System UI
System UI text, labels, interface elements.
Clean sans-serif for system interface elements. Creates a corporate-uncanny contrast against monospaced text. Weights: 300, 400, 500.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Creepster -- Decorative Accent
Do you remember this place?
Use sparingly for unsettling headers. The playful horror of this font subverts expectations when placed in institutional contexts. Weight: 400.
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
VT323 -- Terminal / Error
> SIGNAL LOST . . . RECONNECTING
Pixel-style monospace for retro terminal output and error messages. Evokes CRT monitors and system warnings. Weight: 400.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
section 03.1

Font Pairing Suggestions

Terminal Log, Institutional Signage
The clock on the wall reads a time that has not happened yet. You check your watch but the numbers are wrong.
terminal log, institutional signage
Retro CRT Meets Modern Liminal
Still water reflects a ceiling that should not be this high. The air is warm. The exit sign flickers overhead.
retro CRT meets modern liminal
Clean But Off: Corporate Unreality
Welcome to the meeting room. The meeting ended three hours ago. The projector still displays slide 14 of 14.
clean but off: corporate unreality
. . . corridor d . . .
section 04

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.

. . . corridor e . . .
section 05

CSS / Design Techniques

Liminal Card

A card that feels like an empty room. The scanline overlay and soft box-shadow create a sense of depth without clarity. Content floats in too much space.

.dream-card { padding: 48px; box-shadow: 0 0 40px rgba(26,26,30,0.04); }

Room 14

The fluorescent lights hum at a frequency you cannot name. The carpet smells like 1997. No one else is here.

System Message

Terminal-style messages that feel like system warnings from a forgotten operating system. The red prompt character adds urgency to mundane text.

.dream-system::before { content: '> '; color: var(--dream-error); }
this room should not exist
last visitor: unknown . . . timestamp corrupted
warning: you are not where you think you are

Glitch Button

Buttons that react with chromatic aberration on hover, creating a visual glitch effect. The fluorescent yellow background on hover evokes uncanny lighting.

text-shadow: 2px 0 var(--dream-error), -2px 0 var(--dream-pool);

Empty Hero Section

A vast, mostly empty section with minimal centered text. The gradient overlay fades the edges, creating a sense of infinite hallway. The background evokes institutional carpet and walls.

background: var(--dream-hallway); min-height: 80vh;

You are here

location unknown . . .

Fluorescent Navigation

A navigation bar that flickers like fluorescent lighting. Links are disguised as ambient system labels. Chromatic aberration appears on hover.

animation: fluorescentFlicker 6s infinite;
room_0x00
corridor exit
. . . corridor f . . .
section 06

Design Principles

> 01

Create unease through subtlety, not shock: the most effective Dreamcore feels almost normal.

> 02

Use emptiness as a compositional tool; what is missing matters more than what is present.

> 03

Degrade the design surface with noise, blur, and analog artifacts to break digital perfection.

> 04

Avoid clear narrative or logical structure; content should feel fragmented and disjointed.

> 05

Let the viewer feel like an intruder in a space not meant for them.

> 06

Balance nostalgia with wrongness: familiar elements placed in unfamiliar contexts.

. . . corridor g . . .
section 07

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