Cycle

带有宝石色调标签的墨渍瓷质工坊
Cycle的视觉语言呈现出温暖的模拟工作空间感——略带偏白的画布,墨黑字体,以及深邃宝石色调的调色盘,这些色彩更像复古墨水瓶,而非SaaS产品的装饰性点缀。标题使用Eudoxus Sans字体,字重为粗体,字间距紧密,使每个标题都具有实体质感;正文和UI默认采用Inter字体,字号为舒适度的14–16px。组件采用非常柔和的阴影系统(低不透明度暖灰色)而非硬边框,大尺寸20px圆角使卡片看起来像陶瓷瓷砖。色彩具有功能性与分类性——每个产品代理或功能模块都拥有专属的深色色调(青色、紫色、琥珀色、酒红色)及其对应的调色背景,从不使用装饰性渐变。
查看原始网站使用规范
建议采用
- 在任何页面上,单个主要行动按钮使用#000000填充 + #ffffff文字;禁止在同一视口引入第二个填充型CTA颜色。
- 将每个深色品牌主色(#38296c、#004d60、#6c4800、#46122d)与其对应的调色背景搭配使用——紫色文字搭配#f5f0ff,青色搭配#defafe,琥珀色搭配#fff6e1,酒红色搭配杏色调背景——以保持分类系统的可读性。
- 所有展示性标题均使用Eudoxus Sans 700–800字重,字间距在-0.026em至-0.035em之间;禁止在27px以上使用Inter字体。
- 卡片使用20px圆角,按钮使用8px圆角,徽章/标签使用100px圆角——这三个圆角值定义了系统的轮廓。
- 正文文本锚定在Inter 14–15px字重400,行高1.62;仅用于行内强调时使用600字重,禁止用于完整段落。
- 在温暖画布上的白色卡片下方叠加标志性的柔和阴影(rgba(239,239,239,0.55) 0 2px 15px);避免在提升状态的表面使用硬边框。
- 页面背景使用#f7f7f7,卡片使用#ffffff,以保持温暖的偏白模拟质感——禁止使用纯#ffffff作为全页背景。
建议避免
- 不要在正文或标题文字中使用#000000——仅使用#171618作为墨色;纯黑色仅用于CTA填充和标志。
- 不要引入明亮或饱和的辅助色(如电蓝色、霓虹绿色等)——系统中的所有色彩值均为深沉、柔和的宝石色调。
- 不要在正文或产品UI中使用Eudoxus Sans——该字体仅为展示用途;从 12px 图注到 27px 副标题,全部由Inter字体处理。
- 不要在卡片或输入框上使用尖锐的4px或0px圆角——系统的柔和感来自20px / 12px / 8px的曲线。
- 不要在同一视口中堆叠多个彩色CTA按钮;系统严格限定为一个填充黑色的主行动按钮,加上每个表面的透明描边或轮廓型次级操作。
- 不要在背景或按钮上使用渐变——色彩体系依赖于平滑的深色调及其调色背景来营造层次感。
- 不要将品牌色彩用于装饰性渐变或大面积背景填充——这些色彩应仅用于文字、图标及小的辅助元素,并与对应的调色背景搭配使用。