精選 · 開放 · 免費

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