큐레이션 · 오픈 · 무료

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

드라마틱한 타이포그래피 계층을 위해 고대비 크기를 사용합니다. · 모노 폰트는 UI와 메타데이터에만 엄격히 사용합니다.

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

보이스와 금지 목록

톤 장난기 있고, 실�적이며, 자신감 있는.
헤드라인 극도로 크고, 트래킹이 타이트하며, 굵은.
CTA 직설적이며, 종종 밑줄이 그어지거나 테두리가 있음.

부드럽고 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 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) 텍스트를 특징으로 합니다. 타이포그래피는 히어로이며, 대형 디스플레이 헤드라인용 전환체 세리프와 UI용 기하학적 산세리프/모노를 사용합니다. 핵심 금지 사항: 부드럽거나 기업적인 시각을 사용하지 말고, 강조를 위해 작은 타입 크기를 피하며, 절대 표준 템플릿 뒤에 타이포그래피 성격을 숨기지 마세요. 이 시스템은 타입이 주요 시각적 도구인 표현적이고 비관습적인 레이아웃을 지원합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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