큐레이션 · 오픈 · 무료

Tate

대담한 타이포그래피, 활기찬 히어로 섹션, 깔끔한 격자 기반 레이아웃을 특징으로 하는 Tate 갤러리를 위한 세련된 문화 웹사이트입니다.

01

디자인 DNA

대담한 에디토리얼 사진이 돋보이는 미니멀 갤러리 카탈로그.

02

컬러

높은 대비의 중립성(흑백회색)에 단 하나의 대담한 노란색을 적용하여 시선을 집중시키고, 사진이 주요 시각적 풍요를 제공하도록 설계합니다.

03

타이포그래피

geometric-sans · humanist-sans

• display46px · 400
• h222px · 400
• body17px · 400
• caption14px · 400
• nav14px · 400

섹션 제목은 계층 구조를 확립하기 위해 넓은 자간(대문자)을 사용합니다. · 본문은 가독성을 위해 편안한 17px 크기를 유지합니다. · 히어로 제목은 크지만 정상(400) 굵기를 유지합니다.

04

여백

콘텐츠 블록 간 16px/32px의 일관된 padding을 적용한 여유로운 수직 리듬입니다.

05

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

rgb(128, 128, 128) 0px 0px 5px 0px

06

레이아웃

중앙 정렬된 최대 너비 컨테이너를 가진 견고한 12단 격자 시스템입니다.

07

모션과 인터랙션

인터랙티브 요소를 위한 표준 hover 전환. · 모바일 메뉴 가시성을 위한 미세한 페이드 전환.

링크 및 버튼의 배경색 또는 색상의 미세한 변화. · 표준 버튼 프레스 피드백.

08

컴포넌트

• button 흰색 텍스트와 오른쪽 화살표가 포함된 단색 블록(검정 또는 틸)으로, 명확한 콜 투 액션을 강조합니다.
• card 이미지가 전면에 부각되며, 최소한의 배경 스타일링 또는 배경 없이 격자 항목 간의 여유로운 여백에 의존합니다.
• hero 한쪽 면에 활기찬 풀블리드 이미지, 반대쪽 면에 높은 대비 타이포그래피가 적용된 단색 블록(예: 노란색)을 배치한 분할 레이아웃 히어로입니다.

09

보이스와 금지 목록

• 톤 기관적이고 교육적이면서도, 환영하며 접근 가능한 어조.
• 헤드라인 대담하고 대문자이며 설명적. 주제 또는 장소에 초점을 맞춥니다.
• CTA 직관적이고 행동 지향적이며, 종종向前移動을 나타내는 '→' 화살표와 함께 사용됩니다.

• 입체감을 위해 드롭 섀도우를 사용하지 마세요 — 디자인은 계층 구조를 위해 단색 블록과 여백에 의존합니다.
• 서로 경쟁하는 여러 강조색을 사용하지 마세요 — 팔레트는 엄격히 흑백회색과 하나의 특정 노란색/틸로 제한됩니다.
• 세리프 서체를 사용하지 마세요 — 타이포그래피는 엄격히 산세리프이며, 현대적이고 깔끔한 미학을 강조합니다.
• 지나치게 둥근 모서리를 사용하지 마세요 — 버튼과 카드는 최소한이거나 날카로운 모서리를 사용합니다.
• 밀집된 텍스트 블록으로 레이아웃을 어지럽히지 마세요 — 여유로운 간격을 유지하고 이미지에 집중하세요.
• 굵은 글꼴 굵기를 사용하지 마세요 — 가장 큰 디스플레이 텍스트조차 정상(400) 굵기를 사용합니다.
• 피하기: 지나치게 캐주얼하거나 일상적인 언어.
• 피하기: 예술과 무관한 복잡한 전문 용어.
• 피하기: 과도한 느낌표 사용.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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