精选 · 开放 · 免费
Deel
一个简洁、结构化的SaaS平台,用于雇佣、管理和支付全球团队。
fintechsaas
01
设计气质 DNA
全球劳动力薪资合规平台
一个用于全球团队管理的专业企业级仪表盘。
02
色彩
#FAAF00Accent
#1B1B1BInk
#3B3B3BInk soft
#FFFFFFBG
#F7F5F2BG soft
#141414BG quiet
#888888Muted
rgba(0, 0, 0, 0.16)Line
干净的留白,搭配高对比度的深色与浅色区块,并以明亮的主色调作为点缀。
03
字体
transitional-serif · humanist-sans · monospace
- display
56px · 560 - heading
36px · 500 - body
16px · 400 - caption
14px · 400
标题使用过渡衬线字体,以呈现高端质感。 · 正文使用高度易读的人文无衬线字体。 · 主文本颜色为深炭灰(#1B1B1B),而非纯黑。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
采用一致的4px基础网格,应用于内边距、间距和外边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
极简边框,通过细微的阴影和颜色对比来定义表面层次。
rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
多列首屏区域,过渡至全宽的深色与浅色内容带。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上平滑的填充与颜色过渡。 · 按钮和链接上细微的悬停变换。
通过细微的颜色偏移或透明度变化来指示可交互性。 · 通过按钮按压状态提供即时的视觉反馈。
08
组件
- button 药丸形按钮,采用高对比度配色(黑底白字或白底黑字),带有微妙的圆角。
- card 轻微圆角的容器,带有浅色阴影,通常包含主要操作或图片。
- chip 带有图标的小型圆角标签,用于分类功能(例如,PEO、EOR)。
- input 简洁的表单字段,标签清晰,采用标准圆角边框。
- hero 分栏布局,左侧为大文本区块,右侧为生活方式图片。
09
文案语气与禁用清单
- 语气 专业、权威、直接。
- 标题风格 大字号、有力的陈述,突出核心价值主张。
- 按钮文案 行动导向的标签,如“预约演示”或“了解更多”。
- 不要使用明亮的霓虹色——截图显示的是黑、白、炭灰构成的沉稳调色板。
- 不要使用过于装饰性的字体——截图显示的是过渡衬线体与人文无衬线体的结构化组合。
- 不要使用刺眼的纯黑背景——截图显示深色模式区块使用的是柔和的炭灰(#141414)。
- 不要使用尖锐的矩形按钮——截图显示的是高度圆角的药丸形按钮。
- 不要使用密集、杂乱的网格——截图显示的是充足的留白和清晰的区块划分。
- 不要使用纤细、难以阅读的字体——截图显示的是高对比度、字重适中的排版。
- 避免: 避免过于随意的俚语。
- 避免: 避免杂乱的布局。
- 避免: 避免霓虹或不接地气的配色方案。
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
Deel是一个用于全球劳动力管理的高端SaaS平台。其设计基因建立在干净、高对比度的配色之上:纯白、炭灰(#1B1B1B、#141414)以及独特的金色点缀(#FAAF00)。排版结合了用于粗体标题的专业过渡衬线体,以及用于正文的高度可读人文无衬线体。布局宽敞,采用1280px容器,拥有充足的留白和4px基础网格。交互精致,包含药丸形按钮、细微阴影和平滑的 cubic-bezier 过渡。关键禁忌:避免霓虹色,避免尖锐的矩形按钮,避免密集杂乱的布局。
en · zh-CN · zh-TW · ja · ko