큐레이션 · 오픈 · 무료

Zaha Hadid Architects

세계적으로 유명한 건축 스튜디오의 몰입감 있는 사진 기반 디지털 아카이브.

01

디자인 DNA

상호작용 가능한 파라메트릭 건축 구조물

02

컬러

풀블리드 건축 사진에 완전히 양보하는 고대비 단색 기반.

03

타이포그래피

geometric-sans · humanist-sans

• display48px · 300
• heading16px · 700
• body12px · 400

주요 레이블과 내비게이션 링크는 엄격히 대문자 사용 · 브랜드 식별자는 우아하고 공기감 있는 느낌을 유지하기 위해 가벼운 굵기(300) 사용

04

여백

엄격한 수직 리듬보다 이미지 구성을 기반으로 한 불규칙한 모듈 기반 레이아웃

05

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

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

4px 4px 8px 0px rgb(0, 0, 0) · 0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

레이아웃

전체 뷰포트 사진 배경 위에 배치된 자유형 오버레이 모듈

07

모션과 인터랙션

방향성 화살표 내비게이션이 있는 배경 이미지 캐러셀 · 스크롤 기반 추가 모듈의 수직 노출

모든 상호작용 요소에서 커서가 포인터로 변경되며, 텍스트 링크에는 미묘한 불투명도 변화 적용 · 모듈 확장 또는 배경 전환을 트리거

08

컴포넌트

• button 대문자 스타일과 선택적 얇은 하단 테두리가 있는 투명 텍스트 링크
• card 텍스트와 보조 이미지를 포함하는 반투명 어두운 오버레이
• input 미니멀한 'Go' 트리거 버튼이 있는 단순 텍스트 필드
• hero 떠 있고 겹치는 정보 모듈이 있는 전체 뷰포트 건축 사진

09

보이스와 금지 목록

• 톤 권위 있고 비전을 제시하며 제도적인
• 헤드라인 굵은, 대문자, 그리고 미니멀한
• CTA 절제된 대문자 텍스트 링크 또는 단순한 'Go' 버튼

• 밝은 강조색을 사용하지 마십시오 — 스크린샷은 흰색, 검은색, 회색의 엄격한 단색 팔레트를 보여줍니다
• 모든 텍스트를 중앙 정렬하지 마십시오 — 스크린샷은 주요 콘텐츠 모듈에서 왼쪽 정렬된 텍스트를 보여줍니다
• 굵은 글꼴을 사용하지 마십시오 — 스크린샷은 로고가 굵기 300, 본문이 400임을 보여줍니다
• 표준 격자 레이아웃을 사용하지 마십시오 — 스크린샷은 사진 위의 자유형, 겹치는 모듈형 레이아웃을 보여줍니다
• 단색 배경 색상을 사용하지 마십시오 — 스크린샷은 전체 배경이 사진 이미지임을 보여줍니다
• 콘텐츠 모듈에서 큰 패딩을 사용하지 마십시오 — 스크린샷은 6px 10px와 같은 좁은 패딩을 보여줍니다
• 피하기: 친근하거나 캐주얼한 언어
• 피하기: 지나치게 설명적이거나 긴 문장
• 피하기: 밝고 채도 높은 색상 강조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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