← OpenDesign
큐레이션 · 오픈 · 무료
MVRDV
전체 너비의 프로젝트 사진 위에 거대한 타이포그래피를 적용한, 이미지 중심의 대담한 건축 스튜디오 사이트.
architecture studio
01
디자인 DNA
건축 도시주의 연구 혁신적인 사회적
대규모 구조 프로젝트와 대담한 디자인 컨셉을 전시하는 건축 스튜디오의 포트폴리오.
02
컬러
#000000Ink
#ffffffBG
rgba(0,0,0,0.2)Line
검정과 흰색의 단색 팔레트이며, 시각적 흥미를 위해 사진 콘텐츠에 전적으로 의존합니다.
03
타이포그래피
grotesque-sans
display 172px · 400display-sm 60px · 400body 16px · 400디스플레이 타입은 엄격히 대문자이며 kerning이 타이트합니다. · 본문 텍스트는 일반 문장 대소문자 사용이며 보통 두께입니다. · 굵은 두께는 특정 강조를 위해 예약되어 있습니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
명확한 섹션 분리를 위한 넉넉한 수직 리듬과 큰 패딩 블록(상하 약 56px)을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
버튼과 구분선에 사용되는 1px 얇은 검정 테두리입니다.
rgba(0,0,0,0.4) 0px 0px 2px 0px · rgba(0,0,0,0.2) 0px 0px 5px 0px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
전체 너비의 히어로 이미지와 깔끔한 흰색 콘텐츠 섹션이 교차합니다.
07
모션과 인터랙션
100ms micro
200ms small
400ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
색상 및 transform 속성의 부드러운 전환. · 상호작용 시 빠른 opacity 페이드.
100-200ms의 짧은 시간 척도에서 색상 또는 transform 변경으로 즉시 반응합니다. · 미세한 transform 변동.
08
컴포넌트
button 간단한 화살표 아이콘만 포함하는 미니멀한 윤곽선 사각형 버튼. card 테두리나 패딩이 없는 대형 사진 히어로 블록. chip 오른쪽 가장자리의 세로형 탐색 점. hero 사진 위에 직접 겹쳐진 거대한 뷰포트 이미지와 두꺼운 sans-serif 타입.
09
보이스와 금지 목록
톤 권위 있고, 건축적이며, 비전을 제시하는 어조. 헤드라인 거대한 타입으로 설정된 대담하고 도발적인 문구. CTA 간단한 기하학적 화살표를 사용하는 절제된 표현. 여러 배경 색상을 사용하지 마세요 — 스크린샷은 엄격한 검정과 흰색 교차를 보여줍니다. 둥근 모서리를 사용하지 마세요 — 스크린샷은 사각형이고 날카로운 가장자리의 버튼을 보여줍니다. 대형 요소에 그림자를 사용하지 마세요 — 스크린샷은 테두리 기반의 플랫 UI를 보여줍니다. 세리프 타이포그래피를 사용하지 마세요 — 스크린샷은 오직 sans-serif 폰트만 보여줍니다. 장식적인 장식을 추가하지 마세요 — 스크린샷은 미니멀하고 기하학적인 요소를 보여줍니다. 복잡한 카드 레이아웃을 사용하지 마세요 — 스크린샷은 거대한 전체 너비 사진 블록을 보여줍니다. 피하기: 일상적이거나 친근한 언어를 피합니다. 피하기: 텍스트와 경쟁하는 복잡한 배경을 피합니다. 피하기: 둥근 UI 요소를 피합니다. 피하기: 밝은 강조 색상을 피합니다. 피하기: 장식적인 타이포그래피를 피합니다. 피하기: 복잡한 그라데이션을 피합니다.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이 사이트는 거대하고 대담한 타이포그래피와 전체 너비의 건축 사진이 특징인 프리미엄 건축 스튜디오 포트폴리오입니다. 팔레트는 엄격히 단색이며, 높은 대비를 만들기 위해 검정(#000000)과 흰색(#ffffff)만 사용합니다. 타이포그래피 카테고리는 grotesque-sans이며, 디스플레이 텍스트는 크고 kerning이 타이트한 대문자로 설정됩니다. 주요 제약 조건에는 모든 색상 강조 회피, 둥근 UI 형태 회피, 그리고 기본 레이아웃 구성 요소에 그림자를 절대 추가하지 않는 것이 포함됩니다. 레이아웃은 스케일과 비전을 전달하기 위해 사진 히어로 섹션과 깔끔한 흰색 콘텐츠 블록 사이의 엄격한 교차에 의존합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 '사진 위의 굵은 타이포그래피' 미학을 완벽히 구현하여 대규모 포트폴리오 디자인의 강력한 참고 자료가 됩니다.
浙ICP备2021038972号-5