Weirdcore / Dreamcore

---
name: weirdcore-dreamcore
description: Apply the Weirdcore / Dreamcore visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Weirdcore / Dreamcore, mentions weirdcore, dreamcore, oddcore, or describes low-fi compressed imagery, cryptic captions in system fonts, liminal-space photography — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Weirdcore / Dreamcore Design System

Surreal internet imagery built from low-quality photos, clashing system fonts, and uncanny framing: empty hallways, floating eyes, cryptic red captions, and dream-logic landscapes. It weaponizes early-2000s amateur web vernacular — compression artifacts, word art, bad borders — to evoke nostalgia laced with unease.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Weirdcore / Dreamcore.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (weirdcore, dreamcore, oddcore, surreal liminal, uncanny internet), or describes its traits: low-fi compressed imagery; cryptic captions in system fonts; liminal-space photography; clashing colors and off-kilter framing; eyes, doorways, and sky motifs; deliberate amateur editing artifacts.

## Design tokens

### Color palette

- Dim void — a hallway at 3am: `#171226` (--color-bg)
- Slightly lifted panels, like a lit doorway: `#241d3a` (--color-surface)
- Pale, slightly cold body text: `#eae6f4` (--color-text)
- Faded secondary text, half-remembered: `#a89ecb` (--color-text-muted)
- Caption red — warnings, links, the thing that watches: `#ff3b3b` (--color-accent)
- Oversaturated daytime-sky blue for dreamcore passages: `#7fd1ff` (--color-dream-sky)
- Glitch magenta for hover states and decorative noise: `#e05ce0` (--color-static-magenta)
- Too-green grass, the default-wallpaper hill: `#57c95e` (--color-hill-green)
- Deepest black-purple for vignettes and gaps: `#0a0714` (--color-void)

### Typography

- Display / headings: Noto Serif (fallback: Times New Roman, Georgia, serif) (ideal: Times New Roman, premium — use Noto Serif as the free substitute)
- Body: Inter (fallback: Arial, Helvetica, sans-serif) (ideal: Arial, premium — use Inter as the free substitute)
- Mono / data: VT323 (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.25, letter-spacing 0
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 20, 32, 56, 88, 120 — Unbalanced on purpose: cramped clusters of content separated by unsettling stretches of empty background — the emptiness is content.
- Border radius: none 0px, crt 10px — Mostly raw 0px edges like pasted screenshots; the occasional 10px CRT-corner round on image frames.
- Border treatment: 1px solid #a89ecb — Thin, slightly wrong borders — sometimes doubled, sometimes only on two sides, like a botched clip-art frame.

### Shadows

- vignette: `inset 0 0 80px rgba(10, 7, 20, 0.8)` — Darkened edges on image frames and hero sections
- glow-red: `0 0 16px rgba(255, 59, 59, 0.45)` — Halo on caption-red text and hovered links
- drop-crude: `3px 3px 0 rgba(10, 7, 20, 0.9)` — Cheap hard drop on pasted-on elements

### Layout

- Max content width: 1080px
- Elements placed slightly off-grid — a caption 12px too low, an image not quite centered
- One focal image per viewport surrounded by disquieting empty space
- Text can sit directly on imagery in unexpected positions
- Occasional rotated or overlapping fragments like a corrupted collage

### Effects

- Heavy JPEG-artifact texture or 2-4px pixelation on decorative imagery
- Chromatic-aberration fringe (1px red/cyan offset) on display text
- Slow zoom (1.0 to 1.05 over 20s) on background imagery
- Scanline or static overlay at low opacity for weirdcore passages

### Motion

- Easing: steps(2, end); durations 100ms / 260ms / 1200ms
- Stuttering, frame-dropped transitions rather than smooth tweens
- Elements appear abruptly, as if they were always there
- Very slow ambient drift on backgrounds; fast, jarring state changes on interaction

## CSS variables (drop-in)

```css
:root {
  --color-bg: #171226;
  --color-surface: #241d3a;
  --color-text: #eae6f4;
  --color-text-muted: #a89ecb;
  --color-accent: #ff3b3b;
  --color-dream-sky: #7fd1ff;
  --color-static-magenta: #e05ce0;
  --color-hill-green: #57c95e;
  --color-void: #0a0714;
  --radius-none: 0px;
  --radius-crt: 10px;
  --shadow-vignette: inset 0 0 80px rgba(10, 7, 20, 0.8);
  --shadow-glow-red: 0 0 16px rgba(255, 59, 59, 0.45);
  --shadow-drop-crude: 3px 3px 0 rgba(10, 7, 20, 0.9);
  --border-default: 1px solid #a89ecb;
  --font-display: "Noto Serif", "Times New Roman", Georgia, serif;
  --font-body: Inter, Arial, Helvetica, sans-serif;
  --font-mono: VT323, "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.55;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: steps(2, end);
  --duration-fast: 100ms;
  --duration-base: 260ms;
  --duration-slow: 1200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Inter:wght@400;700&family=VT323:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Bare text links in system-styled Arial scattered along the top, uneven spacing; active page marked with a red asterisk rather than an underline.
- **Hero:** Full-bleed low-fi photograph (hallway, field, sky) with vignette, one short cryptic headline in Times-style serif placed off-center, red caption beneath.
- **Card:** Screenshot-like panel with crude 1px border and hard 3px drop shadow, image compressed and slightly desaturated, caption in mono or serif below.
- **Button (primary):** Red #ff3b3b fill, white text, 0px radius, drop-crude shadow; hover swaps to glow-red halo with no easing.
- **Button (secondary):** Default-looking bordered button styled like an old OS widget: pale text, thin border, no radius; hover inverts colors abruptly.
- **Form fields:** Plain bordered input like a 2003 form, pale text on void background; focus adds a red 1px outline offset by 2px, slightly misaligned.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A blurry, badly-cropped photograph of an empty space with a short cryptic caption in red Times New Roman floating where no designer would put it. Spend boldness here; keep everything else quiet.

## Do

- Keep imagery low-fi: compress, desaturate, crop badly on purpose
- Write captions that are short, ambiguous, and slightly wrong
- Balance weirdcore unease with dreamcore softness (sky blues, hazy light) so it stays inviting enough to use
- Let empty space feel intentional and slightly too large

## Don't

- Don't polish: crisp gradients, soft shadows, and smooth easing break the spell
- Don't over-decorate — the uncanny comes from sparseness, not maximalism
- Don't use jump-scares, flashing, or genuinely distressing imagery in product UI
- Don't confuse it with vaporwave: no neon grids, statues, or retail nostalgia

## Accessibility notes

- Body text, muted text, and the red accent all pass 4.5:1 on the void background; keep captions at 16px+ since the serif renders small.
- dream-sky, static-magenta, and hill-green are imagery/decoration colors, not text colors.
- The aesthetic is intentionally disorienting: offer prefers-reduced-motion fallbacks, avoid strobing static effects, and keep off-grid offsets away from functional controls so targets stay predictable.

## Reference sites

- Weirdcore aesthetic — Wikipedia: https://en.wikipedia.org/wiki/Weirdcore_aesthetic
- Weirdcore — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Weirdcore
- Dreamcore — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Dreamcore
- Liminal space (aesthetic) — Wikipedia: https://en.wikipedia.org/wiki/Liminal_space_(aesthetic)

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip weirdcore-dreamcore.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/weirdcore-dreamcore.json

Settings → Capabilities → Skills → Upload skill → weirdcore-dreamcore.zip