---
name: blue-cloudy-clean-modern
description: "Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography."
---

# Blue Cloudy Clean Modern Skill

## Use When
- Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.

## Workflow

## Scope
- Apply this as a full design-system direction across background, framing, navigation, typography, CTAs, logo rows, and supporting motion.
- Use it when the interface should feel modern, calm, aspirational, and airy, with a sky-blue atmospheric field rather than a flat solid background.
- This is not generic SaaS blue and not a cartoon cloud theme. It should feel premium, serene, and highly controlled.

## Visual target
- Build the page around a rich blue-to-pale-blue sky atmosphere with soft cloudy light drifting across the background.
- Use white typography and white or translucent white UI details so the composition feels clean and luminous against the blue field.
- Keep the structure minimal: thin container rails, subtle corner squares, restrained nav, and a few carefully framed pills or buttons.
- Let the mood feel weightless and modern, with soft gradients, open spacing, and elegant hero copy rather than dense dashboards or heavy card systems.
- If accent color is needed beyond white and blue, use a restrained darker neutral for buttons or a softened complementary accent very sparingly.

## Implementation guidance
- Prefer a full-viewport atmospheric background rendered with canvas, WebGL, or a smooth layered gradient plus drifting cloud-like light masses.
- Shape the background with vertical or radial gradient transitions so the top feels richly blue and the lower area becomes lighter, mistier, or more cloud-washed.
- Keep interface framing subtle: centered max-width shell, thin vertical container lines, tiny corner markers, and minimal chrome that supports the composition without boxing it in heavily.
- Typography should stay refined and modern: large clean sans-serif headlines, light body copy, and the occasional italic or editorial accent for one highlighted phrase.
- Buttons and pills should feel premium and buoyant, using translucent shells, soft gradient borders, or dark contrasting pills with strong shadow when a grounded CTA is needed.
- Motion should be gentle and elevated: masked word reveals, soft fades, slow cloud drift, quiet logo entrances, and subtle CTA hover scaling.

## Recommended patterns
- Sky-blue full-screen hero with centered or lightly structured content floating above a clouded canvas background.
- Thin white container rails and tiny corner squares framing the main content area without introducing heavy box sections.
- Gradient-border pills with small avatars, trust labels, or audience proof floating above the hero headline.
- Large white hero typography with one differentiated word or phrase set in italic, serif, or alternate styling for elegance.
- Minimal logo rows and soft trust strips that sit lightly in the composition instead of becoming hard card grids.

## Tuning knobs
- Blue mood: shift between richer cobalt sky, brighter product blue, or softer pastel azure depending on the brand.
- Cloud softness: tune the blur, opacity, and movement of cloud forms so they stay atmospheric rather than stormy or literal.
- Framing visibility: make container lines and corner markers just strong enough to provide structure.
- CTA contrast: choose whether the main action should be a dark grounded button or a lighter translucent shell depending on emphasis needs.
- Content density: keep the layout open and spacious so the serene atmosphere remains the dominant feeling.

## Avoid
- Flat solid-blue pages with no atmospheric depth or cloud structure.
- Heavy dashboard cards, dense technical grids, or dark surfaces that fight the airy tone.
- Overly literal cloud illustrations or childish weather motifs.
- Too many accent colors that break the blue-and-white calm.
- Harsh gradients, noisy animation, or overbearing glass effects that reduce clarity.