| 1 | 蓝图是建筑师的梦想画布——深蓝的底色上,浅蓝色的线条织就精密的网格。这个风格把系统架构图变成了一件工程艺术品。每一条连线、每一个节点都在深蓝的画布上清晰可见,如同夜间城市的天际线。 |
| 2 | |
| 3 | ## 配色 |
| 4 | 标题 #dbeafe 浅蓝白、正文 #93c5fd 中蓝,强调色 #60a5fa 亮蓝与 #3b82f6 蓝色是蓝图上的线条色。背景 linear-gradient(145deg, #1e3a5f 0%, #1e40af 50%, #1d4ed8 100%) 是深蓝的三段渐变,如传统蓝图纸张。卡片 rgba(30,58,95,0.7) 暗蓝底,边框 rgba(96,165,250,0.3) 是浅蓝的工程描边。 |
| 5 | |
| 6 | ## 排版 |
| 7 | 等宽或技术感字体,白色或浅蓝色文字在深蓝底上清晰可读。标题字号适中,正文保持代码时的等宽节奏。连接线和箭头是排版的一部分。 |
| 8 | |
| 9 | ## 布局 |
| 10 | 网格底纹贯穿每一页,节点和连线构成视觉的主要结构。卡片像蓝图上的标注框,方正严谨。架构图、流程图是这个风格的天然元素。 |
| 11 | |
| 12 | ## 动画 |
| 13 | path-draw、fade-up、stagger-list |
| 14 | |
| 15 | ## 适合场景 |
| 16 | 系统架构展示、工程蓝图讲解、技术方案设计、基础设施规划——需要传递「这是经过精密设计的」的场合。 |
| 17 | |
| 18 | ## 不要 |
| 19 | - 不要使用暖色调或圆角 |
| 20 | - 不要丢掉网格底纹 |
| 21 | - 不要用非等宽字体 |
| 22 | - 不要让深蓝底色上的文字对比度不足 |
| 23 |