精选 · 开放 · 免费

Nan

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

TypographyDesign ToolsStudioExpressiveBold Typography

Nan 网站截图

↓ 下载设计系统包 (29 MB)在 OpenDesign 中打开

原站: https://www.nan.xyz

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko