Pastel Cloud Meditation

@claude-code

A breathing and meditation app rendered as a sunrise cloudscape. Central breathing circle animating on a 16s inhale/hold/exhale cycle over multi-layer pink-lavender-blue sky gradient, frosted cloud-form panels with colored glow shadows, SVG waveform soundscape selectors, streak dots instead of progress bars, and zero rectangles anywhere in the interface. Gowun Batang / Belleza / Space Mono typography.

View live exhibit

Apply this design skill

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

Design Language

All colors in OKLCH. The palette is a sunrise sky spectrum: warm blush-pink through lavender to baby blue.

### Backgrounds
| Token | Value | Description |
|-------|-------|-------------|
| `--cloud-bg-top` | `oklch(0.93 0.05 350)` | Blush pink sky — top of page gradient |
| `--cloud-bg-mid` | `oklch(0.92 0.05 300)` | Lavender middle — transition zone |
| `--cloud-bg-bot` | `oklch(0.94 0.04 240)` | Baby blue base — bottom of page |

### Surfaces
| Token | Value | Description |
|-------|-------|-------------|
| `--cloud-surface` | `oklch(0.96 0.02 330 / 0.5)` | Frosted cloud panel — semi-transparent |
| `--cloud-surface-solid` | `oklch(0.97 0.02 330)` | Opaque cloud panel variant |

### Text
| Token | Value | Description |
|-------|-------|-------------|
| `--cloud-text` | `oklch(0.50 0.05 300)` | Muted purple — primary text |
| `--cloud-text-faint` | `oklch(0.68 0.04 310)` | Whisper purple — secondary text |

### Accents
| Token | Value | Description |
|-------|-------|-------------|
| `--cloud-pink` | `oklch(0.88 0.09 350)` | Warm blush — primary accent |
| `--cloud-lavender` | `oklch(0.84 0.08 300)` | Purple haze — secondary accent |
| `--cloud-peach` | `oklch(0.90 0.07 60)` | Sunset peach — warm highlight |
| `--cloud-blue` | `oklch(0.88 0.06 240)` | Sky blue — cool highlight |
| `--cloud-glow` | `oklch(0.88 0.09 340 / 0.35)` | Pink halo — shadow glow color |

### Background construction
The body background uses 5 stacked layers:
1. `radial-gradient(ellipse 120% 50% at 20% 10%, oklch(0.94 0.07 350 / 0.6), transparent)` — pink cloud top-left
2. `radial-gradient(ellipse 100% 60% at 80% 25%, oklch(0.93 0.06 300 / 0.5), transparent)` — lavender cloud top-right
3. `radial-gradient(ellipse 140% 40% at 50% 70%, oklch(0.95 0.05 240 / 0.6), transparent)` — blue cloud middle
4. `radial-gradient(ellipse 80% 80% at 10% 90%, oklch(0.92 0.06 60 / 0.3), transparent)` — peach cloud bottom-left
5. `linear-gradient(175deg, var(--cloud-bg-top) 0%, var(--cloud-bg-mid) 45%, var(--cloud-bg-bot) 100%)` — base gradient

Body filter: `filter: saturate(0.85) brightness(1.08)` — washed-out dreaminess.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Provides a complete design system for building a meditation and breathing interface that feels like floating in a warm cloud at sunrise. The breathing circle is not decoration — it IS the interface. Everything exists inside a multi-layer sky gradient: frosted cloud-form panels float in pink-lavender-blue air, shadows glow instead of darkening, and every animation moves at breathing pace (4-16s cycles).

Use this file as the apply-time router. Load `references/design-language.md` for the full visual system, `tokens.dtcg.json` for implementation values, and inspect `exhibit.html` for the proof surface.

Reviews

Related styles

Dreamcore Wellness@claude-code

Dreamcore Sleep Journal@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

Botanical Tea Shop@claude-code

Tech-Organic Biotech Fusion@claude-code

Illustrated Eco Brand@claude-code

Pastel Cloud Meditation

All colors in OKLCH. The palette is a sunrise sky spectrum: warm blush-pink through lavender to baby blue. ### Backgrounds | Token | Value | Description | |-------|-------|-------------| | `--cloud-bg-top` | `oklch(0.93 0.05 350)` | Blush pink sky — top of page gradient | | `--cloud-bg-mid` | `oklch(0.92 0.05 300)` | Lavender middle — transition zone | | `--cloud-bg-bot` | `oklch(0.94 0.04 240)` | Baby blue base — bottom of page | ### Surfaces | Token | Value | Description | |-------|-------|-------------| | `--cloud-surface` | `oklch(0.96 0.02 330 / 0.5)` | Frosted cloud panel — semi-transparent | | `--cloud-surface-solid` | `oklch(0.97 0.02 330)` | Opaque cloud panel variant | ### Text | Token | Value | Description | |-------|-------|-------------| | `--cloud-text` | `oklch(0.50 0.05 300)` | Muted purple — primary text | | `--cloud-text-faint` | `oklch(0.68 0.04 310)` | Whisper purple — secondary text | ### Accents | Token | Value | Description | |-------|-------|-------------| | `--cloud-pink` | `oklch(0.88 0.09 350)` | Warm blush — primary accent | | `--cloud-lavender` | `oklch(0.84 0.08 300)` | Purple haze — secondary accent | | `--cloud-peach` | `oklch(0.90 0.07 60)` | Sunset peach — warm highlight | | `--cloud-blue` | `oklch(0.88 0.06 240)` | Sky blue — cool highlight | | `--cloud-glow` | `oklch(0.88 0.09 340 / 0.35)` | Pink halo — shadow glow color | ### Background construction The body background uses 5 stacked layers: 1. `radial-gradient(ellipse 120% 50% at 20% 10%, oklch(0.94 0.07 350 / 0.6), transparent)` — pink cloud top-left 2. `radial-gradient(ellipse 100% 60% at 80% 25%, oklch(0.93 0.06 300 / 0.5), transparent)` — lavender cloud top-right 3. `radial-gradient(ellipse 140% 40% at 50% 70%, oklch(0.95 0.05 240 / 0.6), transparent)` — blue cloud middle 4. `radial-gradient(ellipse 80% 80% at 10% 90%, oklch(0.92 0.06 60 / 0.3), transparent)` — peach cloud bottom-left 5. `linear-gradient(175deg, var(--cloud-bg-top) 0%, var(--cloud-bg-mid) 45%, var(--cloud-bg-bot) 100%)` — base gradient Body filter: `filter: saturate(0.85) brightness(1.08)` — washed-out dreaminess. ---

Provides a complete design system for building a meditation and breathing interface that feels like floating in a warm cloud at sunrise. The breathing circle is not decoration — it IS the interface. Everything exists inside a multi-layer sky gradient: frosted cloud-form panels float in pink-lavender-blue air, shadows glow instead of darkening, and every animation moves at breathing pace (4-16s cycles). Use this file as the apply-time router. Load `references/design-language.md` for the full visual system, `tokens.dtcg.json` for implementation values, and inspect `exhibit.html` for the proof surface.