Riverside
浅色基底、胶囊形控件与圆角卡片。
Supahub
浅色基底、渐变展示与宽松留白。
页面以浅色为基底，搭配近黑色文字。局部操作控件以紫色强调。字体采用 Bricolage Grotesque、Inter。视觉特点包括渐变展示、宽松留白、居中构图、网格布局。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- Bricolage Grotesque仅用于展示与标题，20px及以下切换为Inter，绝不在同一字号混用两款字体。
- 主要CTA在白色背景上采用#862fe7填充，在薰衣草（#ebdafd）区块上采用#111827填充，绝不反转。
- 按钮圆角12px，9999px胶囊仅用于头像、星级评分和标签块，这两种圆角是系统标志。
- 32px及以上Bricolage Grotesque采用-0.025em字间距，收紧字间距让展示字体像定制字体。
- 每个区块以大写眉题锚定，采用Inter 12px、700字重、+0.1em字间距，放在标题上方16px。
- 装饰渐变球体采用紫罗兰、粉色、琥珀色和0.2–0.4不透明度，放在浮动产品模型卡片背后，绝不放在文字或CTA正后方。
- 色带之间默认垂直节奏为80px区块间隔，仅在区块标题与第一内容块之间收紧为48px。
建议避免
- 不要引入新无衬线家族，Bricolage Grotesque与Inter是仅有的两款允许字体。
- #862fe7不要用于薰衣草（#ebdafd）背景，那里会失去对比；浅色区块上的操作切换为#111827。
- 主要表面不要使用锐利的4px或0px圆角，系统由12px按钮和胶囊头像定义。
- 20px以下不要使用Bricolage Grotesque，其特征在小字号下减弱，Inter更适合密集UI。
- 单一构图不要叠加超过三个渐变球体，氛围保持通透，绝不迷幻。
- 装饰粉色（#ff5fe4、#e22ba4）或琥珀色（#dc5f05）不要用于文字、边框或交互状态，它们只位于渐变球体和客户评价卡片高亮中。
- 不要添加浓重投影；系统采用唯一内嵌环与极少产品模型深度，表面区别来自颜色和边框，而非高度效果。
