큐레이션 · 오픈 · 무료

The Broad

대담한 레드 악센트와 깔끔한 sans-serif 타이포그래피를 사용하여 예술 작품을 선보이는 고대비, 전시 중심의 박물관 사이트입니다.

01

디자인 DNA

대담한 그래픽 사인과 넉넉한 화이트 벽을 갖춘 깔끔한 기관 갤러리 공간.

02

컬러

중성적인 화이트/그레이 캔버스와 기본 브랜딩 및 액션을 위한 지배적이고 고채도의 레드를 사용하는 고대비 전시 디자인입니다.

03

타이포그래피

grotesque-sans

• display36px · 700
• body14px · 400

텍스트 transform uppercase는 내비게이션, 라벨 및 제목에 광범위하게 사용됩니다. · 타이포그래피는 깔끔하고 기관적인 느낌을 위해 sans-serif 카테고리 내에서 엄격히 유지됩니다. · 제목의 행간은 타이트하게, 본문의 행간은 표준적으로 유지하여 가독성을 보장합니다.

04

여백

일관된 4px 기본 그리드가 적용되며, 내비게이션 및 인터랙티브 요소에는 표준 padding이 사용됩니다.

05

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

rgba(0, 0, 0, 0.06) 0px 13px 20px 0px · rgba(0, 0, 0, 0.26) 0px 3px 16px 0px

06

레이아웃

대형 이미지와 단색 텍스트 블록을 갖춘 분할 히어로 레이아웃으로, 콘텐츠를 위한 다중 열 그리드로 전환됩니다.

07

모션과 인터랙션

hover 상태를 위한 표준 opacity 및 box-shadow 전환.

hover 시 box-shadow 또는 미세한 opacity 변화를 포함하는 미묘한 전환. · 복잡한 마이크로 상호작용 없이 직접적인 내비게이션 또는 상태 변경.

08

컴포넌트

• button 대문자 텍스트와 타이트한 padding을 갖춘 단색 기본 버튼과 윤곽선이 있는 보조 버튼.
• card 단순한 텍스트 캡션과 정렬된 상태 표시기(예: 'On View')를 갖춘 이미지 중심 카드.
• hero 전체 너비 사진 블록과 메시지를 담은 고대비 단색 패널을 특징으로 하는 대형 분할 패널 히어로.

09

보이스와 금지 목록

• 톤 접근성과 정보에 초점을 맞춘 초대적, 명확하고 기관적인 어조.
• 헤드라인 직설적, 대문자, 정보적이고, 계층 구조를 확립하기 위해 굵은 두께를 사용.
• CTA 행동 지향적이고 높은 가시성을 가지며, 단색 배경 또는 고대비 테두리를 사용.

• 장식용 세리프 글꼴을 사용하지 마세요 — 스크린샷은 엄격한 sans-serif 기관 스타일을 보여줍니다.
• 무채색 또는 파스텔 악센트 색상을 사용하지 마세요 — 스크린샷은 유일한 지배적 악센트인 생생하고 고채도의 레드(#D6001C)를 보여줍니다.
• 주요 컴포넌트에 둥근 모서리를 사용하지 마세요 — 스크린샷은 패널과 대형 버튼에 날카롭고 사각 가장자리를 보여줍니다.
• 두꺼운 오버레이로 예술 작품을 가리지 마세요 — 스크린샷은 깔끔하고 방해받지 않는 사진을 보여줍니다.
• 기본 내비게이션에 복잡한 다중 열 그리드를 사용하지 마세요 — 스크린샷은 명확한 단일 열 상단 내비게이션 바를 보여줍니다.
• 미묘한 색상 변화에 의존하여 상호작용하지 마세요 — 스크린샷은 고대비 버튼과 명확하게 구분된 섹션을 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어를 피합니다.
• 피하기: 장식용 세리프 글꼴을 피합니다.
• 피하기: 예술 작품에서 주의를 끄는 복잡한 그라데이션 또는 그림자를 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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