OpenDesign·你的设计资产库

网页参考

Nan

一个探索性且服务驱动的字体设计实践。

TypographyDesign ToolsStudioExpressiveBold Typography

封面待补录，可通过原站查看设计。

01

设计气质 DNA

探索性服务驱动字体设计奇异智慧奇妙

一个大胆、非传统的字体铸造厂网站。

02

色彩

#262626Ink
#B7FFB4BG
#9D968EMuted
rgba(38, 38, 38, 0.2)Line

采用高对比度的霓虹绿背景搭配深炭灰色文字，营造原始、实验性的美学风格。

03

字体

transitional-serif · geometric-sans · mono-linear

  • display162px · 500
  • body16px · 400
  • mono13px · 400

使用高对比度的字号构建戏剧性的字体层级。 · 等宽字体仅用于界面和元数据。

04

间距

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

8px 垂直节奏。

05

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

sm · 2px
md · 8px
lg · 18px
pill · 999px

1px solid #262626

0px -1px 10px 0px rgba(172, 171, 171, 0.3)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称、大胆的网格布局，包含大型字体区块与鲜明色域。

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

悬停状态采用平滑的透明度渐变。 · 交互元素应用微妙的变换效果。

透明度降低或色彩偏移。 · 即时视觉反馈。

08

组件

  • button 简约边框或纯色填充，通常尺寸较小且功能性强。
  • card 大型、色彩饱和的区块，叠加粗体排版。
  • chip 带边框的小型标签或标记。
  • input 采用锐利边框和特定等宽字体设计。
  • hero 最大化主义、超大字体排版主导视口。

09

文案语气与禁用清单

  • 语气 俏皮、实验性且充满自信。
  • 标题风格 超大字号、紧凑字距、粗体显示。
  • 按钮文案 直接明了，常带下划线或边框。
  • 避免使用柔和圆角——截图显示的是锐利的 2px 边框。
  • 避免使用柔和的浅色背景——截图显示的是鲜亮的 #B7FFB4 绿色。
  • 避免对所有内容使用标准无衬线字体——截图显示标题使用了独特的过渡衬线字体。
  • 避免隐藏排版——截图显示字体排印是主要的视觉元素。
  • 避免使用复杂投影——截图显示的是扁平、高对比度的表面。
  • 避免使用小字号进行强调——截图显示使用的是超大展示文本。
  • 避免: 过度企业化的语言
  • 避免: 复杂渐变
  • 避免: 标准企业布局

10

包内真实截图

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

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

11

System Prompt

NaN 是一个以排版为核心的大胆设计实践，具有原始、实验性的美学风格。核心配色以鲜亮霓虹绿（#B7FFB4）为背景，搭配深炭灰色（#262626）文字。字体排印是绝对主角，展示性大标题使用过渡衬线字体，界面则使用几何无衬线/等宽字体。关键禁忌：避免使用柔和或企业化的视觉风格，避免用小字号进行强调，绝不要将排版个性隐藏在标准模板之后。本系统支持以字体为主要视觉工具的富有表现力、非传统的布局。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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