Rox 网站预览
Rox 网站预览

Rox

编辑式大报与产品UI相遇:温暖新闻纸上的黑色衬线报头、极细格线,以及唯一蓝色按钮。

Rox 在温暖的石质画布上采用高对比度的编辑语言:一个巨大的衬线显示标题主导首屏区域,而产品界面则以紧凑、带有细线边框的UI进行表达。配色接近单色——从 #ececea 画布到 #1c1917 墨色的暖灰色调——仅在主要操作按钮上使用一道电蓝色,其他所有状态均保持单一色调。状态提示(富化、互动、回复)是唯一出现多色的地方,且仅以小尺寸的药丸状徽章形式呈现,从不作为装饰性晕染。整体风格如同将金融类日报重新设计为软件界面:权威的排版、无圆角柔和感、极简阴影,信息密度集中在关键区域。

查看原始网站

使用规范

建议采用

  • 展示衬线字体(FH Total Display / Playfair Display)仅用于首屏标题,每页只出现一次,是标志性处理,而非反复使用的样式。
  • 所有边框保持 1px 且颜色为 #d4d2d1——系统基于细线构建,而非阴影或填充容器
  • 主要操作按钮必须独用 Volt Blue #0b64e9——绝不作为装饰性辅助色、图标填充或文字颜色使用
  • 展示衬线字体保持0.80行高,让首屏文字行产生戏剧性的重叠。
  • 状态色(#f9b703、#f24149、#f97006、#6b4aff)仅作为 11px 或更小的胶囊徽章使用——它们是功能性信号,而非品牌装饰
  • 卡片圆角设为 12px,按钮圆角设为 6px——这种两级圆角层级是区分界面表面与控件的关键
  • 每个区块的页面背景必须保持温暖的石质画布 #ececea——禁止引入白色或灰色区块背景

建议避免

  • 展示衬线字体不要用于副标题、卡片标题或导航,重复使用会削弱冲击力。
  • 卡片阴影不可超过 rgba(0,0,0,0.06) 0px 2px 4px——系统为扁平化设计,仅以细线边框呈现,无立体感
  • 按钮或徽章的圆角不可设为 9999px——6px/4px 的圆角是保持界面锐利与编辑风格的关键
  • 禁止将彩色用于区块背景、渐变或大面积填充——页面应保持单色基调,仅保留一个蓝色按钮
  • 不要为展示衬线字体额外增加字间距,紧凑的0.80行高和正常字间距共同营造报头感。
  • 信任条中不得使用彩色标志——所有标志必须以 Stone 600 或黑色呈现,以维持单色基调
  • 正文文本禁止使用 #000000——应使用 #1c1917(墨黑)以在温暖画布上实现更柔和、更易读的阅读体验