Hugging Face 网站预览
Hugging Face 网站预览

Hugging Face

白色基底、细线分隔与扁平表面。

页面以白色为基底。字体采用 Source Sans Pro、IBM Plex Mono。视觉特点包括细线分隔、扁平表面、分屏构图、非对称构图。适合参考的场景：AI 工具官网、产品能力介绍页。

查看原始网站

使用规范

建议采用

  • 所有正文与列表文字采用Source Sans Pro、字重400；700仅用于最大标题，600用于按钮标签和区块标题。
  • 卡片与输入框设为8px圆角，标签与小标签块为4px；只有认证胶囊采用25.6px完全圆角。
  • 页面保持#ffffff画布与#e5e7eb极细边框，让唯一的午夜色首屏面板成为页面仅有的深色表面。
  • 任何模型名称、数据集slug、仓库路径或技术标识都采用IBM Plex Mono 15px；等宽网格表明“这是标识，而非段落文字”。
  • 以🤗表情符号作为品牌标志，它是系统中唯一允许的暖色，且应保持较小尺寸（16–80px）。
  • 紧凑元信息行采用2px垂直内边距，列表内部采用8px行间隔，以保持数据密集的电子表格感。
  • Link Blue（#155dfc）少量使用，仅用于激活导航状态、聚焦链接以及每个视图一个强调，绝不用作填充。

建议避免

  • 白色区块不要引入额外品牌色或渐变背景；渐变Spaces卡片是唯一例外，而且仅位于趋势栏。
  • 阴影不要叠加得超过单一1px-y层；设计拒绝沉重高度感。
  • Source Sans Pro不要小于10px或大于96px，字号尺度必须按既定范围使用。
  • 不要在同一行将按钮圆角设为8px、胶囊设为25.6px；圆角差异承载语义，区分控件与操作。
  • 除首屏面板和产品预览外，不要在其他地方应用午夜渐变（#101828）；页面其他部分为白色。
  • 黄色标志色（#ffd21e）不要用于按钮、背景或文字填充，它只存在于表情符号中。
  • 展示字号不要使用0px或6px字间距；Source Sans Pro的人文主义字形在大字号下需要默认字间距。

相似设计语言