Rains INT 网站预览
Rains INT 网站预览

Rains INT

近白色基底、大幅摄影展示与产品图像展示。

页面以近白色为基底,搭配近黑色文字。字体采用 EuropaGroNr2SH、EuropaGroNr2SB。视觉特点包括大幅摄影展示、产品图像展示、胶囊形控件、大字排版。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有展示文字和标题都使用 EuropaGroNr2SH,不替换展示字体;232–245px 的尺度与 0.90 行高是标志性特征。
  • 每个按钮、标签及胶囊形控件的 border-radius 都设为 9999px;这个体系不使用尖角。
  • 所有界面框架只使用雾灰、墨色、纸白和炭灰,让摄影提供唯一的视觉丰富度。
  • #fffb85 仅用于叠在摄影上的超大首屏展示文字,不用于按钮、链接或小号界面文字。
  • 产品图像从边缘到边缘填满容器,不加卡片边框、内边距或阴影。
  • 分区间距保持 48–56px,让灰色画布承载内容块之间的节奏。
  • 最大尺度的展示标题使用 400 字重;245px 下轻盈的字重通过克制而非声量建立权威。

建议避免

  • 不要在界面中加入饱和强调色,如红、蓝或绿;1% 的彩色程度是有意为之。
  • 不要给任何组件添加 box-shadows、drop-shadows 或渐变填充;整个体系完全扁平。
  • 按钮或交互元素不要使用尖角或中等圆角;只使用 9999px 或 0px。
  • 文字不要使用纯 #000000,使用 #10100f;近黑色的暖意是一项设计选择,而非妥协。
  • 没有足够对比度或深色遮罩时,不要把正文直接放在产品摄影上。
  • 不要打破两种字体的分工:12–14px 系统文字使用 EuropaGroNr2SB,16px 及以上使用 EuropaGroNr2SH;跨字体混用尺寸会割裂视觉语气。
  • 卡片组件不要添加装饰边框、分隔线或背景色调;摄影和灰色画布定义全部视觉结构。