blue-cloudy-clean-modern

name	blue-cloudy-clean-modern
description	打造干净现代的设计系统：明亮的蓝天氛围、柔和飘动的云光、极简白色构框，以及宁静高端的字体。

Blue Cloudy Clean Modern 技能

何时使用

• 打造干净现代的设计系统：明亮的蓝天氛围、柔和飘动的云光、极简白色构框，以及宁静高端的字体。

工作流程

范围

• 把它作为完整的设计系统方向，贯穿背景、构框、导航、字体、CTA、logo 行与配套动效。
• 当界面应让人感到现代、平静、令人向往、透气，配天蓝氛围场而非扁平纯色背景时使用。
• 这不是通用 SaaS 蓝，也不是卡通云主题。它应让人感到高端、宁静、高度受控。

视觉目标

• 围绕浓蓝到淡蓝的天空氛围构建页面，柔和的云光在背景上飘动。
• 用白色字体与白色或半透明白 UI 细节，让构图在蓝色场上显得干净、明亮。
• 保持结构极简：细容器轨、细微角方块、克制导航，以及少数精心构框的胶囊或按钮。
• 让氛围显得失重、现代，配柔和渐变、开阔间距与优雅 hero 文案，而非密集仪表盘或重卡片系统。
• 若需要白与蓝之外的强调色，用克制的更深中性做按钮，或极其节制地用柔化的互补强调色。

实现指引

• 优先用 canvas、WebGL，或平滑分层渐变加飘动云状光团渲染的满视口氛围背景。
• 用垂直或放射状渐变过渡塑造背景，让顶部浓蓝、下方更浅、更朦胧或更云洗。
• 保持界面构框细微：居中 max-width 外壳、细垂直容器线、微小角标记，以及支撑构图而不重度装框的极简装饰。
• 字体应保持精致、现代：大号干净无衬线标题、轻正文，偶尔为一个高亮短语用斜体或编辑部强调。
• 按钮与胶囊应显得高端、轻盈，用半透明外壳、柔和渐变边框，或需要落地 CTA 时用带强阴影的深色对比胶囊。
• 运动应温和、有格调：蒙版词语显现、柔和淡入、缓慢云飘、安静 logo 入场，以及细微 CTA 悬停缩放。

推荐模式

• 天蓝全屏 hero，居中或轻结构化的内容浮在云化 canvas 背景之上。
• 细白容器轨与微小角方块框住主内容区，而不引入重盒式分区。
• 渐变边框胶囊配小头像、信任标签或受众证明，浮在 hero 标题上方。
• 大号白色 hero 字体，一个差异化的词或短语用斜体、衬线或替代样式以显优雅。
• 极简 logo 行与柔和信任条，轻轻落在构图中，而非成为硬卡片栅格。

调节旋钮

• 蓝色氛围：根据品牌在更浓的钴蓝天、更亮的产品蓝或更柔的粉彩天蓝之间切换。
• 云的柔和度：调节云形的模糊、不透明度与移动，让它们保持氛围感而非风暴般或写实。
• 构框可见度：让容器线与角标记刚好强到能提供结构。
• CTA 对比：根据强调需要，选择主动作应是深色落地按钮还是更浅的半透明外壳。
• 内容密度：保持布局开阔、宽敞，让宁静氛围始终是主导感受。

避免

• 无氛围深度或云结构的扁平纯蓝页面。
• 与透气调性相冲的重仪表盘卡片、密集技术栅格或深色面板。
• 过度写实的云插画或幼稚的天气母题。
• 太多打破蓝白平静的强调色。
• 降低清晰度的生硬渐变、嘈杂动画或压迫性玻璃效果。