OpenDesign·你的设计资产库

网页参考

About Instagram

为 Instagram 定制无衬线字体打造的大胆字体排印展示

TypographyDesign ToolsEditorialPremiumExpressive
About Instagram 网站截图

01

设计气质 DNA

字体排印定制字体品牌标识设计系统Instagram

展示定制字体系列的主字体排印样本

02

色彩

#D300C5Accent
#1C1E21Ink
#8E8E93Ink soft
#FFFFFFBG
#D4D4D4Muted
rgba(28,30,33,0.12)Line

在干净的中性背景上使用高对比度与充满活力的强调色

03

字体

humanist-sans

  • display224px · 400
  • headline40px · 400
  • body12px · 400

展示型字体使用紧凑的负字距以增强视觉冲击力 · 正文保持充足的行高以确保可读性 · 字体粗细始终使用常规（400） · 大型样本详细展示字形构造

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

通过一致的 4 基准垂直节奏，并为大型字体排印样本提供充足内边距

05

表面 (圆角 / 阴影 / 边线)

sm · 3px
md · 16px
lg · 20px
pill · 36px

极简主义，依靠色彩对比而非边框进行视觉分隔

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

分屏主图布局，一侧为大型样本，另一侧为干净的内容块与充足留白

07

动效与交互

100msmicro
400mssmall
750msmedium
cubic-bezier(0.33, 0, 0.67, 1)easing

为交互状态提供平滑的背景色过渡 · 带有自定义 cubic-bezier 时间的不透明度渐入效果 · 用于揭示效果的变换动画

背景色过渡，持续时间 100 毫秒 · 变换与不透明度状态变化

08

组件

  • button 极简样式，带有背景色过渡和 cubic-bezier 缓动
  • card 干净的内容块，圆角设计，带有微妙过渡
  • chip 非主要设计元素
  • input 非主要设计元素
  • hero 全屏分屏布局，采用大胆的色块划分与超大字体排印样本

09

文案语气与禁用清单

  • 语气 自信、注重工艺、设计导向
  • 标题风格 简短有力，强调设计中的人性化特质
  • 按钮文案 极简，使用箭头指示而非传统按钮文本
  • 不要使用装饰性字体 — 截图全程展示了干净的人文主义无衬线体
  • 不要在文本上添加投影 — 截图显示的是实色背景上的扁平字体排印
  • 不要使用小号展示尺寸 — 截图显示的是 224px 及以上的超大样本
  • 不要添加粗重边框 — 截图使用色块代替线条分隔
  • 不要使用多种字体粗细 — 截图仅显示一致的 400 粗细
  • 不要用 UI 元素造成杂乱 — 截图优先呈现字体排印样本而非界面控件
  • 避免: 技术术语、过度解释或杂乱的布局

10

包内真实截图

About Instagram — 桌面首屏（hero）
桌面首屏（hero）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个以字体排印为核心的品牌展示，聚焦 Instagram 的定制字体，定位为优质设计资源。关键色彩包括：墨色 #1C1E21、活力洋红色强调 #D300C5、辅助紫色调 #9B8FFF，以及干净的背景色 #FFFFFF。字体属于人文主义无衬线类别，具有独特的斜切末端和特征。关键设计准则：在样本周围保持充足留白，为大号展示文本使用紧凑的负字距，字体粗细始终保持常规。不要添加与字体排印竞争的装饰元素。不要为此展示使用深色模式背景。不要将样本尺寸缩小到展示尺度以下。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。