큐레이션 · 오픈 · 무료

Cooper Hewitt

군�은 타이포그래피와 몰입감 있는 이미지를 활용해 전시와 프로그램을 소개하는 대담하고 제도적인 디자인 박물관 사이트.

01

디자인 DNA

대담한 타이포그래피와 몰입감 있는 사진을 통해 디자인 우수성을 선보이는 문화적 거점으로서의 권위 있는 디자인 박물관.

02

컬러

시그니처 강조색 오렌지가 포인트인 고대비 제도적 팔레트.

03

타이포그래피

grotesque-sans

• display40px · 500
• body18px · 400

모든 주요 텍스트는 대문자입니다. · 헤드라인에는 타이트한 행간이 적용됩니다.

04

여백

엄격한 격자 시스템 내에서 여유로운 padding과 margin을 적용합니다.

05

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

1px solid rgba(255,255,255,0.5)

rgb(255, 255, 255) 5px 0px 0px 0px · rgb(255, 255, 255) -5px 0px 0px 0px

06

레이아웃

전폭 사진 히어로 섹션 뒤에 다중 열 격자가 배치됩니다.

07

모션과 인터랙션

hover 시 색상 및 border-color 전환. · 단순한 캐러셀 슬라이딩 애니메이션.

텍스트 링크와 border의 색상 전환. · 인터랙티브 요소에 대한 표준 포인터 커서.

08

컴포넌트

• button 대담한 대문자 텍스트 링크, 일부는 색상 배경(퍼플, 블루) 위의 흰색 텍스트.
• card 흰색 배경의 큰 텍스트 라벨이 포함된 전폭 사진 블록.
• chip 작은 원형 캐러셀 인디케이터(오렌지/그레이).
• input 텍스트와 아이콘이 포함된 미니멀 검색 바.
• hero 흰색 배경의 대형 대문자 헤드라인 오버레이가 적용된 전폭 시네마틱 이미지.

09

보이스와 금지 목록

• 톤 제도적이며 권위적이면서도 접근 가능하고 매력적인 어조.
• 헤드라인 대담하고 대문자이며 sans-serif로, 주로 사진 배경 위에 배치됨.
• CTA 직설적이고 행동 지향적이며, 강조를 위해 자주 오렌지를 사용.

• 주요 내비게이션에 소문자를 사용하지 마세요 — 스크린샷은 메뉴 항목에 대문자 굵은 텍스트를 사용하고 있습니다.
• 복잡한 그라데이션 배경을 사용하지 마세요 — 스크린샷은 헤더에 단색 검정 배경을 사용하고 있습니다.
• 풍부한 이미지 없이 넓고 개방된 레이아웃을 사용하지 마세요 — 스크린샷은 전폭 사진 히어로와 타이트한 격자를 보여줍니다.
• 얇고 섬세한 타이포그래피를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 굵고 대담한 grotesque-sans 폰트를 사용하고 있습니다.
• 흰색 배경 텍스트 오버레이를 피하지 마세요 — 스크린샷은 흰색 직사각형 위의 바쁜 사진 위에 직접 헤드라인을 배치하고 있습니다.
• 채도가 낮고 단일 모노크롬 팔레트를 사용하지 마세요 — 스크린샷은 강조색 오렌지가 포함된 고대비 흑백 색상을 보여줍니다.
• 피하기: 필기체 폰트
• 피하기: 채도가 낮거나 파스텔 팔레트
• 피하기: 저대비 텍스트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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