큐레이션 · 오픈 · 무료

New Museum

고전압 블록과 과장된 디스플레이 타이포그래피를 사용하는 대담한 현대 미술관 사이트.

museumart
New Museum 스크린샷
↓ 디자인 시스템 다운로드 (41 MB)OpenDesign 에서 열기

원본 사이트: https://www.newmuseum.org

📦 팩 내용 보기 →

01

디자인 DNA

아방가르드현대 미술문화 기관대담한파괴적인

제도적 실험을 위한 공격적인 라임 그린 캔버스.

02

컬러

#BEFF00Accent
#0A4B50Ink
#E5E7EBMuted
rgba(10, 75, 80, 1)Line

최대 시각적 긴장을 위해 고전압 애시드 그린과 깊은 틸을 조합했습니다.

03

타이포그래피

grotesque-sans · geometric-sans

디스플레이 폰트(Neographik)는 거대한 섹션 헤더와 로고에만 사용합니다. · 본문 폰트(Akkurat)는 내비게이션, 이벤트 세부 정보, 표준 텍스트에 사용합니다. · 디스플레이 텍스트에는 조밀하고 건축적인 느낌을 위해 좌우 자간을 좁게 유지합니다.

04

여백

4px
8px
12px
16px
24px
32px
40px
48px
96px
120px

대담한 색상이 숨쉴 수 있도록 거대한 타이포그래피와 이미지 블록 주변에 넉넉한 여백을 둡니다.

05

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

sm · 4px
md · 6px
lg · 9999px
pill · 9999px

테두리는 최소한으로 사용하며, 색상 블록은 단색 배경 전환으로 정의됩니다.

06

레이아웃

1440container
12columns
24pxgutter
768 / 1024breakpoints

이벤트 및 비디오 카드를 위한 4열 그리드 레이아웃을 포함하는 풀 너비 색상 블록입니다.

07

모션과 인터랙션

100msmicro
220mssmall
400msmedium
cubic-bezier(0, 0, 0.2, 1)easing

색상 및 배경 변경을 위한 부드러운 전환. · 인터랙티브 요소를 위한 섬세한 불투명도 페이드. · 이미지 표시를 위한 클립 패스 애니메이션.

내비게이션 링크의 색상 변화와 인터랙티브 요소의 미세한 불투명도 변화. · 부드러운 마이크로 인터랙션을 통한 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

대담하고 현대적인 문화 기관 웹사이트를 디자인하세요. 주요 배경으로 고전압 애시드 그린(#BEFF00)을, 주요 텍스트와 다크 섹션에는 깊은 틸(#0A4B50)을 사용하세요. 타이포그래피는 거대한 디스플레이 헤딩을 위해 좁은 자간의 두껍고 대문자 그루테스크-산스여야 하며, 본문 텍스트에는 깔끔한 기하학적 산스-산스와 조합합니다. 레이아웃은 풀블리드이고 그리드 기반이어야 하며, 고품질 사진이나 비디오 위에 과장된 텍스트 오버레이를 특징으로 해야 합니다. 중요: 절대 미세한 색상이나 전통적인 세리프를 사용하지 마세요. 둥근 컨테이너와 드롭 섀도우를 피하고, 텍스트가 크고 대담하며 거침없도록 보장하세요.

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

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

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

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