Dreamcore Sleep Journal

@claude-code

Ethereal near-white dreamcore aesthetic for dream journal and sleep tracking interfaces. Features Cormorant Infant / Quicksand / IBM Plex Mono typography, all-oklch low-chroma palette with lavender-tinted backgrounds, Gaussian blur atmosphere with drifting pastel blobs, SVG feTurbulence grain overlay, colored box-shadows (zero gray), mask-image dissolving photography, and 8-20s underwater-slow ambient animations.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/dreamcore-sleep-journal and apply its design language to my project

Design Language

All colors use oklch with deliberately LOW chroma. Nothing vivid. Everything washed out and overexposed.

| Token | Value | Material Name |
|-------|-------|---------------|
| `--dream-bg` | `oklch(0.96 0.01 300)` | Moonlit linen — near-white with faintest lavender |
| `--dream-surface` | `oklch(0.94 0.02 320 / 0.6)` | Frosted glass panel — semi-transparent for backdrop-filter |
| `--dream-text` | `oklch(0.45 0.04 280)` | Muted amethyst gray — NOT black, never black |
| `--dream-text-faint` | `oklch(0.65 0.04 300)` | Disappearing lavender — secondary text, barely there |
| `--dream-pink` | `oklch(0.88 0.08 350)` | Blush glow — shadow and blob tint |
| `--dream-lavender` | `oklch(0.85 0.08 300)` | Lavender haze — primary atmospheric color |
| `--dream-mint` | `oklch(0.90 0.06 165)` | Spearmint whisper — cool counterpoint |
| `--dream-accent` | `oklch(0.75 0.10 290)` | Lucid purple — interactive elements, CTAs |
| `--dream-glow` | `oklch(0.85 0.10 340 / 0.3)` | Pink shadow halo — for box-shadow |
| `--dream-border` | `oklch(0.90 0.04 300 / 0.2)` | Ghost edge — borders that barely exist |

### Shadow System (colored only — zero gray shadows)

```css
/* Pink glow */
box-shadow: 0 8px 40px oklch(0.85 0.10 340 / 0.25);

/* Lavender ambient */
box-shadow: 0 8px 40px oklch(0.82 0.08 290 / 0.2);

/* Mint whisper */
box-shadow: 0 6px 30px oklch(0.88 0.06 165 / 0.2);

/* Compound ambient (cards, forms) */
box-shadow:
  0 8px 40px oklch(0.85 0.10 340 / 0.15),
  0 0 60px oklch(0.82 0.08 290 / 0.1);
```

### Global Filter

```css
body {
  filter: saturate(0.8) brightness(1.1);
}
```

Washes out everything. Colors feel slightly overexposed, like a photograph left in sunlight.

Agent instructions (SKILL.md)(advanced)

Design Skill

Provides a complete dreamcore design system for building dream journal, sleep tracking, and lucid dreaming interfaces. Every surface dissolves through Gaussian blur, shadows glow pink and lavender, photos emerge from fog via mask-image gradients, and animations move at underwater speed (8-20s cycles). The aesthetic captures the hypnagogic state between waking and sleeping.

Reviews

Related styles

Dreamcore Wellness@claude-code

Pastel Cloud Meditation@claude-code

Aurora Gradient Journal@claude-code

Liminal Space Gallery@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

Cotton Candy Planner@claude-code

Dreamcore Sleep Journal

All colors use oklch with deliberately LOW chroma. Nothing vivid. Everything washed out and overexposed. | Token | Value | Material Name | |-------|-------|---------------| | `--dream-bg` | `oklch(0.96 0.01 300)` | Moonlit linen — near-white with faintest lavender | | `--dream-surface` | `oklch(0.94 0.02 320 / 0.6)` | Frosted glass panel — semi-transparent for backdrop-filter | | `--dream-text` | `oklch(0.45 0.04 280)` | Muted amethyst gray — NOT black, never black | | `--dream-text-faint` | `oklch(0.65 0.04 300)` | Disappearing lavender — secondary text, barely there | | `--dream-pink` | `oklch(0.88 0.08 350)` | Blush glow — shadow and blob tint | | `--dream-lavender` | `oklch(0.85 0.08 300)` | Lavender haze — primary atmospheric color | | `--dream-mint` | `oklch(0.90 0.06 165)` | Spearmint whisper — cool counterpoint | | `--dream-accent` | `oklch(0.75 0.10 290)` | Lucid purple — interactive elements, CTAs | | `--dream-glow` | `oklch(0.85 0.10 340 / 0.3)` | Pink shadow halo — for box-shadow | | `--dream-border` | `oklch(0.90 0.04 300 / 0.2)` | Ghost edge — borders that barely exist | ### Shadow System (colored only — zero gray shadows) ```css /* Pink glow */ box-shadow: 0 8px 40px oklch(0.85 0.10 340 / 0.25); /* Lavender ambient */ box-shadow: 0 8px 40px oklch(0.82 0.08 290 / 0.2); /* Mint whisper */ box-shadow: 0 6px 30px oklch(0.88 0.06 165 / 0.2); /* Compound ambient (cards, forms) */ box-shadow: 0 8px 40px oklch(0.85 0.10 340 / 0.15), 0 0 60px oklch(0.82 0.08 290 / 0.1); ``` ### Global Filter ```css body { filter: saturate(0.8) brightness(1.1); } ``` Washes out everything. Colors feel slightly overexposed, like a photograph left in sunlight.

Provides a complete dreamcore design system for building dream journal, sleep tracking, and lucid dreaming interfaces. Every surface dissolves through Gaussian blur, shadows glow pink and lavender, photos emerge from fog via mask-image gradients, and animations move at underwater speed (8-20s cycles). The aesthetic captures the hypnagogic state between waking and sleeping.