Samara 网站预览
Samara 网站预览

Samara

白色基底、网格布局与宽松留白。

页面以白色为基底,搭配近黑色文字。字体采用 regola。视觉特点包括网格布局、宽松留白、大幅图像展示、产品图像展示。适合参考的场景:建筑作品集、空间项目展示页。

查看原始网站

使用规范

建议采用

  • 所有大于30px的标题均使用 `regola-light` 字体,并搭配紧密的负字间距。
  • 将主页面背景设为 #fdfdf7(羊皮纸色),绝不可使用纯白 #ffffff。
  • 为主要交互元素(如调用按钮和链接)保留鲜艳的 #0096f7(天蓝色)。
  • 为几乎所有的按钮、输入框和卡片应用一致的 12px 圆角。
  • 在主要内容区块之间使用充足的空白间距(96px-120px)。
  • 使用微妙且较短的阴影(如 `rgba(0, 0, 0, 0.12) 0px 0.5px 2px 0px`)使元素柔和突出。
  • 将大尺寸、空旷的排版与高质量的产品摄影以及简洁的3D渲染相结合。

建议避免

  • 不要在大面积背景中使用纯白色(#ffffff)。
  • 不要在标题中使用粗体或厚重的字重;改用尺寸和轻量级字重。
  • 不要在按钮和卡片等主要UI组件上使用尖锐的0px圆角。
  • 不要使用复杂的色彩搭配;应坚持核心的米色/墨色/天蓝色配色体系。
  • 不要使用强烈、深沉或有颜色的阴影。
  • 不要忽视排版细节;特定的字间距和行高值至关重要。
  • 不要将元素放置得过于靠近;设计依赖于充足的留白。