01
设计气质 DNA
基础设施AI 智能体上下文引擎性能开发者优先
为现代 AI 应用打造的高性能数据骨干
02
色彩
#FF4438Accent#FFFFFFInk#B9C2C6Ink soft#0D212CBG#163341BG soft#091A23BG quiet#8A99A0Mutedrgba(255,255,255,0.15)Line深邃的深色背景为鲜艳的品牌强调色和清晰易读的白色文本提供了高对比度的画布。
03
字体
- display
80px · 700 - headline
40px · 600 - body
16px · 400 - caption
14px · 500
使用紧凑无衬线字体用于高冲击力的大标题。 · 使用几何无衬线字体用于正文和界面元素。 · 使用等宽字体用于技术提示和代码片段。
04
间距
4px8px16px24px32px48px64px96px一致的 4px 网格,区块间留有充足的垂直内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 10px
pill · 999px
1px solid rgba(255,255,255,0.15)
rgba(0,0,0,0.1) 0px 0px 20px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中布局,以突出的主视觉区为核心,随后是功能区块和技术图表。
07
动效与交互
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
内容块采用微妙的淡入效果。 · 交互元素实现平滑的颜色和不透明度过渡。 · 悬停状态使组件略微提亮或产生提升效果。
按钮和链接上发生细微的背景色或亮度变化。 · 通过轻微的凹陷或不透明度变化提供即时反馈。
08
组件
- button 主按钮使用强调色填充并配以白色文字;次按钮为描边样式,同样配以白色文字。
- card 深色卡片,带有细微边框和圆角,常用于承载技术提示或功能描述。
- chip 药丸形标签,用于分类,采用柔和背景和浅色文字。
- input 深色输入框,带有细微边框,设计为与浅色文字形成高对比度。
- hero 深色背景上的大号、加粗、紧凑的标题,居中位于技术提示展示和行动号召按钮上方。
09
文案语气与禁用清单
- 语气 权威、技术化、直接。
- 标题风格 加粗、紧凑、以行动为导向,常用于框定问题或解决方案。
- 按钮文案 清晰直接,使用‘尝试’、‘获取’、‘预约’等动词。
- 不要使用浅色背景 — 截图显示的是为开发者专注设计的深邃暗色主题。
- 不要使用装饰性或手写体字体 — 截图显示的是紧凑和几何无衬线字体。
- 不要使用柔和或粉彩色 — 截图显示的是高对比度的白色和鲜艳的红色强调色。
- 不要使用宽大、扩展的字体排版 — 截图显示的是修长、紧凑的标题。
- 不要使用通用圆角按钮 — 截图显示的是略微圆角、药丸形或方形的按钮。
- 不要使用纤细、低对比度的边框 — 截图显示的是清晰、可见的边框用于分隔。
- 避免: 避免过于随意或俏皮的语言。
- 避免: 避免掩盖核心技术价值的复杂术语。
- 避免: 避免使用软弱或犹豫的措辞。
10
包内真实截图














11
System Prompt
Redis 网站是一个面向开发者的平台,采用深邃的深色背景(#0D212C),搭配高对比度的白色文本(#FFFFFF)和鲜艳的红色强调色(#FF4438)。字体排版结合了用于加粗、有冲击力标题的紧凑无衬线字体,用于清晰正文的几何无衬线字体,以及用于技术提示的等宽字体。布局简洁居中,包含大型主视觉区、技术图表和清晰的行动号召按钮。关键设计规则:永不使用浅色背景,避免装饰性字体,保持高对比度,标题使用紧凑字体,并通过清晰的可见边框确保组件间的清晰分隔。此设计有效地传达了 AI 开发领域的技术权威性和现代基础设施感。