Riverside 网站预览
Riverside 网站预览

Riverside

工作室暗房后置磨砂玻璃

Riverside 采用近乎单色的浅色系统,以白色画布和近黑色文字为基调,辅以单一鲜明的紫罗兰色点缀(#9671ff),成为整个界面中唯一的色彩元素。视觉节奏在纯白色内容区块与满幅深色区域(近黑色背景)之间交替,后者用于容纳功能列表和行动号召(CTAs),形成类似电影的开/关节奏,而非连续的亮色布局。字体完全采用 Inter(仅保留 IBM Plex Sans 600 用于特定角色),在大字号时采用激进的负字间距和紧凑行高——标题显得压缩且有目的性,而非空旷松散。组件设计轻盈:按钮为 300px 半径的胶囊形,卡片边角为 8px,细线边框搭配柔和色调,几乎无层叠效果。紫罗兰色点缀被严格控制——每屏仅一个填充型 CTA,偶尔使用图标笔触,搭配柔和的底色晕染——使其感觉像一次刻意的开关动作,而非装饰。

查看原始网站

使用规范

建议采用

  • 所有展示和区块标题使用 Inter 800 字重,字间距 -0.0060em —— 紧凑的字间距防止大字号 Inter 产生松散感,营造出定义品牌的压缩型粗体风格
  • 所有按钮和标签的边框半径设为 300px —— 胶囊形状是该系统中最易识别的 UI 元素
  • 每视口使用 #9671ff(Studio Violet)仅一个填充型 CTA —— 严格控制该主色的使用,使其发挥视觉开关的作用
  • 在满幅深色区域(#111111)与白色内容区块之间交替 —— 开/关节奏营造出电影级节奏,而非连续的平面布局
  • 标题字号设为 56–80px,行高 1.04–1.08 —— 紧凑的行距使大字号显得具有建筑感,而非空旷
  • 在深色展示区块中,功能列标签仅使用 IBM Plex Sans 600 —— 几何对比将功能类别与描述性正文区分开来
  • 所有信任与合作伙伴标志以灰度(Carbon 或 Smoke)呈现 —— 色彩标志破坏了单色系统的纪律,使紫罗兰色点缀更突出

建议避免

  • 禁止引入额外的强调色 —— 该系统为单色系统,引入第二色会削弱 Studio Violet 的信号强度
  • 禁止将纯黑色(#000000)用于正文 —— 使用 #1d1d1d(Carbon);纯黑与白的对比过于刺眼,破坏了系统略带温暖的中性调性
  • 禁止使用厚重的盒阴影来表现层级 —— 卡片阴影 rgba(0,0,0,0.25) 0px 4px 15px 为罕见例外;优先使用边框和表面色调来体现层级
  • 禁止正文行高超过 1.65 —— 紧凑的行高(1.50–1.57)是该系统自信、紧凑语气的一部分
  • 禁止将紫罗兰色 CTA 相邻放置 —— 每视口仅一个,之间需用白色空间或不同区块分隔
  • 禁止使用超过 8px 半径的圆角图片 —— 内容卡片上的 4px 锐角边框营造出摄影质感;过度圆润会显得幼稚
  • 禁止使用 IBM Plex Sans 用于正文或大标题 —— 它仅作为标签字体;在大尺寸下使用会破坏以 Inter 为主导的系统