Home 网站预览
Home 网站预览

Home

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

页面以暖白色为基底，搭配近黑色文字。字体采用 Roslindale Display Condensed、Suisse Intl。视觉特点包括大幅摄影展示、细线分隔、分屏构图、宽松留白。适合参考的场景：摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 每个交互元素，包括按钮、卡片、徽章和输入框，都采用5px border-radius；不要引入胶囊形、完全圆角或其他圆角数值。
  • 卡片、按钮和导航的默认边框使用1px solid #370808（Oxblood）；边框就是抬升系统，绝不要再配投影。
  • Roslindale Display Condensed 300、120–140px和0.86–0.90行高的组合只用于首屏展示；不要用于副标题、正文或UI附属元素。
  • 正文采用Suisse Intl 400、18–21px，导航、徽章和强调采用700；所有字号的letter-spacing保持在-0.009em至-0.01em之间。
  • 分区以#fff9eb（Vellum）作为基础画布；#f0e7d7（Linen）只用于需要提高一个层级的卡片或表面，卡片背景绝不要比页面更浅。
  • 微距照片作为无框、直角的满幅分区呈现；14–18px的Vellum色说明直接放在图像上，绝不要放入覆盖照片的边框卡片中。
  • 让Oxblood（#370808）承担结构分量，包括边框、轮廓、导航线条和徽章文字；除非刻意设计反转分区，否则避免将它用于大面积填充。

建议避免

  • 不要添加投影、模糊或辉光；系统通过1px边框和Vellum与Linen之间1–2%的色调变化表达深度。
  • 圆角不要大于5px；不使用胶囊按钮、圆形头像或12–16px卡片圆角，这些属于另一种设计语言。
  • 不要引入奶油色、牛血红和金色家族之外的饱和蓝、绿或其他彩色强调；调色板刻意保持狭窄。
  • Roslindale Display Condensed不要采用正文字号；它是一款120px+的展示字体，用于22–28px会使其鲜明窄体比例失效。
  • 展示标题不要居中；这个系统中的展示文字锚定左侧，或与略有偏移的小说明并置，而非像SaaS首屏一样正中放置。
  • 不要给UI表面添加渐变、玻璃拟态或纹理叠加；奶油纸本身就是纹理，再叠加其他层会破坏模拟质感。
  • 默认CTA不要采用牛血红填充按钮；系统默认是描边变体，即1px牛血红边框和Vellum填充，牛血红填充按钮会与分区摄影竞争。

相似设计语言