Circle 网站预览
Circle 网站预览

Circle

深蓝色基底、产品图像展示与渐变展示。

页面以深蓝色为基底。字体采用 Inter。视觉特点包括产品图像展示、渐变展示、紧密字距、分屏构图。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 主要CTA必须使用蓝→紫渐变(Signal Blue #408fed 到 Plasma Violet #3e1bc9),这是唯一应与极光页面竞争的行动按钮。
  • 所有按钮、输入框、标签和标签页的圆角半径设置为9999px——胶囊形状是该系统的几何特征。
  • 页面背景保持为#0f0f35,让极光渐变从中心向外辐射;禁止用纯色深或浅色替代。
  • 在展示尺寸(40-64px)下使用Inter,字间距为负值(-1.24px 至 -3.2px),使标题显得密集且具有建筑感,而非空旷轻盈。
  • 用色彩对比区分营销页面与产品页面——白色面板置于深色画布上,不使用阴影或边框。
  • 使用柔和的强调表面(Blush Mist、Lavender Whisper、Sunbeam、Polar Sky、Mint Glow)为软卡片和透明描边按钮增添变化,同时不打破深/亮二元结构。
  • 阴影使用限制为rgba(169,169,169,0.08) 4px/8px——仅用于产品面板的单次轻柔抬升。

建议避免

  • 页面背景不得使用纯色——从中心辐射的极光渐变才是其标志。
  • 不得使用方形或圆角矩形按钮——该系统中唯一的按钮形状是胶囊形(9999px)。
  • CTA按钮不得添加边框、描边或额外阴影——渐变填充承载全部视觉重量。
  • 标题不得使用独立字体家族——所有尺寸均使用Inter,仅通过字重和字间距区分。
  • 不得在白色表面使用浅色文字,或在深色画布上使用深色文字——保持二元对比:白色文字在#0f0f35上,#0a0a0a文字在白色上。
  • 不得叠加多个渐变,或在大面积上将品牌渐变作为背景填充——仅限按钮和小的强调形状使用。
  • 不得引入第二类CTA样式与渐变竞争——粉彩透明按钮是唯一替代方案,且其视觉重量绝不能与主渐变持平。