精选 · 开放 · 免费

Deel

一个简洁、结构化的SaaS平台，用于雇佣、管理和支付全球团队。

01

设计气质 DNA

一个用于全球团队管理的专业企业级仪表盘。

02

色彩

干净的留白，搭配高对比度的深色与浅色区块，并以明亮的主色调作为点缀。

03

字体

transitional-serif · humanist-sans · monospace

• display56px · 560
• heading36px · 500
• body16px · 400
• caption14px · 400

标题使用过渡衬线字体，以呈现高端质感。 · 正文使用高度易读的人文无衬线字体。 · 主文本颜色为深炭灰（#1B1B1B），而非纯黑。

04

间距

采用一致的4px基础网格，应用于内边距、间距和外边距。

05

表面 (圆角 / 阴影 / 边线)

极简边框，通过细微的阴影和颜色对比来定义表面层次。

rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px

06

布局

多列首屏区域，过渡至全宽的深色与浅色内容带。

07

动效与交互

交互元素上平滑的填充与颜色过渡。 · 按钮和链接上细微的悬停变换。

通过细微的颜色偏移或透明度变化来指示可交互性。 · 通过按钮按压状态提供即时的视觉反馈。

08

组件

• button 药丸形按钮，采用高对比度配色（黑底白字或白底黑字），带有微妙的圆角。
• card 轻微圆角的容器，带有浅色阴影，通常包含主要操作或图片。
• chip 带有图标的小型圆角标签，用于分类功能（例如，PEO、EOR）。
• input 简洁的表单字段，标签清晰，采用标准圆角边框。
• hero 分栏布局，左侧为大文本区块，右侧为生活方式图片。

09

文案语气与禁用清单

• 语气 专业、权威、直接。
• 标题风格 大字号、有力的陈述，突出核心价值主张。
• 按钮文案 行动导向的标签，如“预约演示”或“了解更多”。

• 不要使用明亮的霓虹色——截图显示的是黑、白、炭灰构成的沉稳调色板。
• 不要使用过于装饰性的字体——截图显示的是过渡衬线体与人文无衬线体的结构化组合。
• 不要使用刺眼的纯黑背景——截图显示深色模式区块使用的是柔和的炭灰（#141414）。
• 不要使用尖锐的矩形按钮——截图显示的是高度圆角的药丸形按钮。
• 不要使用密集、杂乱的网格——截图显示的是充足的留白和清晰的区块划分。
• 不要使用纤细、难以阅读的字体——截图显示的是高对比度、字重适中的排版。
• 避免: 避免过于随意的俚语。
• 避免: 避免杂乱的布局。
• 避免: 避免霓虹或不接地气的配色方案。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko