dark-blue-contrasting-clean

深蓝高对比简洁风格

使用场景

• 打造深蓝色简洁设计系统，采用强烈对比、钴蓝渐变特色区块、利落的框架结构和克制的高级光晕。

工作流

适用范围

• 将此风格作为完整的设计系统方向，应用于页面背景、边框线、主视觉或 CTA 横幅、卡片、链接组、导航和动效。
• 当界面需要呈现高级、深沉、利落且以蓝色为主导的质感，同时深海军蓝表面与更明亮的钴蓝焦点区域形成强烈对比时，使用此风格。
• 这不是轻盈的云蓝色风格，也不是张扬的霓虹科幻风格。整体应保持简洁、具有建筑感且高对比。

视觉目标

• 以近乎黑色的海军蓝为页面底色，使用深蓝黑色背景，并通过细微的色调变化避免纯黑的平板感。
• 加入一个或多个醒目的钴蓝或皇家蓝特色区块作为对比焦点，例如主视觉横幅、CTA 横幅、焦点卡片或产品展示区。
• 在深色系统中使用白色字体和浅蓝色辅助文字，营造鲜明、易读且高级的对比效果。
• 加入细窄的外侧边框线、容器左右边线、小型方形角标和低调的框架细节，让布局显得严谨且富有工程感。
• 蓝色光晕应柔和且局部可见，只用于背景光斑、按钮强调或微小的实时状态指示点，不要铺满整个页面。

实现指南

• 优先使用带边框的最大宽度外框或内部容器，通过垂直边界线和细微的角标来保持整体构图。
• 使用渐变边框包裹高级蓝色特色区块和深色卡片，再在内部放置更简洁的填充层，让边缘处理保持利落。
• 将布局组织为清晰的分层区域：先是高冲击力的对比区块，其后是较为安静的索引或导航区域，最后是克制的法律信息或页脚区域。
• 按钮和 CTA 卡片应显得稳固且高级，可使用深色半透明填充、蓝色调边框、浅蓝色文案，以及略微提亮的悬停状态。
• 字体应保持轻盈优雅：使用细到常规字重的无衬线字体、宽松的字距，以及用于章节编号或元数据的小号大写辅助文字。
• 使用细腻抽象的蓝色光场、大型模糊光晕、圆形轨迹或柔和的叠加光影增添氛围，同时不削弱简洁的结构感。
• 动效应沉稳且高级：可使用遮罩文字显现、分区淡入上移、图标轻微漂移和轻柔的悬停位移。

推荐样式

• 在深色框架容器中嵌入大型钴蓝渐变横幅或 CTA 区块，搭配白色标题和浅蓝色辅助文案。
• 深海军蓝页面外框搭配左右边线，并用微小的角落方块标记主要内容边界。
• 简洁的多列链接或信息索引，使用白色标题、低饱和灰蓝色链接和微小的数字辅助标签。
• 通过蓝色至透明的渐变外框和深色内部面板，打造高级联系卡片或操作卡片。
• 使用亮蓝色作为选择性的信号细节，例如小型实时状态点、章节计数器或光晕标记。
• 使用细窄的白色透明度分隔线和极简的技术风格图标，将页脚或页面下方的法律信息区域区隔开。

调整项

• 蓝色强度：根据所需的风格力度，在浓郁的皇家蓝与更暗的钢蓝之间调整。
• 对比强度：让文字、分隔线和关键区块在深色底色上清晰醒目，同时避免过度刺眼。
• 光晕程度：少量使用模糊和辉光，让页面富有氛围，但不显得柔软或朦胧。
• 框架密度：根据布局所需的结构感，增加或减少边框线、角落方块和分隔线。
• 横幅主导性：根据页面需求，让蓝色特色区块成为主视觉核心，或作为次要的转化区域。

避免

• 将其设计成轻盈的天蓝色或云朵风格产品页面。
• 使用覆盖全屏的亮蓝色调，破坏对比度和精致感。
• 使用平淡的深色布局，只搭配蓝色文字，却没有有意义的框架结构或对比区块。
• 为每张卡片都添加过多装饰，如光晕、渐变或玻璃效果。
• 使用繁杂沉重的企业级仪表板设计，破坏简洁的建筑风格。