큐레이션 · 오픈 · 무료

It's Nice That

시각적 저널리즘과 큐레이션된 프로젝트를 통해 글로벌 창의성을 옹호하는 선도적인 온라인 간행물 및 커뮤니티입니다.

editorialdesign
It's Nice That 스크린샷
↓ 디자인 시스템 다운로드 (30 MB)OpenDesign 에서 열기

원본 사이트: https://www.itsnicethat.com

📦 팩 내용 보기 →

01

디자인 DNA

창의적 영감디자인 저널리즘커뮤니티큐레이션

활기찬 크리에이티브 디렉터의 무드보드가 매일의 디지털 간행물로 구현된 형태입니다.

02

컬러

#6219FFAccent
#2B2B2BInk
#676767Ink soft
#FFFFFFBG
#F4F4F4BG soft
#FFEDD1BG quiet
rgba(43,43,43,1.0)Line

고대비 흑백 기반에 생동감 있는 퍼플 액센트와 따뜻한 파스텔 섹션을 콘텐츠 큐레이션을 위해 사용합니다.

03

타이포그래피

transitional-serif · humanist-sans

대형 권위 있는 헤드라인과 전시 텍스트에는 트랜지셔널 세리프를 사용합니다. · 모든 본문 텍스트와 기능적 UI 요소에는 높은 가독성을 위해휴머니스트산스를 사용합니다. · 현대적인 에디토리얼 느낌을 위해 대형 전시 타입에는 타이트한 트래킹(-1px)을 유지합니다. · 편안한 읽기를 위해 본문 텍스트에는 넉넉한 행간(~1.5)을 사용합니다.

04

여백

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

일관된 수직 리듬과 컴포넌트 간격을 위해 8px 기준선 그리드를 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 8px
lg · 12px
pill · 999px

구조적 분리를 위해 다크 잉크 컬러(#2B2B2B)의 최소한의 솔리드 1px 테두리를 사용합니다.

0px 24px 38px 0px rgba(0, 0, 0, 0.08) · 0px 9px 46px 0px rgba(0, 0, 0, 0.08) · 0px 11px 15px 0px rgba(0, 0, 0, 0.08)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

깔끔한 상단 내비게이션, 수평 피드, 다양한 그리드 기반 콘텐츠 섹션을 갖춘 클래식 에디토리얼 매거진 레이아웃입니다.

07

모션과 인터랙션

100msmicro
300mssmall
2000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

배경 요소와 UI 상태에 대한 섬세한 불투명도 전환. · 인터랙티브 요소에 대한 빠른 배경색 및 컬러 변경.

링크와 버튼에 대한 0.1s ease-in의 섬세한 배경색 및 컬러 전환. · 빠른 배경색 업데이트를 통한 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

It's Nice That에서 영감을 받은 깔끔한 에디토리얼 웹사이트를 디자인하세요. 이를 창의적 커뮤니티를 위한 프리미엄 디지털 간행물로 포지셔닝하세요. 화이트(#FFFFFF)를 기반으로 라이트 그레이(#F4F4F4)와 따뜻한 피치(#FFEDD1) 배경을 사용하세요. 주요 잉크 컬러는 다크 그레이(#2B2B2B)이며, 유일한 고채도 액센트로 생동감 있는 퍼플(#6219FF)을 사용하세요. 헤드라인에는 트랜지셔널 세리프 폰트를, 본문에는휴머니스트산스를 사용하세요. 레이아웃은 매거진에서 영감을 받은 것으로, 다양한 이미지 종횡비와 수평 스크롤 피드를 허용해야 합니다. 중요 금지 사항: 다크 모드 기반을 절대 사용하지 말 것, 전시 텍스트에 기하학적 산스를 절대 사용하지 말 것, 배경에 날카롭고 포화된 색상을 절대 사용하지 말 것. 0.1초 전환으로 빠른 인터랙션을 유지하세요. 넉넉한 여백과 명확한 타이포그래피 계층에 중점을 두세요.

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

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

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

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