큐레이션 · 오픈 · 무료

Whitney

대담한 타이포그래피 계층과 풍부한 여백을 균형 잡은, 현대 미술관을 위한 냉엄하고 고대비의 에디토리얼 인터페이스.

01

디자인 DNA

웹으로 옮겨진 날카롭고 건축적인 전시 카탈로그.

02

컬러

단일하고 공격적인 고크로마 악센트를 절제하여 주요 CTA에 사용하는 고대비 모노크롬 팔레트.

03

타이포그래피

geometric-sans · grotesque-sans

• display65px · 700
• headline35px · 400
• body16px · 400
• caption15px · 400

헤드라인은 자주 대문자 텍스트 변환을 사용합니다 · 본문은 깔끔하게 좌측 정렬된 고트로스크 폰트에 크게 의존합니다 · 행간은 디스플레이 크기에는 비교적 타이트하지만 본문에는 표준적입니다

04

여백

콘텐츠 블록 사이의 풍부한 수직 간격과 깔끔한 수평 간격은 질서 정연하고 깔끔한 격자를 유지합니다.

05

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

날카로운 1px 단색 검정 테두리가 내비게이션 요소와 주요 버튼을 정의하며, 강조를 위해 간혹 2px 변형을 사용합니다.

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

레이아웃

명확한 수평 규칙 구분선과 뚜렷한 콘텐츠 열을 가진 엄격하고 구조화된 격자 레이아웃.

07

모션과 인터랙션

매우 빠른 미세 지속 시간을 가진 인터랙티브 요소의 미묘한 불투명도 및 색상 트랜지션.

인터랙티브 요소의 미묘한 불투명도 변화 또는 배경색 전환. · 배경색 또는 불투명도 조정을 통한 즉각적인 시각적 반응.

08

컴포넌트

• button 버튼은 두 가지 주요 스타일로 냉엄하게 구분됩니다: 흰색 대문자 텍스트가 있는 단색 검정 블록과, 검정 테두리 및 검정 대문자 텍스트가 있는 흰색 블록.
• card 콘텐츠는 일관된 수평 구분선으로 분리된 깔끔하고 테두리 없는 이미지-및-텍스트 블록으로 제시됩니다.
• chip 얇은 검정 테두리와 대문자 텍스트가 있는 단순한 직사각형 라벨.
• input 날카로운 테두리와 단순한 스타일링이 있는 깔끔한 직사각형 필드.
• hero 한쪽에는 대형 타이포그래피 로고 처리가 있고 반대쪽에는 사진 또는 비디오 콘텐츠가 있는 대담한 분할 히어로 레이아웃.

09

보이스와 금지 목록

• 톤 권위 있고, 명확하며, 문화적으로 중요합니다.
• 헤드라인 대담하고, 종종 대문자이며, 매우 묘사적입니다. 전시 제목과 주요 행동에 중점을 둡니다.
• CTA 직접적이고, 대문자이며, 매우 눈에 띕니다. 냉엄한 색상 대비를 활용합니다.

• 부드러운 그림자를 사용하지 마세요 — 스크린샷은 대신 날카로운 테두리 또는 단일 깊은 상자 그림자를 보여줍니다
• 채도 낮은 파스텔 배경을 사용하지 마세요 — 스크린샷은 냉엄한 흰색 또는 순수 검정 배경을 보여줍니다
• 넓게 둥근 모서리를 사용하지 마세요 — 스크린샷은 주로 날카롭고, 0px 또는 2px 모서리를 보여줍니다
• 장식적 세리프 폰트를 사용하지 마세요 — 스크린샷은 기하학적 및 고트로스크 산세리프만 독점적으로 보여줍니다
• 그라디언트를 사용하지 마세요 — 스크린샷은 평면적이고 단색 블록을 보여줍니다
• 대문자 변환을 숨기지 마세요 — 스크린샷은 내비게이션 및 CTA에서 대문자 사용을 자주 보여줍니다
• 피하기: 장난스러운 언어
• 피하기: 과도한 형용사
• 피하기: 장식적 타이포그래피
• 피하기: 복잡한 문장 구조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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