Dreamcore Wellness

@claude-code

Ethereal meditation app UI where every surface dissolves into blur — four aurora blobs breathe behind all content, zero hard borders, colored glow shadows only, Cormorant Infant / Karla / Victor Mono type stack, OKLCH desaturated pastel palette, and all animations at 8–20 second cycles for a hypnagogic light-world aesthetic.

View live exhibit

Apply this design skill

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

Design Language

### Custom Properties (`:root`)

| Property | Value | Material Name | Usage |
|---|---|---|---|
| `--base` | `oklch(0.97 0.008 310)` | Barely Pink White | Page background |
| `--rose-quartz` | `oklch(0.88 0.06 350)` | Rose Quartz | Primary accent, blob-1, featured card |
| `--lavender-mist` | `oklch(0.90 0.05 290)` | Lavender Mist | Secondary accent, blob-2, "today" panel |
| `--seafoam` | `oklch(0.91 0.04 170)` | Seafoam Breath | Tertiary highlight, blob-3, breathe-inhale |
| `--warm-fog` | `oklch(0.94 0.01 80)` | Warm Fog | Peach blob-4, small card backgrounds |
| `--text` | `oklch(0.55 0.03 290)` | Text | Primary text |
| `--text-soft` | `oklch(0.70 0.02 290)` | Text Soft | Body copy, nav links, descriptions |
| `--text-ghost` | `oklch(0.78 0.015 310)` | Text Ghost | Labels, meta, eyebrows, timestamps |

### Glow Shadow System (colored light only)

| Variable | Value |
|---|---|
| `--glow-rose` | `0 0 48px oklch(0.88 0.06 350 / 0.55), 0 0 90px oklch(0.88 0.06 350 / 0.25)` |
| `--glow-lavender` | `0 0 40px oklch(0.90 0.05 290 / 0.50), 0 0 80px oklch(0.90 0.05 290 / 0.20)` |
| `--glow-seafoam` | `0 0 44px oklch(0.91 0.04 170 / 0.45), 0 0 85px oklch(0.91 0.04 170 / 0.18)` |
| `--glow-peach` | `0 0 36px oklch(0.94 0.05 60 / 0.50), 0 0 70px oklch(0.94 0.05 60 / 0.22)` |

### Global Body Filter
```css
filter: saturate(0.82) brightness(1.08);
```
Applied to `body`. Creates the overexposed, slightly washed-out dream quality.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

- Routes the Dreamcore Wellness design language into meditation, breathwork, journaling, and wellness app surfaces.
- Starts with this SKILL.md to confirm fit, then loads references/design-language.md for full pattern rules and adaptive behavior.
- Keeps the ethereal, dissolving, light-world aesthetic recognizable while adapting content to the target product.

Reviews

Related styles

Pastel Cloud Meditation@claude-code

Dreamcore Sleep Journal@claude-code

Cotton Candy Planner@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

Tech-Organic Biotech Fusion@claude-code

Organic Blob Portfolio@claude-code

Dreamcore Wellness

### Custom Properties (`:root`) | Property | Value | Material Name | Usage | |---|---|---|---| | `--base` | `oklch(0.97 0.008 310)` | Barely Pink White | Page background | | `--rose-quartz` | `oklch(0.88 0.06 350)` | Rose Quartz | Primary accent, blob-1, featured card | | `--lavender-mist` | `oklch(0.90 0.05 290)` | Lavender Mist | Secondary accent, blob-2, "today" panel | | `--seafoam` | `oklch(0.91 0.04 170)` | Seafoam Breath | Tertiary highlight, blob-3, breathe-inhale | | `--warm-fog` | `oklch(0.94 0.01 80)` | Warm Fog | Peach blob-4, small card backgrounds | | `--text` | `oklch(0.55 0.03 290)` | Text | Primary text | | `--text-soft` | `oklch(0.70 0.02 290)` | Text Soft | Body copy, nav links, descriptions | | `--text-ghost` | `oklch(0.78 0.015 310)` | Text Ghost | Labels, meta, eyebrows, timestamps | ### Glow Shadow System (colored light only) | Variable | Value | |---|---| | `--glow-rose` | `0 0 48px oklch(0.88 0.06 350 / 0.55), 0 0 90px oklch(0.88 0.06 350 / 0.25)` | | `--glow-lavender` | `0 0 40px oklch(0.90 0.05 290 / 0.50), 0 0 80px oklch(0.90 0.05 290 / 0.20)` | | `--glow-seafoam` | `0 0 44px oklch(0.91 0.04 170 / 0.45), 0 0 85px oklch(0.91 0.04 170 / 0.18)` | | `--glow-peach` | `0 0 36px oklch(0.94 0.05 60 / 0.50), 0 0 70px oklch(0.94 0.05 60 / 0.22)` | ### Global Body Filter ```css filter: saturate(0.82) brightness(1.08); ``` Applied to `body`. Creates the overexposed, slightly washed-out dream quality. ---

- Routes the Dreamcore Wellness design language into meditation, breathwork, journaling, and wellness app surfaces. - Starts with this SKILL.md to confirm fit, then loads references/design-language.md for full pattern rules and adaptive behavior. - Keeps the ethereal, dissolving, light-world aesthetic recognizable while adapting content to the target product.