精选 · 开放 · 免费

WorkOS

WorkOS 使开发者能够在几分钟而非几个月内交付企业级功能，如 SSO 和目录同步。

01

设计气质 DNA

将初创公司转变为具备企业级就绪能力平台的无形脚手架

02

色彩

在干净的白色/浅灰色表面上使用高对比度文本，辅以一个独特的蓝紫色强调色用于主要操作。

03

字体

geometric-sans · humanist-sans · monospace

• display72px · 500
• h240px · 500
• body20px · 400
• small16px · 400
• caption14px · 400
• overline12px · 500

标题使用紧凑的负字间距（-1px 至 -2px） · 正文使用标准字间距（0）以保证可读性 · 等宽字体仅严格用于代码片段和技术值 · 字重限制为 400 和 500 以建立清晰的层级 · 大写转换仅用于上标线

04

间距

垂直间距遵循严格的 4px 网格，区域填充始终为 64px，以营造富有节奏感、透气的布局。

05

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

使用 rgba(41, 56, 78, 0.08) 或纯白色的微妙 1px 边框营造内嵌效果。

0px 1px 0px 0px inset 用于微妙的内嵌边框 · 0px 2px 5px 0px rgba(0, 0, 0, 0.17) 用于凸起的卡片 · 0px 5px 10px -4px rgba(0, 0, 0, 0.17) 用于模态框/弹出框

06

布局

标准的 12 列网格，配有居中的内容容器，区域之间留有充裕的空白。

07

动效与交互

悬停状态触发背景颜色变化 · 交互元素上的变换（0.4s） · 滚动时的微妙淡入效果

按钮的背景颜色变化，文本链接的微妙颜色过渡。 · 即时视觉反馈，通常是轻微的缩放变换或阴影变化。

08

组件

• button 药丸形（border-radius: 100px）主要按钮，采用实心强调色和白色文本；次要按钮为透明背景，配深色文本。
• card 柔和圆角（border-radius: 12px）卡片，带有微妙的内嵌阴影和浅色边框，用于功能列表和集成模块。
• chip 小型药丸徽章（border-radius: 4px），用于状态指示，如“已启用”或“就绪”。
• input 标准表单字段，带有微妙的内嵌阴影和 1px 边框。
• hero 大型、粗体的标题，采用渐变文本效果（“企业就绪”），右侧搭配风格化的界面模型。

09

文案语气与禁用清单

• 语气 专业、直接、面向开发者。
• 标题风格 粗体、简洁、以效益为导向（例如“您的应用，企业就绪”）。
• 按钮文案 行动导向且清晰（“开始使用”、“咨询专家”）。

• 不要使用深色模式或深色背景——截图显示的是以白色和柔和灰色表面为主的浅色主题。
• 不要使用多种鲜艳、相互竞争的颜色——截图显示的是白色、灰色和一种主导的蓝紫色强调色组成的克制调色板。
• 不要使用装饰性或手写体——截图显示的是干净的几何无衬线字体用于标题，以及人文主义无衬线字体用于正文。
• 不要在主要按钮上使用生硬、尖锐的角——截图显示的是完全 100px 边框半径的药丸形按钮。
• 不要使用粗重的实心边框作为布局分隔线——截图显示的是微妙的内嵌阴影和非常浅的 1px 边框。
• 不要使用居中对齐的正文文本——截图显示的是左对齐文本，以提高长文本的可读性。
• 避免: 避免过于随意或俚语过多的语言
• 避免: 避免非行业标准的复杂术语
• 避免: 避免在主区域使用冗长、密集的段落

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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