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样式与渐变竞争——粉彩透明按钮是唯一替代方案,且其视觉重量绝不能与主渐变持平。