Family 网站预览
Family 网站预览

Family

近白色基底、细线分隔与宽松留白。

页面以近白色为基底,搭配深灰色文字。局部操作控件以蓝色强调。字体采用 Family、Inter。视觉特点包括细线分隔、宽松留白、居中构图、胶囊形控件。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • 在所有展示和首屏标题中使用自定义 Family 字体,字号 44-68px,字重 500;此尺寸下绝不使用系统字体替代
  • 卡片和导航表面默认使用 10px 圆角;仅在胶囊按钮和徽章中使用 32-9999px 圆角
  • 构建卡片定义时使用 1px 内嵌边框(#f2f0ed),而非阴影——页面应如压在纸张上一般,而非悬浮
  • 让 #ff3e00 承担‘演示链接’和强调文本角色;保持 余烬 橙色用于内联链接和功能提示,绝不作为填充按钮使用
  • 正文使用 Inter 400,字号 16-17px,行高 1.42-1.53,字间距 -0.013 到 -0.016em
  • 以奶油底色(#fbfaf9)作为每个满幅区域的基础;通过引入 #f2f0ed 石质表面来分组卡片集群进行交替
  • 在首屏区域使用主色调填充的卡通吉祥物插图集群进行锚定;不对称散落,以确保居中文字保持焦点

建议避免

  • 绝不使用大于 rgba(0,0,0,0.04) 的阴影——设计系统拒绝厚重的堆叠效果
  • 不要将蓝色(#0086fc)用作填充型 CTA 背景;蓝色仅保留用于内联链接和列表强调文本
  • 不要引入渐变——系统严格保持平面,仅使用细线内嵌边框
  • 不要在展示尺寸中使用 Inter 字体——展示和首屏标题必须使用 Family 字体,字重 500
  • 不要使用白底白字来分隔表面;始终向 #f2f0ed 石质或 #121212 黑色过渡以实现清晰对比
  • 不要为胶囊按钮添加装饰——仅限深色胶囊(#121212)和沙色胶囊(#f6f4ef)两种形态
  • 不要将暖红色(#ff2b3a)用于除破坏性或错误状态之外的任何场景;暖色槽位属于 #ff3e00