01
设计气质 DNA
基础设施云安全开发者可靠
云端的工业控制面板
02
色彩
#2264D6Accent#000000Ink#3B3D45Ink soft#0D0E12BG#FAFAFABG soft#FFFFFFBG quiet#B2B6BDMutedrgba(213, 215, 219, 1.0)Line高对比度深色模式，以单一主导的企业蓝色作为点缀色
03
字体
- display
52px · 600
大多数正文使用系统默认的无衬线字体 · 主要标题和品牌标识使用定制的人文主义无衬线字体 · 代码片段和技术标签使用等宽字体
04
间距
4px8px12px16px24px32px48px64px96px严格的4px基础网格，章节间留有充裕的空白
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
1px solid rgb(213, 215, 219)
0px 1px 1px 0px rgba(97, 104, 117, 0.05) · 0px 2px 2px 0px rgba(97, 104, 117, 0.05) · 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准居中容器与灵活的网格列
07
动效与交互
150msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停时快速的颜色和背景过渡 · 聚焦和交互时微妙的透明度变化
颜色和背景颜色在0.15秒内以ease-in方式变化 · 通过微妙的缩放或颜色变化提供即时视觉反馈
08
组件
- button 简洁的实色背景，带有微妙的1px边框或4px圆角。‘开始使用’采用主蓝色，其他操作按钮使用白色或黑色。
- card 带有微妙边框或阴影的简单容器，常使用渐变背景进行分类。
- chip 药丸状徽章，带有浅色边框，用于状态或标签。
- input 标准表单字段，带有1px实线边框，聚焦时有微妙的内阴影。
- hero 全宽深色背景，搭配大号字体和醒目的渐变网格或抽象光影效果。
09
文案语气与禁用清单
- 语气 专业、权威、技术感
- 标题风格 简短、有力、陈述式（例如：‘正确驾驭云端’）
- 按钮文案 行动导向、直接明确（例如：‘了解基础设施云’、‘开始使用’）
- 不要使用复杂的网格布局——截图显示的是一个带有充裕空白的简单居中容器
- 不要使用多种多样的颜色——截图显示的是以白色、黑色和一种主蓝色点缀色为主的调色板
- 不要使用装饰性或手写体字体——截图显示的是整洁、专业的无衬线字体
- 不要使用粗糙、粗厚的边框——截图显示的是微妙、低不透明度或低对比度的1px边框
- 不要使用厚重、深暗的阴影——截图显示几乎没有阴影，或仅有非常微妙的阴影以营造层次
- 不要到处使用响亮、明亮的点缀色——截图显示蓝色点缀色仅用于主要操作，且使用非常克制
- 避免: 过于随意或口语化的语言
- 避免: 华丽或过度描述性的形容词
- 避免: 具有攻击性或过于销售导向的标点符号
- 避免: 过多的感叹号
10
包内真实截图
11
System Prompt
这是一个面向企业的专业网站，专注于云基础设施和安全工具。设计简洁、克制、权威，采用深色模式首屏，调色板以单色为主（黑色 #0D0E12，白色 #FFFFFF，灰色 #D5D7DB，#B2B6BD），并以单一的企业蓝色（#2264D6）作为点缀色。字体方面，标题使用专业的人文主义无衬线字体，正文使用标准的系统无衬线字体，代码元素使用定制等宽字体。布局采用标准居中容器，留有充裕的空白。关键设计规则：避免装饰性字体，避免复杂的多列网格，避免嘈杂的多色调色板，避免厚重的投影，避免攻击性的销售文案，以及避免过度使用主蓝色点缀色。