OpenDesign·你的设计资产库

网页参考

Newglyph

一个大胆、高对比度的字体铸造厂网站,将字体排印作为核心产品进行展示。

TypographyFoundry
Newglyph 网站截图

01

设计气质 DNA

字体排印字体铸造厂字体可变字体授权

一个专注于字体的极简主义艺术画廊,字体本身即是核心展品。

02

色彩

#5A00FAAccent
#FFFFFFInk
#8D8D8DInk soft
#161616BG
#C6C6C6Muted
rgba(255,255,255,1.0)Line

以深色中性画布为基底,搭配鲜艳、高饱和度的色块来框定字体排印。

03

字体

geometric-sans · humanist-sans · monospace

  • display100px · 700
  • heading24px · 500
  • body16px · 400
  • caption12px · 400

标题通常使用大写,并采用紧凑的字间距以增强冲击力。 · 正文使用高可读性的人文主义无衬线字体。 · 对于技术或代码类元素,使用等宽字体。

04

间距

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

采用一致的 4px 基础网格,用于内边距、间距和组件布局。

05

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

sm · 4px
md · 12px
lg · 12px
pill · 9999px

1px solid 用于细微分隔线,颜色常与文本颜色匹配。

0 4px 24px rgba(0,0,0,0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

主要部分采用全宽、边缘对齐的彩色区块,内部包含居中内容。

07

动效与交互

150msmicro
300mssmall
800msmedium
cubic-bezier(0.2, 0, 0, 1)easing

交互元素使用 transform 和 opacity 过渡效果。

交互元素在悬停时有细微的缩放或透明度变化。 · 通过 transform 实现即时视觉反馈。

08

组件

  • button 胶囊形按钮,白底黑字,配有向右箭头图标。
  • card 大尺寸、实色、圆角的色块,作为主要内容的容器。
  • chip 未突出使用。
  • input 未突出使用。
  • hero 一个巨大的、高对比度的排版陈述,置于鲜艳的背景色之上。

09

文案语气与禁用清单

  • 语气 自信、直接且专业。
  • 标题风格 大胆、陈述性,通常使用全大写以获得最大冲击力。
  • 按钮文案 行动导向,配有简洁图标,使用高对比度色彩。
  • 不要使用微妙、低对比度的配色方案——截图显示的是大胆、高饱和度的色块。
  • 不要将浅色背景作为默认——主画布是非常深的近黑色。
  • 不要为标题使用纤细、精致的字体——截图使用的是极其厚重、粗壮的字重。
  • 不要为主要容器使用方形或尖锐的角——截图显示的是一贯使用的圆角。
  • 不要使用复杂、多层次的阴影——截图显示的是最小化或微妙的阴影深度。
  • 不要为主要展示字体使用衬线字体——截图中的标题仅使用无衬线字体。
  • 避免: 可爱或异想天开的语言。
  • 避免: 未加解释的过度技术性术语。
  • 避免: 主视觉区域中的长篇段落。

10

包内真实截图

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

11

System Prompt

这是一个具有大胆、高对比度设计的字体铸造厂网站。定位:一个销售可变字体的现代、高端字体铸造厂。关键颜色:非常深的近黑色 (#161616) 画布、白色 (#FFFFFF) 文本,以及鲜艳的电光紫 (#5A00FA)、亮黄色 (#FFFF00) 和浅薄荷绿色块。字体类别:展示部分主要使用几何无衬线体,正文使用人文主义无衬线体。关键禁忌:1) 不要使用低对比度或柔和的配色方案;设计是刻意张扬的。2) 不要为主要网站框架使用浅色背景;它是深色的。3) 不要为标题使用纤细、精致的字体;它们必须极其厚重且具有冲击力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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