Rainbow 网站预览
Rainbow 网站预览

Rainbow

白色基底、胶囊形控件与渐变展示。

页面以白色为基底,搭配近黑色文字。字体采用 SF Pro Rounded。视觉特点包括胶囊形控件、渐变展示、分屏构图、居中构图。适合参考的场景:技术项目官网、区块链产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有可见文字使用 SF Pro Rounded 字体,字重范围为600-900;圆润的字形是品牌调性,而锐利的无衬线字体则打破整体性格
  • 展示标题文字设置为56px或更大,并搭配-0.028em至-0.03em的字间距——任何更小的字号将失去糖果墙效果
  • 仅使用橘色(#ff8a00)和亮粉(#ff54bb)作为填充按钮背景;禁止使用近黑色或灰色作为按钮填充
  • 所有交互元素——按钮、导航链接、提示弹窗和下载行动按钮——均需设置40-50px的胶囊半径,使其看起来像小石子
  • 让多色棱镜渐变作为满幅区块背景自然延展,占据100%视口宽度;禁止将其裁剪进受限的容器内
  • 每个行动按钮右侧配以白色底纹的彩虹图标——该图标是品牌标识,而非装饰
  • 所有设备边框、卡片和大图容器均采用32px的圆角——此圆角是将Rainbow与常规8-12px圆角SaaS产品区分开的视觉特征

建议避免

  • 禁止引入超出橘色/粉红/珊瑚/天空色调系统的额外辅助色——该色彩体系刻意保持狭窄
  • 禁止在卡片上使用扁平阴影;深度必须来自内嵌的白色高亮或淡色渐变晕染,而非外层阴影
  • 禁止正文文字小于16px或大于20px(在圆润字体家族中)——字体层级从20px直接跃升至32px及以上以强调重点
  • 禁止在任何用户可见元素上使用锐角——图标最小圆角为10px,所有边框均为32px
  • 禁止将彩虹标志置于有色彩背景上而无白色容器底纹——标志需要一个白色舞台
  • 禁止连续排列超过两个填充行动按钮;仅允许橘色和亮粉的组合
  • 禁止使用1px细线边框进行分隔——优先使用云灰表面渐变或48px以上的充足留白间距
  • 禁止让渐变最终变为硬色块;所有渐变必须在一边自然过渡至白色或云灰