Atlassian 网站预览
Atlassian 网站预览

Atlassian

白色基底、胶囊形控件与紧密字距。

页面以白色为基底，搭配近黑色文字。字体采用 Charlie Display、Charlie Text。视觉特点包括胶囊形控件、紧密字距、分屏构图、居中构图。适合参考的场景：软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有主要操作按钮、链接和焦点状态均使用 #1868db ——它是系统中唯一的色彩操作色
  • 将卡片圆角设为20px，按钮圆角设为28px（或10000px以实现完整胶囊形）——扁平是核心
  • 将 Charlie Display 字重400-500 与 Charlie Text 字重400-500 配对使用；仅在行内强调时使用700以上的字重
  • 用紫色（#bf63f3）、黄色（#fca700）、蓝色（#1868db）和绿色的几何碎片形状框住深色首屏区块——这些颜色绝不可作为功能UI内部的填充色
  • 在白色区块之间使用 #eed7fc 淡薰衣草色作为编辑类区块分隔线；禁止用于按钮或交互元素
  • 当需要任何层级的叠加时，使用带有海军蓝调的阴影堆叠（rgba(9, 30, 66, ...)）——绝不可使用中性黑色阴影
  • 标题设为40-80px，字间距收紧为0.012em；正文设为16px，行高1.50，以营造宽松的阅读节奏

建议避免

  • 不要为UI引入额外的强调色——黄、紫、绿仅作装饰用途，绝不可出现在按钮、链接或表单控件上
  • 不要使用厚重的投影或层级叠加——系统刻意保持扁平；深度仅来自色彩反转和圆角本身
  • 卡片或图片不要使用锐角——所有卡片必须应用20px圆角，图片至少应用5px圆角
  • 不要随意混合两个字体家族的字重——Charlie Text 负责UI（13-24px），Charlie Display 负责编辑内容（24-80px）
  • 不要将黑色（#000000）用作背景或大面积填充——它仅作为文字和边框墨色出现；深色区块使用 #101214
  • 不要在薰衣草色或蓝色上放置白色文字——对比关系仅限于深色文字配浅色背景，或白色配海军蓝背景
  • 不要重复或拼接碎片渐变——它仅作为单一装饰性边框装置，而非图案或纹理

相似设计语言