skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

blue-cloudy-clean-modern

Create a clean modern design system with a blue sky atmosphere and white typography.

5.7k|685|Updated Feb 3, 2026
Search Tags:#HTML#Design system#Typography#UI Design#Landing Page#blue sky#atmospheric background
One-click install
npx skills add https://github.com/MengTo/Skills --skill blue-cloudy-clean-modern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blue-cloudy-clean-modern
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/blue-cloudy-clean-modern
Command: npx skills add https://github.com/MengTo/Skills --skill blue-cloudy-clean-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing a cohesive, premium landing page aesthetic from scratch is slow and inconsistent. This Skill provides a complete design-system direction for building interfaces with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene typography, so agents produce a controlled, airy visual style instead of generic SaaS blue pages.

Core Features & Use Cases

  • Full design-system direction: Covers background, framing, navigation, typography, CTAs, logo rows, and motion with explicit visual targets and tuning knobs.
  • Implementation guidance: Recommends canvas/WebGL or layered gradient backgrounds, thin container rails, gradient-border pills, and gentle masked-word reveal motion.
  • Guardrails: Lists what to avoid, such as flat solid-blue pages, heavy dashboard cards, literal cloud illustrations, and excessive accent colors.
  • Use Case: Ask your agent to build a responsive product capabilities or hero section that feels calm, aspirational, and premium, using the included Neuform demo as a fidelity reference.

Quick Start

Use the blue-cloudy-clean-modern skill to create a responsive standalone HTML landing page with a blue sky atmosphere, white typography, and minimal framing.

Frequently Asked Questions about blue-cloudy-clean-modern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a blue sky atmospheric landing page design?▼

Apply this design-system direction: build a full-viewport blue-to-pale-blue gradient background with soft drifting cloud light, then layer white typography and translucent white UI details on top. Keep framing minimal with thin container rails and small corner markers.

What makes a blue design feel premium instead of generic SaaS?▼

Use atmospheric depth through layered gradients and cloud-like light masses rather than a flat solid blue. Pair it with refined sans-serif typography, one italic or serif accent phrase, translucent pills, and restrained motion like masked word reveals.

Can I use this style for dashboards or dense data interfaces?▼

No, this direction explicitly avoids heavy dashboard cards, dense technical grids, and dark surfaces. It is designed for open, spacious marketing pages and hero sections where the serene atmosphere remains dominant.

How should the background cloud effect be implemented?▼

Use canvas, WebGL, or a smooth layered gradient with drifting radial-gradient light masses. Tune blur, opacity, and movement so clouds stay atmospheric rather than stormy or literal, with the top richly blue and lower areas lighter and mistier.

What accent colors work with a blue and white design system?▼

Stick primarily to blue and white. If an accent is needed, use a restrained darker neutral for grounded CTA buttons or a softened complementary accent very sparingly, avoiding anything that breaks the calm blue-and-white palette.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

stitch-ui-design

Craft Google Stitch prompts specifying screens, styles, platforms, and interactions for UI designs.

Community
Intermediate
Nathan3303Nathan3303
4

frontend-design

Design and implement frontend interfaces with HTML, CSS, JS, Vue, or React.

Community
Advanced
deomiarndeomiarn

section-backgrounds

Apply background utility classes to page sections for 60-30-10 color distribution.

Community
Intermediate
curiositechcuriositech
181

dark-mode-design-expert

Generate CSS token systems for accessible atmospheric dark mode UI design.

Official
Advanced