01
设计气质 DNA
自动化批发AI分销商B2B
一个为批发分销商打造的 AI 驱动办公室助手
02
色彩
#0063E1Accent#FFFFFFInkrgba(255, 255, 255, 0.52)Ink soft#000000BG#040910BG soft#979797Mutedrgba(255, 255, 255, 0.12)Line高对比度暗色模式，使用单一亮蓝色作为可操作元素的强调色
03
字体
- display
56px · 700 - body-lg
24px · 400 - body-md
18px · 400 - body-sm
16px · 400 - label
12px · 400
大型标题使用紧凑的负字间距 · 导航链接和小标签使用大写字母 · 保持高对比度比例（黑底白字）以确保可读性
04
间距
4px8px12px16px20px24px32px48px64px96px以 4px 为基数，区块间距使用更大跳跃（32, 48）
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 16px
pill · 59px
1px solid rgba(255, 255, 255, 0.12)
0px 0px 0px 1px rgba(255, 255, 255, 0.12) inset · 0px 0px 1px 0px rgba(255, 255, 255, 0.2)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色主视觉区域，内容居中，其后是多列功能网格
07
动效与交互
90msmicro
220mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
背景元素微妙的淡入效果 · 按钮悬停状态的平滑过渡
交互元素上的微妙亮度或透明度变化 · 按钮按下时即时视觉反馈
08
组件
- button 大型胶囊形（border-radius: 59px）实心蓝（#0063E1）按钮，白色加粗文字
- card 深色背景（#040910）容器，带微妙的 1px 内边框和圆角（16px）
- chip 深色半透明徽章，圆角，用于 AI 状态更新
- input 暗色主题输入框，带微妙边框
- hero 在深色、带微妙摄影感的背景上，放置高对比度标题和副标题
09
文案语气与禁用清单
- 语气 自信、专业、结果导向
- 标题风格 加粗、直接、以收益驱动（例如：‘为...打造的办公机器人’）
- 按钮文案 行动导向且高对比度（例如：‘获取演示’、‘预约演示’）
- 不要使用白色背景——截图显示深黑色（#000000）为主要背景
- 不要为主要内容按钮使用圆角矩形——截图显示胶囊形按钮（border-radius: 59px）
- 不要为标题使用柔和的灰色文字——截图显示主标题使用高对比度白色（#FFFFFF）
- 不要使用装饰性衬线字体——截图显示简洁的几何和无衬线字体类别
- 不要使用多种强调色——截图显示单一主导蓝色（#0063E1）
- 不要使用厚重的投影——截图显示使用微妙的 1px 内边框和柔和光晕
- 避免: 俏皮行话
- 避免: 被动语态
- 避免: 过于复杂的技术术语
10
包内真实截图
11
System Prompt
REKKI 是一个 B2B SaaS 平台，为批发分销商提供 AI 驱动的办公室自动化。设计语言严格采用暗色模式，特征为深黑（#000000）背景和高对比度白色（#FFFFFF）排版。单一亮蓝色（#0063E1）专用于主要号召性用语，形成清晰的视觉层次。排版依赖于简洁的几何无衬线字体类别，大型展示文字使用紧凑字间距。关键约束：避免白色背景，避免多种强调色，并使用胶囊形按钮作为主要操作。布局强调加粗标题和微妙、半透明的卡片表面，以维持高端、专业的感受。