Fabric 网站预览
Fabric 网站预览

Fabric

白色基底、衬线字形与细线分隔。

页面以白色为基底。字体采用 GT Alpina Light、Inter。视觉特点包括衬线字形、细线分隔、居中构图、产品图像展示。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 所有填充型行动按钮使用 #0a0a0a ——它是系统中唯一的填充表面,定义了行动号召的层级结构。
  • 首屏标题使用 GT Alpina Light 300 字重,字号范围 52–80px,字间距 -0.02em ——衬线是品牌的标志性特征。
  • 所有结构边框统一设置为 1px 的 #000000 ——系统使用细线黑色边框,而非彩色或粗边框。
  • 按钮和导航元素使用 8px 圆角,卡片使用 16px,大功能卡片使用 24px ——此三档圆角层级构建了视觉层级。
  • 所有链接文本和轮廓型操作边框使用 #19154(墨紫)——切勿使用 #1100ff 作为文本颜色。
  • 保持配色 98% 无彩色——仅允许 #1100ff 以柔和的发光光环、聚焦环和产品卡片后的阴影色调形式出现。
  • 正文使用 Inter 400 字重,UI 标签使用 500 字重,按钮文本和强调元数据使用 600 字重——UI 中绝不超过 600。

建议避免

  • 切勿将 #1100ff 用作填充按钮背景或正文文本——它仅作为发光/光环色使用。
  • 切勿将无衬线字体用于首屏标题——GT Alpina Light 衬线字体是品牌的标志性特征,不得被 Inter Bold 替代。
  • 切勿使用厚重的投影阴影——系统仅使用 rgba(0,0,0,0.1) 0px 1px 1px 和 rgba(0,0,0,0.05) 0px 2px 4px 作为纸张纹理效果。
  • 切勿引入新的彩色元素——2% 的色彩度是刻意设计的;每新增一种色调都会削弱编辑风格的克制感。
  • 切勿为卡片设置 40px 的圆角——该值仅用于胶囊标签和徽章元素。
  • 切勿将正文文本设置低于 15px 或高于 18px——UI 字体层级保持紧凑且自信。
  • 切勿使用蓝色链接色(#0000ee 或类似)——所有链接必须使用 #19154 并搭配 1px 边框下划线。