01
设计气质 DNA
商业赋能全球规模现代
一款为现代创作者和企业打造的高端、赋能的工具集。
02
色彩
#36f4a4Accent#ffffffInk#a1a1aaInk soft#02090aBG#041e18BG soft#99b3adMutedrgba(255, 255, 255, 0.1)Line高对比度，搭配充满活力、能量的点缀色，以驱动转化率并突出关键操作。
03
字体
- display
80px · 500 - h2
48px · 420 - body-lg
20px · 400 - body
16px · 400
04
间距
4px8px16px24px32px48px64px96px基于一致的 4px 基础网格，内容容器采用充裕的 padding (90px)。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
为卡片和分隔线使用细微的 1px 边框 (rgba(255, 255, 255, 0.1))。
0px 20px 25px -5px rgba(0, 0, 0, 0.1) · 0px 8px 10px -6px rgba(0, 0, 0, 0.1)
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
文案语气与禁用清单
- 语气 赋能、专业、直接。
- 标题风格 大胆、富有抱负的声明，突出用户潜力。
- 按钮文案 清晰、面向行动的短语，例如“免费开始”。
- 不要使用繁杂或彩色的背景——截图显示的是保持内容焦点的深色电影感图像。
- 不要为标题使用衬线字体——截图显示的是简洁、现代的 grotesque-sans 字体。
- 不要为行动号召使用柔和、低对比度的颜色——截图显示的是深色背景上的高对比度白色按钮。
- 不要为卡片使用过多的边框或阴影——截图显示的是细微、极简的边框。
- 不要使用狭小、拥挤的布局——截图显示的是充裕的 padding (90px) 和宽大的内容容器。
- 不要使用不鲜明的首要点缀色——截图显示的是高饱和度的绿色 (#36f4a4)，并被有节制地用于焦点区域。
- 避免: 术语
- 避免: 复杂性
- 避免: 被动语态
10
包内真实截图
11
System Prompt
这是一款高端 SaaS 电商平台的设计。其视觉基因的特征是极深的、近乎黑色的背景 (#02090a) 和简洁的白色排版，创造出高对比度和高级感。一种充满活力的绿色点缀色 (#36f4a4) 被有节制地用于关键交互元素，如 AI 提示和状态标签。排版依赖于简洁的 grotesque-sans 和 humanist-sans 类别，主视觉区域使用大型、粗壮的展示文本。关键约束：永远不要使用衬线字体或明亮、多彩的背景；保持基于 4px 基础网格的间距；确保所有行动号召在深色画布上保持高对比度和清晰可见。