Instagram Sans Typeface 网站预览
Instagram Sans Typeface 网站预览

Instagram Sans Typeface

明暗对比、渐变展示与宽松留白。

页面兼有浅色与深色区域。字体采用 Instagram Sans、Instagram Sans Headline。视觉特点包括渐变展示、宽松留白、满幅色块、网格布局。适合参考的场景：音视频产品介绍页、媒体内容展示页。

查看原始网站

使用规范

建议采用

  • Instagram Sans 只用字重 400，字体没有字重变体，不要通过 CSS 伪造粗体或轻体。
  • 所有内容区块的 paddingLeft 与 paddingRight 应用 51px，匹配字体样本面板的侧向呼吸空间。
  • 字号越大越收紧字间距：16px 时 -0.02em，32–46px 时 -0.03em，62px 及以上 -0.035em。
  • Instagram 品牌渐变只以完整资产，相机标志，或 72.44deg 线性渐变使用；绝不旋转、改色或反转色标顺序。
  • 样本字形使用 Pure Black #000000，圆角 0px，字形几何的尖锐边缘就是重点。
  • 字形样本上放置超大构造线覆盖层，粉色圆与线，揭示字体设计意图。
  • 满幅 Hot Magenta、Lavender Mist 色带与白色内容区块交替，形成编辑节奏。

建议避免

  • 不要使用纯色填充行动按钮；系统通过 Graphite 边框的轮廓 Ghost 按钮表达操作。
  • 品牌渐变不要用作背景色层、覆盖层或卡片填充，只留给相机标志与唯一标志性渐变实例。
  • #385898 Link Indigo 不要用于按钮、填充或大面积表面，它只是文字链接色。
  • Instagram Sans 不要用 font-weight 600+ 或斜体，该家族只提供 400。
  • 样本字形、卡片或面板不要加投影，系统平面、无阴影，依赖尺度对比。
  • Hot Magenta #f689ff 不要作为文字或小图标色，它只用于满幅表面面板。
  • 不要引入额外字体，Helvetica 只作为系统回退，绝不是有意设计选择。

相似设计语言