OpenAI Developers 网站预览
OpenAI Developers 网站预览

OpenAI Developers

白色基底、胶囊形控件与圆角卡片。

页面以白色为基底。字体采用 OpenAI Sans。视觉特点包括胶囊形控件、圆角卡片、渐变展示、细线分隔。适合参考的场景:AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

  • 所有卡片、输入框和矩形按钮均使用 8px 圆角
  • 仅对胶囊形按钮和标签芯片使用 9999px 圆角
  • 正文文字设定为 16px 字重 400,字间距 -0.008em
  • 所有标题均锚定在 30px 字重 600,字间距 -0.02em
  • 页面画布保持纯 #ffffff;仅当需要安静分隔时,才使用 #f9f9f9 作为卡片表面颜色
  • 深色 CTA 使用 #000000;绝不引入彩色 CTA 背景
  • 所有间距和内边距均以 4px 为基准单位——避免使用 5px、7px 或其他奇数值

建议避免

  • UI 控件中不得添加色彩强调——颜色仅用于装饰性产品卡片和模型标识
  • UI 控件中不得使用超过单层 1px 0,0,0,0.08 的阴影;深度来自表面变化,而非堆叠
  • 矩形表面的圆角不得超过 8px——唯一例外是胶囊形控件
  • 不得混合字体家族——OpenAI Sans 是唯一的字体,字重变化构成层级
  • 大段正文文字不得使用纯黑色——深色 #000000 仅用于按钮和标题,标题使用 #181818,重复正文内容使用 #282828
  • UI 组件中不得使用渐变填充;渐变仅保留用于折叠区域内的重点产品卡片
  • 所有排版尺寸不得超过 30px——尺寸刻意压缩,层级体现在字重和间距上