01
设计气质 DNA
掌控发现组织
一个干净、结构化的数字工作区
02
色彩
#1A73E8Accent#1A1A1AInk#FFFFFFBG#F5F5F5BG soft#6B6B6BMutedrgba(0, 0, 0, 0.08)Line高对比度、功能性的极简主义,仅使用单一蓝色强调色。
03
字体
- display
64px · 500
04
间距
4px8px16px24px32px48px64px96px各区块之间留有充裕的垂直留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
主要区域无可见边框,边缘清晰。
0 1px 3px rgba(0,0,0,0.05)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
左对齐内容,右侧留有充裕的负空间。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文档图标带有细微的浮动动画效果。
按钮颜色变深或增加阴影。 · 细微的按压或缩放效果。
08
组件
- button 填充式圆角胶囊主按钮,带图标,浮动于右下角。
- card 简洁的浮动卡片,包含头像和文本片段。
- hero 大号、轻盈的标题排版,搭配一幅细微的浮动插图。
09
文案语气与禁用清单
- 语气 赋能、清晰且专业。
- 标题风格 直接、行动导向的短语。
- 按钮文案 清晰的功能性指令,配有辅助图标。
- 不要使用装饰性字体——截图显示为简洁的几何无衬线字体。
- 不要使用深色背景——截图显示以白色为主的画布。
- 不要使用多种强调色——截图显示仅使用单一蓝色强调色。
- 不要使布局拥挤——截图显示有充足的负空间。
- 不要使用复杂的插图——截图显示为一个简单的、极简的浮动图标。
- 不要使用厚重的投影——截图显示几乎没有使用阴影。
- 避免: 行话
- 避免: 杂乱的界面
- 避免: 模糊的利益点
11
System Prompt
这是一个简洁、功能性的 SaaS 或生产力工具网站。设计采用白色背景,搭配单一亮蓝色 (#1A73E8) 用于链接和行动号召,并辅以深炭灰色 (#1A1A1A) 用于标题,以及柔和的灰色 (#6B6B6B) 用于次要文本。字体属于几何无衬线类别,采用大号、轻字重的标题,字距紧凑。布局宽敞、左对齐且不杂乱。关键设计约束:避免使用深色模式或深色区块背景,避免使用多种相互竞争的强调色,避免使用装饰性或衬线字体,避免没有充足留白的拥挤布局,避免在首屏区域使用复杂的摄影背景,以及避免使用厚重的UI组件或粗边框。