01
设计气质 DNA
客户体验可扩展AI 驱动动态现代
一个现代、高端的 B2B SaaS 客户成功平台。
02
色彩
#793CFBAccent#FFFFFFInk#333333Ink soft#221437BG#FDFEFFBG soft#F8F5FFBG quiet#616161Mutedrgba(34,20,55,1)Line高对比度的深色模式，搭配充满活力的紫罗兰色强调色和用于浅色表面的柔和淡彩色强调。
03
字体
- display
56px · 600 - body
18px · 400
标题使用高对比度的过渡衬线字体 (Moret) 以营造高端感。 · 正文使用几何人文主义无衬线字体 (Poppins) 以确保清晰度。 · 导航和大多数 UI 元素使用句子式大小写。
04
间距
4px8px16px24px32px48px64px96px主要布局区块之间一致使用 48px 间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 24px
pill · 999px
深色模式元素使用 1px solid rgba(34,20,55,1)，浅色模式使用浅灰色。
0px 1px 2px rgba(8, 8, 8, 0.08) · 0px 4px 4px rgba(8, 8, 8, 0.08) · 0px 8px 12px rgb(248, 245, 255)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单列居中布局，具有宽裕的留白和独特的英雄区域。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 0.48, 0.23, 0.92)easing
用于悬停状态和页面加载的平滑透明度过渡。 · 交互元素上的细微缩放变换。
按钮和链接上微妙的背景颜色变化或透明度转换。 · 通过轻微的缩放或颜色变化提供即时的视觉反馈。
08
组件
- button 主按钮为胶囊形状，采用纯紫罗兰色 (#793CFB) 背景和白色文本。次级按钮为白色边框的轮廓样式。
- card 圆角矩形卡片，带有细微阴影，用于展示产品界面。
- chip 小型胶囊形标签，带有浅色背景和文本标签（例如 'Success Plan'）。
- input 简洁的轮廓式输入框，带有圆角边框。
- hero 分栏布局，一侧是醒目的衬线字体排印，另一侧是产品截图，设置在深色背景上。
09
文案语气与禁用清单
- 语气 专业、自信且富有前瞻性。
- 标题风格 使用衬线字体做出大胆、自信的陈述以增强冲击力。
- 按钮文案 直接且以行动为导向（例如，'获取量身定制的演示'）。
- 不要使用等宽字体——截图显示标题使用衬线字体，正文使用无衬线字体。
- 不要使用明亮的霓虹色——截图显示的是深紫罗兰色强调色 (#793CFB) 和淡彩色强调。
- 不要使用尖锐的圆角——截图显示的是胶囊形按钮（半径 999px）和圆角卡片。
- 不要使用纯深色调色板——截图显示内部 UI 组件使用了白色/浅色模式。
- 不要使用厚重的投影——截图显示的是用于营造层次感的柔和、漫射阴影。
- 不要对主要标题使用全大写——截图显示使用的是句子式大小写或标题式大小写。
- 避免: 被动语态
- 避免: 过度的术语
- 避免: 全大写标题
10
包内真实截图
11
System Prompt
EverAfter 是一个用于 AI 原生客户体验管理的高端 B2B SaaS 平台。设计以深色背景 (#221437) 为主，搭配充满活力的紫罗兰色 (#793CFB) 强调色。字体排印使用高对比度的过渡衬线字体 (Moret) 用于醒目的标题，以及简洁的人文主义无衬线字体 (Poppins) 用于正文文本。布局宽敞，具有宽裕的 48px 以上垂直间距。关键组件包括胶囊形按钮、带有柔和阴影的圆角卡片，以及浅色主题的内部 UI 模型。关键禁忌：避免使用等宽字体、避免尖锐圆角、避免过于明亮或霓虹的颜色、避免使用厚重的纯色边框、避免标题使用全大写，以及避免布局杂乱。语气专业且自信。