Raus 网站预览
Raus 网站预览

Raus

暖白色基底、紧密字距与摄影展示。

页面以暖白色为基底,搭配深绿色文字。字体采用 neue-haas-unica、fonts。视觉特点包括紧密字距、摄影展示、非对称构图、网格布局。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 所有标题统一设置为字重 300,负字间距——在 40px 时为 -0.8px,递减至 12px 时为 -0.07px。这是其声音;切勿加粗。
  • 仅在标志、首屏区域的主要标题以及内联文本链接中使用松树绿(#006434)。切勿用作按钮填充、徽章背景或装饰性形状。
  • 将奶油纸张(#f7f0e1)作为每页的主导背景。只有向日葵搜索栏、晨空公告条和雪景图层可打破这一基调。
  • 为所有交互元素提供充足的圆角:按钮和卡片为 20px,首屏区域卡片为 40px,导航胶囊式组件为 99px。整体触感应柔软,绝不出现锐角。
  • 首屏区域以非对称的2栏图像配对(一高一低)呈现,而非居中堆叠。摄影与文字并列,而非置于其下。
  • 将向日葵色(#fcbd1c)作为表面色,而非描边或文字颜色。它应出现在搜索栏、强调区块和标签填充中,其他地方均不可使用。
  • 在描述性文案前,先用小号全大写元数据标签(IDEA 32、PERSPECTIVES)标记内容,字号为 12px、字重为 400、颜色为炭灰色。类别就是标题。

建议避免

  • 任何组件均不可使用阴影。深度来自奶油色叠加与圆角,而非抬升效果。
  • 正文或标题均不可居中对齐。所有内容均左对齐于奶油背景之上。
  • 切勿将向日葵、琥珀、晨空色用于正文。它们仅为表面与强调色——暗灰是唯一的文字颜色。
  • 切勿在任何可见元素上使用锐角(圆角 0–8px)。即使是小部件和内联标签,最小圆角也应为 12px;卡片圆角绝不可低于 20px。
  • 切勿将松树绿用作按钮背景。若需品牌色操作,应使用暗灰填充,搭配松树绿文字,置于雪色胶囊中——绿色的分量正因稀有而得以体现。
  • 切勿将显示文本行高设为高于 1.05。0.95 至 1.0 的紧密范围,才让 40px 字重 300 的文字呈现出雕塑感,而非轻飘感。
  • 切勿将摄影置于有可见描边的边框、边框或卡片内。图片直接位于奶油背景之上,仅通过圆角定义边缘。