用途:这是一套完整的设计系统方向,适用于页面背景、框架导轨、主视觉或 CTA 区块、卡片、链接组、导航与动效。适合需要高级、深色、利落且以蓝色为主导的界面,在深海军蓝表面与更亮的钴蓝焦点区域之间形成强对比。它不是轻盈的云蓝风格,也不是喧闹的霓虹科幻风,应保持干净、建筑感与高对比。
主要能力:以近黑海军蓝为基底,用细微色调变化代替纯黑;引入一个或多个醒目的钴蓝或宝蓝特征区块作为对比时刻,如主视觉横幅、CTA 带、聚光卡片或产品区;深色系统上使用白色字体与浅蓝辅助文字,保证锐利、可读、高级;加入细外轨、border-x 容器线、小角方块与安静的框架细节,让布局显得严谨、工程化;蓝色辉光保持柔和且局部化,出现在背景光晕、按钮强调或小型实时指示点,而非铺满整页。
使用方式:优先使用带边框的最大宽度外壳或内部容器,配垂直边界线与细微角标记来统合构图;对高级蓝色特征区块和深色卡片使用边框渐变包裹层,内部放更干净的内填充,保持边缘锐利;布局按清晰堆叠分区组织:高冲击对比块,然后是更安静的索引或导航区,最后是克制的法律或页脚区;按钮与 CTA 卡片应坚实高级,使用深色半透明填充、蓝色调边框、浅蓝文字,悬停时略微提亮;字体保持轻盈优雅,细到常规无衬线字重、宽松间距、小号大写工具行用于分区编号或元数据;用细微抽象蓝色光场、大模糊辉光、圆形轨迹或柔和叠加洗色增加氛围而不削弱干净结构;动效保持平静高级,如遮罩文字揭示、淡入上移、安静图标漂移与轻柔悬停位移。
推荐模式:深色框架容器内嵌大钴蓝渐变横幅或 CTA 块,配白色标题与浅蓝辅助文案;深海军蓝页面外壳配 border-x 导轨与小角方块标记主内容边界;干净多列链接或信息索引,白色标题、柔和灰蓝链接与微小数字工具标签;由蓝到透明渐变包裹层与深色内面板构成的高级联系或行动卡片;用亮蓝作选择性信号细节的小实时点、分区计数器或辉光标记;以细白透明分隔线与极简技术图标区分的页脚或下部法律区。
可调参数:蓝色强度可在更浓郁的宝蓝与更深的钢蓝之间切换;对比强度保持文字、分隔线与关键区块在深色底上锐利,但避免刺眼过曝;辉光量谨慎使用模糊与泛光,使页面有氛围而不变软变雾;框架密度按需增减导轨、角方块与分隔线;横幅主导性可让蓝色特征块作为主视觉中心或次要转化区。
限制与避免:不要当作浅天蓝或云朵感产品页;避免全屏电蓝洗色破坏对比与精致感;避免只有蓝字而无有意义框架结构或对比块的扁平深色布局;不要给每张卡片都堆砌辉光、渐变或玻璃效果;避免沉重企业仪表盘式杂乱,与干净建筑感冲突。