01
设计气质 DNA
协作生产力电子邮件团队工作流程
一个用于管理电子邮件和任务的、干净高效的团队驾驶舱。
02
色彩
#2266EDAccent#333333Ink#646C76Ink soft#FFFFFFBG#F5F6F6BG soft#CDCDE4Mutedrgba(228, 230, 233, 1)Line清爽的白色背景、深色文字,以及单一的鲜明蓝色用于主要操作。
03
字体
- display
48px · 400 - h2
32px · 400 - body
16px · 400 - caption
14px · 400
主营销标题使用 Tiempos Headline(过渡衬线字体)。 · 正文、导航和UI元素使用 Inter(人文主义无衬线字体)。 · 保持正文为400字重,导航链接为500字重,以形成清晰的层次结构。
04
间距
4px8px16px24px32px48px64px96px以4px为基础单位,使用8和16的倍数来保持一致的间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
使用1px实线 #E4E6E9 作为细微的分隔线和输入框边框。
rgba(0, 0, 0, 0.1) 0px 0px 32px 0px
06
布局
1280container
12columns
32pxgutter
768 / 1024breakpoints
居中的内容布局,配有标准顶部导航栏和交替的白色/灰色区块。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有交互元素采用微妙过渡(0.3秒透明度或变换效果)。
按钮和链接的透明度或颜色变化。 · 交互元素的即时视觉反馈。
08
组件
- button 圆角蓝色(#2266ED)主要按钮配白色文字,次要按钮为白底深色文字。
- card 干净的白色卡片,带有细微阴影或边框,用于UI模型和功能区块。
- chip 小圆角标签,用于应用界面内的类别或状态显示。
- input 标准输入框,带有浅灰色边框和细微圆角。
- hero 居中的大型衬线字体标题,后接无衬线字体正文和主要/次要CTA按钮。
09
文案语气与禁用清单
- 语气 专业、 helpful、直接。
- 标题风格 衬线字体,大字号,聚焦于明确的利益和价值主张。
- 按钮文案 行动导向(免费试用、观看演示、注册),使用清晰、简洁的语言。
- 不要使用鲜艳的多色渐变——截图显示的是干净的白色/灰色背景。
- 不要使用浓重、深色的阴影——截图显示的是如 rgba(0,0,0,0.1) 0px 0px 32px 这样的细微、柔和的阴影。
- 不要在大型区块中使用全大写字母——截图显示的是标准的句子大小写或标题大小写。
- 不要在正文中使用过于装饰性的字体——截图显示的是干净、易读的无衬线字体(Inter)。
- 不要到处使用刺眼、高对比度的强调色——截图将鲜明的蓝色限制用于主要按钮和链接。
- 不要使用复杂、拥挤的布局——截图显示的是充足的留白和清晰的视觉层次。
- 避免: 俚语
- 避免: 过于随意的语言
- 避免: 充满术语的描述
10
包内真实截图













11
System Prompt
Missive 是一个团队电子邮件协作工具的专业SaaS着陆页。其设计DNA采用干净的白色背景(#FFFFFF)、深灰色文字(#333333)和单一的鲜明蓝色(#2266ED)作为主要行动号召的强调色。字体排印方面,显著的营销标题使用过渡衬线字体(Tiempos Headline),正文和UI元素使用人文主义无衬线字体(Inter)。布局居中且宽敞,使用4px为基础间距单位。关键禁忌:绝不使用多色渐变,避免使用浓重的深色阴影,并且不要在大段文字中使用全大写。
