OpenDesign·你的设计资产库

网页参考

Typelist Upstatement

一个为创意排版打造的、干净且富有表现力的编辑展示。

TypographyReferenceCurationCleanExpressive
Typelist Upstatement 网站截图

01

设计气质 DNA

排版策展展示

一个经过策展的、富有表现力的展示字体库。

02

色彩

#15181EInk
#FFFFFFBG
#E5E5E5Muted
rgba(21,24,30,1.0)Line

鲜明、高对比度的单色基底,仅被充满活力的、扁平的几何点缀所打破。

03

字体

humanist-sans

  • display22px · 500
  • body16px · 400
  • caption12px · 400

标签和导航一致使用大写转换 · 慷慨地使用字间距以营造通透的编辑感 · 有节制地使用衬线字体以达到特定的风格强调

04

间距

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

开放且通透,严重依赖大量、刻意的留白来框定大胆的视觉元素。

05

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

sm · 4px
md · 8px
lg · 0px
pill · 999px

极少或不存在;分隔通过空间对比和扁平色彩实现。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

一种高度非对称、画廊式的布局,优先考虑视觉冲击力,而非密集的信息网格。

07

动效与交互

100msmicro
300mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

在交互元素上进行平滑、审慎的过渡 · 使用避免突兀移动的优雅缓动曲线

微妙的视觉状态变化,可能涉及色彩或轻微的空间位移。 · 直接的导航或状态改变,无侵略性的视觉反馈。

08

组件

  • button 极简、纯排版的链接,没有明确的边框或背景形状。
  • card 大胆、扁平的几何形状(如大圆圈)作为主要的交互单元。
  • hero 一个引人注目的极简构图,将广阔的留白与醒目的、扁平的几何色带相结合。

09

文案语气与禁用清单

  • 语气 自信、经过策展且专业,注重视觉冲击力。
  • 标题风格 大写、字间距紧密,且常常在几何上融入设计。
  • 按钮文案 含蓄且纯排版,依赖整体的视觉节奏。
  • 不要使用标准的通用 UI 组件,如按钮或卡片——截图显示的是扁平、自定义的几何形状和简单的排版链接。
  • 不要应用复杂的阴影或渐变——截图显示的是扁平的纯色区域和鲜明的留白。
  • 不要使用密集、杂乱的布局——截图显示的是广阔、刻意的留白框定着极简的内容。
  • 不要使用随意或过于俏皮的排版——截图显示的是高度结构化的大写、字间距处理和几何排列。
  • 不要使用深色模式或柔和、低对比度的调色板——截图显示的是纯白背景,搭配高对比度的黑色文本和充满活力的色彩。
  • 不要依赖传统的 UI 边框进行分隔——截图显示的是空间对比和扁平的色块作为主要的视觉分隔符。
  • 避免: 避免通用或过于装饰性的 UI 模式
  • 避免: 避免混乱的信息层级
  • 避免: 避免使用渐变或复杂的阴影
  • 避免: 避免非正式或过于俏皮的排版处理
  • 避免: 避免深色模式界面
  • 避免: 避免密集的传统网格布局

10

包内真实截图

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

11

System Prompt

本网站是一个极简、富有表现力的排版编辑展示,定位为一个经过策展的展示字体画廊。其设计基因依赖于纯白(#FFFFFF)和近黑(#15181E)的鲜明单色基底,仅被大胆、扁平的几何色彩点缀(如充满活力的紫色和黄色)所打破。主要排版类别为人文主义无衬线体,用于展示和正文文本,其特点是慷慨的字间距(2px)和一致的大写转换。关键的设计约束包括避免所有复杂的 UI 模式、拒绝深色模式或柔和的调色板,并保持广阔、刻意的留白,而非密集的网格布局。交互模型是微妙的,依赖于平滑的 0.3s 过渡(cubic-bezier(0.215, 0.61, 0.355, 1)),而非侵略性的反馈。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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