Home 网站预览
Home 网站预览

Home

暖白色基底、大幅摄影展示与细线分隔。

页面以暖白色为基底,搭配近黑色文字。字体采用 Rules Font。视觉特点包括大幅摄影展示、细线分隔、居中构图、网格布局。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有非摄影区域使用奶油纸(#e4dfd9)作为默认页面背景——绝不切换为纯灰色或纯白色画布
  • 所有标题使用 Rules Font 500 字重,字号为 28px 或 69px,字间距为 -0.02em——绝不使用 600 及以上或粗体变体
  • 所有卡片表面的边框圆角设为 20px,标准按钮为 8px,输入框为 12px,胶囊切换控件和标签芯片为 9999px
  • 使用单个琥珀橙点(#ff6a1f)作为动态状态指示器、首屏区域标题后的句点以及匹配评分徽章——绝不将其用于大面积填充、背景或按钮状态
  • 所有功能卡片和产品表面的内边距设为 32px
  • 使用 Pressed Graphite(#171717)作为填充按钮的背景色,搭配白色文字用于主要操作
  • 保持部分区域间距为24-32px,元素间距为8px,以维持舒适、编辑性的呼吸节奏

建议避免

  • 不要引入额外的色彩——系统本意为单色,仅保留一个琥珀橙强调;加入蓝色、绿色或其他色彩会破坏编辑风格的统一性
  • 不要在标题中使用粗体(700及以上)或重字重——Rules Font 500 是标志性的克制表达
  • 不要在阴影之外使用任何超出单层柔和模式 rgba(0,0,0,0.07) 0px 6px 27px 的阴影——避免彩色、多层或硬阴影
  • 不要在可用 Pressed Graphite(#171717)时使用纯黑色(#000000)作为填充按钮背景——轻微的暖调至关重要
  • 不要将卡片或按钮的圆角设为 4px 或 0px——8-20px 的范围是系统的触感特征
  • 不要在单个视口内使用超过一个色彩元素——琥珀橙点应像标点一样,而非装饰
  • 不要将 69px 的显示字号用于副标题或正文——仅保留用于首屏区域级标题