01
设计气质 DNA
AI 代理企业级自动化协作规模化
一个现代化的企业控制塔
02
色彩
#6056FFAccent#0D162FInk#6B7280Ink soft#FFFFFFBG#F3F4F6BG soft#EEF2FFBG quiet#9CA3AFMutedrgba(229, 231, 235, 1)Line以干净的白色为底,搭配高对比度的深色文字,以及用于关键操作和高亮部分的活力紫色点缀。
03
字体
- display
56px · 500
展示标题使用紧凑的几何无衬线字体。 · 正文使用简洁的人文主义无衬线字体。 · 等宽字体谨慎用于技术元素。 · 标题字间距通常较紧,正文字间距为常规。
04
间距
4px8px16px24px32px48px64px96px基于 8px 的网格,各区域采用充裕的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid #E5E7EB
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(59, 50, 249, 0.25) 0px 1.6px 6.4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中英雄区,下方是多列logo网格。
07
动效与交互
150msmicro
220mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的颜色和背景过渡。 · 交互元素的透明度变化。
微妙的颜色偏移或背景变化。 · 通过轻微的缩放或颜色变化提供即时反馈。
08
组件
- button 主操作为实心紫色,次要操作为描边或幽灵样式,按钮为胶囊形。
- card 白色背景,带有细微边框和可选的浅色阴影。
- chip 小型、圆角的徽章,用于分类。
- input 简洁的边框,聚焦环与点缀色匹配。
- hero 大型、粗体的标题,使用点缀色高亮,配有副文案和双行动号召。
09
文案语气与禁用清单
- 语气 专业、权威且富有前瞻性。
- 标题风格 简洁、粗体且有冲击力的陈述。
- 按钮文案 直接且以行动为导向。
- 不要使用深色主题——截图显示背景以白色为主。
- 不要使用衬线字体——截图显示的是简洁的无衬线字体。
- 不要使用多色渐变——截图使用纯紫色作为主要点缀色。
- 不要使用尖锐的圆角——截图显示的是胶囊形按钮和圆角卡片。
- 不要使用密集的布局——截图显示有充裕的留白和大型标题。
- 不要使用小而拥挤的文字——截图采用的是大型、易读的展示尺寸。
- 避免: 过多行话的技术性表述。
- 避免: 被动或软弱的措辞。
- 避免: 过于随意的语气。
10
包内真实截图


















11
System Prompt
Relevance AI 是一个企业级 AI 代理平台,具有简洁、专业的 SaaS 美学。设计采用白色背景,深海军蓝文字(#0D162F),以及用于关键行动号召和高亮部分的活力紫色(#6056FF)点缀。字体为现代无衬线体,标题粗大且字间距紧凑。关键设计原则包括:充裕的留白、严格聚焦可读性以及极简的调色板。不要使用深色主题、衬线字体或多彩渐变。避免杂乱的布局;通过充足的内边距和清晰的视觉层次,保持高端、企业级的感觉。
