큐레이션 · 오픈 · 무료

Barbican

대담한 기관 브랜딩과 몰입감 있는 이벤트 이미지를 결합한 세계적 수준의 예술 센터 웹사이트입니다.

01

디자인 DNA

음악, 연극, 영화의 다양한 프로그램을 선보이는 명성 높은 대도시 예술 센터입니다.

02

컬러

강렬한 고해상도 사진을 강조하도록 설계된, 활기찬 시그니처 오렌지와 깊은 블랙을 기반으로 한 대담한 기관용 팔레트입니다.

03

타이포그래피

grotesque-sans

• display56px · 700
• h240px · 700
• body19px · 400
• caption14px · 700

헤드라인은 타이트한 자간의 무거운 굵기를 사용합니다. · 본문 텍스트는 평균보다 약간 큰 기본 크기로 높은 가독성을 유지합니다. · 구조용 태그에 대문자 사용은 절제합니다.

04

여백

콘텐츠는 넉넉한 수직 간격으로 흐르며, 대형 이미지에 숨 쉴 공간을 제공합니다.

05

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

1px solid rgba(26, 26, 26, 0.2)

rgba(0, 0, 0, 0.1) 0px 0px 10px 0px · rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset

06

레이아웃

드라마틱한 효과를 위해 그리드를 벗어나는 전체 블리드 이미지를 가진 강한 중앙 컬럼입니다.

07

모션과 인터랙션

버튼 및 hover 상태와 같은 대화형 요소에 적용되는 미묘한 트랜지션. · 콘텐츠 섹션이 뷰포트에 진입할 때의 부드러운 페이드 또는 슬라이드.

버튼과 링크의 불투명도 또는 배경색에 대한 미묘한 변화입니다. · 즉각적인 시각적 피드백으로, 종종 약간의 스케일 축소 또는 색상 변화를 동반합니다.

08

컴포넌트

• button 날카롭거나 약간 둥근 모서리가 있는 채워지거나 테두리가 있는 형태이며, 주요 액션에는 시그니처 오렌지를 사용합니다.
• card 최소한의 테두리를 두고 눈에 띄는 이미지를 특징으로 하는 콘텐츠 중심 카드로, 정의를 위해 시각적 콘텐츠에 의존합니다.
• chip '시네마'와 같은 카테고리를 나타내는 단색, 대문자 태그로, 고대비 색상(오렌지, 그린)을 사용합니다.
• input 테두리가 있거나 미묘한 하단 테두리가 있는, 최소한의 스타일링이 적용된 단순한 텍스트 필드입니다.
• hero 전체 너비 또는 거의 전체 너비의 몰입감 있는 이미지와 강렬한 오버레이 텍스트 및 주요 CTA를 가진 영역입니다.

09

보이스와 금지 목록

• 톤 권위 있고, 따뜻하며, 문화적으로 풍부합니다.
• 헤드라인 직접적이고 매력적이며, 종종 예술 콘텐츠를 묘사합니다.
• CTA 행동을 유도하고 명확하여 사용자를 특정 이벤트나 정보로 안내합니다.

• 무채색이나 파스텔 팔레트를 사용하지 마세요 — 스크린샷은 고대비, 활기찬 오렌지와 블랙 테마를 보여줍니다.
• 모든 요소에 무거운 drop shadow를 적용하지 마세요 — 스크린샷은 절제를 보여주며, 깊이를 위해 필요한 곳에만 미묘한 그림자를 사용합니다.
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 왼쪽 정렬된 텍스트 블록을 강하게 선호합니다.
• 장식용이나 스크립트 글꼴을 사용하지 마세요 — 스크린샷은 엄격하고 깔끔한 기관용 sans-serif 타이포그래피를 보여줍니다.
• 지나치게 둥근 UI 요소를 사용하지 마세요 — 스크린샷은 주로 직사각형 또는 약간 둥근 컴포넌트를 보여줍니다.
• 데스크톱에서 복잡한 mega-menu 뒤에 탐색을 숨기지 마세요 — 스크린샷은 드롭다운 표시기가 있는 명확한 주요 탐색 바를 보여줍니다.
• 피하기: 장소의 명성을 훼손할 수 있는 지나치게 캐주얼하거나 트렌디한 언어를 피합니다.
• 피하기: 복잡한 메시지를 피합니다. 이미지가 많은 부분을 전달하도록 합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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