Tatem 网站预览
Tatem 网站预览

Tatem

深色基底、圆角卡片与渐变展示。

页面以深色为基底,搭配白色文字。字体采用 Inter。视觉特点包括圆角卡片、渐变展示、大字排版、细线分隔。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有内容均使用 Inter 字重 400——禁止引入粗体或中等粗体字重;层级关系完全依赖字号本身
  • 所有交互元素(按钮、标签、标签)的圆角保持 6px,内容卡片的圆角保持 10-16px
  • 所有内容区块均锚定在 #3b3b3b 深色画布上;仅将蓝灰渐变保留用于首屏区域
  • 将 #ffffff 的标题与 #919191 的正文文字配对,形成标志性的高对比度却安静的层级结构
  • 使用 1px 实线 #606060 细线作为分隔线,使用 #606060 作为提升卡片的背景色——禁止使用阴影实现立体感
  • 默认内容区块间距为 96px 上下,内容在最大 1200px 宽度内水平居中
  • 使用 13px 图注 / 16px 正文 / 40px 大标题三组字号作为唯一需要的字体层级跳跃

建议避免

  • 禁止使用填充的彩色按钮——系统依赖透明描边,从不使用实体品牌色的行动号召按钮
  • 禁止使用阴影或投影效果;立体感仅通过表面色调变化传达
  • 单屏内不可使用超过一个色彩元素——日光放射纹标志、首屏渐变,仅此而已
  • 禁止打破单字重规则,禁止在 Inter 中引入 600 或 700 字重;若标题感觉过于柔和,应通过增大字号解决
  • 禁止在任何位置使用大于 16px 的圆角;系统风格为锐利紧致,而非圆润饱满
  • 主界面中不可用颜色来表示状态或情形;应通过不透明度变化(ffffff 与 919191)来体现激活/未激活状态
  • 禁止在除首屏之外的其他内容区域使用品牌渐变;在多个区块重复使用将削弱其氛围感