dark-blue-contrasting-clean

name	dark-blue-contrasting-clean
description	打造一套深蓝色的干净设计系统：强对比、钴蓝渐变特性区块、清爽的带框结构，以及克制的高级辉光。

Dark Blue Contrasting Clean Skill

何时使用

• 打造一套深蓝色的干净设计系统：强对比、钴蓝渐变特性区块、清爽的带框结构，以及克制的高级辉光。

工作流程

适用范围

• 将其作为一套完整的设计系统方向，贯穿页面背景、框架导轨、主视觉或 CTA 带、卡片、链接组、导航和动效。
• 当界面应显得高级、深色、清爽且以蓝色主导，深藏蓝面板与更亮的钴蓝焦点区域之间形成强对比时使用。
• 这不是通透的天蓝云朵系统，也不是喧闹的霓虹科幻。它应保持干净、建筑感、高对比。

视觉目标

• 在近黑的藏蓝基底上构建页面，用深蓝黑背景配以微妙色调变化，而非扁平的纯黑。
• 引入一个或多个醒目的钴蓝或宝蓝特性区块作为对比时刻，例如主视觉横幅、CTA 带、聚光卡片或产品区块。
• 在深色系统之上使用白色排版和淡蓝辅助文字，让对比显得锐利、易读、高级。
• 添加细外层导轨、左右边框容器线、小角方块和安静的框架细节，让布局显得有纪律、工程化。
• 让蓝色辉光保持柔和、局部化，出现在背景晕染、按钮强调或微小的实时指示器上，而非铺满整页。

实现指引

• 优先采用带框的最大宽度外壳或内层容器，配竖向边界线和微妙的角标，把构图凝聚在一起。
• 对高级蓝色特性区块和深色卡片使用边框渐变包裹器，然后在其内部放置更干净的内层填充，让边缘处理保持清爽。
• 把布局组织成干净的堆叠区：一个高冲击力的对比区块，然后是更安静的索引或导航区域，最后是克制的法务或页脚区。
• 按钮和 CTA 卡片应显得坚实、高级，采用深色半透明填充、蓝调边框、淡蓝文案，以及悬停时略微提亮的态。
• 排版应保持轻盈优雅：细到常规的无衬线字重、充裕的间距，以及用于区块编号或元数据的小号大写功能性行。
• 使用微妙的抽象蓝光场、大面积模糊辉光、圆形轨迹或柔和叠加晕染来增添氛围，又不削弱干净的结构。
• 动效应保持沉静、高级：遮罩式单词显现、上浮淡入区块、安静的图标漂移和轻柔的悬停平移皆宜。

推荐模式

• 大面积钴蓝渐变横幅或 CTA 区块，嵌套在深色带框容器内，配白色标题和淡蓝辅助文案。
• 深藏蓝页面外壳，配左右边框导轨和标记主内容边界的微小角方块。
• 干净的多列链接或信息索引，用白色标题、低调的灰蓝链接和微小的数字功能性标签。
• 由蓝到透明渐变包裹器和深色内层面板构建的高级联系或行动卡片。
• 微小的实时圆点、区块计数器或辉光标记，用亮蓝作为选择性的信号细节。
• 用细白透明分隔线和极简技术图标分隔的页脚或页面下方法务区。

调节旋钮

• 蓝色强度：根据系统应显得多大胆，在更浓郁的宝蓝与更暗的钢蓝之间移动。
• 对比强度：让文字、分隔线和关键区块在深色基底上保持清爽，但避免刺眼的过曝。
• 辉光量：少用模糊和 bloom，让页面有氛围而不至于变软或发雾。
• 框架密度：根据布局应显得多结构化，增减导轨、角方块和分隔线。
• 横幅主导度：根据页面需求，让蓝色特性区块充当主视觉核心，或次级转化区。

应避免

• 把它当作浅天蓝或多云的产品页来处理。
• 破坏对比与精致感的全屏电光蓝晕染。
• 有蓝色文字却没有有意义的带框结构或对比区块的扁平深色布局。
• 给每张卡片都过度装饰辉光、渐变或玻璃效果。
• 与干净建筑感基调相冲突的沉重企业仪表盘杂乱。