OpenDesign·你的设计资产库

网页参考

WorkOS

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

SaaSDeveloper Tools
WorkOS 网站截图

01

设计气质 DNA

企业开发者API集成基础设施

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

02

色彩

#6363F1Accent
#29363DInk
#65678AInk soft
#FFFFFFBG
#F9F9FBBG soft
#F2F2F8BG quiet
#AEB2CCMuted
rgba(41, 56, 78, 0.08)Line

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

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
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用 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

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

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

10

包内真实截图

WorkOS — 桌面首屏（hero）
桌面首屏（hero）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
WorkOS — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个用于 WorkOS 的 SaaS 和开发者工具网站。设计干净、专业、结构高度清晰，专注于清晰度和企业就绪性。关键颜色是白色（#FFFFFF）和柔和灰色（#F9F9FB）背景、深色文本（#29363D）以及一个主导的蓝紫色强调色（#6363F1）。字体特征为：用于粗体展示标题的几何无衬线字体（带有紧凑的负字间距），以及用于清晰正文的人文主义无衬线字体。关键禁忌：避免深色模式，避免多种相互竞争的强调色，避免使用装饰性字体。布局使用 12 列网格，留有充裕的空白，并在卡片上使用微妙的内嵌阴影来营造深度而不显沉重。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。