精选 · 开放 · 免费
Gusto
为中小企业打造的简化薪资、人力资源与福利管理平台。
fintechsaas
01
设计气质 DNA
薪资人力资源福利中小企业简化
中小企业人员管理的操作系统
02
色彩
#0A8080Accent
#1C1C1CInk
#535353Ink soft
#FFFFFFBG
#F8F5F2BG soft
#6B6B6BMuted
rgba(28,28,28,0.12)Line
高对比度、易获取的配色方案，以主导的蓝绿色强调色搭配温暖的中性色，营造平易近人的感觉。
03
字体
didone-serif · humanist-sans
- display
56px · 500 - display
42px · 500 - body
18px · 400 - body
16px · 400 - body
14px · 400
标题使用高对比度衬线字体，字间距紧凑。 · 正文使用高度易读的人文主义无衬线字体。 · 所有正文行高统一保持1.5。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
统一的4px基础网格，标准递增为8px、16px、24px、32px。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(28,28,28,0.12)
0px -2px 16px 0px rgba(28, 28, 28, 0.08) · 0px 12px 24px 0px rgba(28, 28, 28, 0.12) · 0px 8px 16px 0px rgba(28, 28, 28, 0.08)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中最大宽度容器，在12列网格上设置24px间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素上平滑的0.2秒背景色与颜色过渡。 · 悬停状态下细微的0.1秒 ease-out transform。
背景色略微加深，光标变为指针。 · 0.1秒 ease-out transform 提供细腻的触觉反馈。
08
组件
- button 圆角药丸形状，8px-12px内边距，实色蓝绿色主按钮和白字蓝底反色变体。
- card 白色背景，8px圆角，带有0.08-0.12透明度的细微投影。
- chip 用于次要标签或状态的小型圆角药丸。
- input 边框清晰的输入框，聚焦时带有细微阴影。
- hero 居中排版的视觉区，包含大号衬线标题、无衬线副文案和双操作按钮。
09
文案语气与禁用清单
- 语气 专业、平易近人且令人安心。
- 标题风格 清晰、以利益为导向的陈述，具有经典衬线字体的权威感。
- 按钮文案 直接、以行动为导向的动词，如‘创建’、‘比较’和‘查看’。
- 不要使用霓虹或饱和的主色调——截图显示的是柔和、专业的蓝绿色。
- 不要在标题中使用超现代的几何无衬线字体——截图显示的是经典衬线字体。
- 不要使用尖锐、方正的直角——截图显示的是统一的8px圆角。
- 不要使用刺眼的投影或3D效果——截图显示的是细微、低透明度的层级效果。
- 不要使用拥挤的行高——截图显示正文使用舒适的1.5比例。
- 不要在正文中使用粗重的字体粗细——截图显示标准为400粗细。
- 避免: 充满行话的财务术语
- 避免: 过于激进或紧迫的销售语言
- 避免: 冷漠、非个人化的企业腔调
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Gusto 是一个高端、平易近人的SaaS平台，专注于人力资源与薪资管理。其设计DNA将经典、高对比度的衬线标题字体与简洁的人文主义无衬线正文字体相结合，背景为纯净的白色与温暖的米白色。主要品牌色是一种专业、柔和的蓝绿色（十六进制代码 #0A8080），一致用于关键操作和强调。布局宽敞居中，采用12列网格、24px间距和严格的4px间距标度。关键设计原则包括充足的留白、通过柔和投影实现的细微层级感，以及令人安心的专业语调。避免使用过于激进的霓虹色、尖锐的方角或拥挤的排版。
en · zh-CN · zh-TW · ja · ko