큐레이션 · 오픈 · 무료

MVRDV

전체 너비의 프로젝트 사진 위에 거대한 타이포그래피를 적용한, 이미지 중심의 대담한 건축 스튜디오 사이트.

architecturestudio
MVRDV 스크린샷
↓ 디자인 시스템 다운로드 (132 MB)OpenDesign 에서 열기

원본 사이트: https://www.mvrdv.nl

📦 팩 내용 보기 →

01

디자인 DNA

건축도시주의연구혁신적인사회적

대규모 구조 프로젝트와 대담한 디자인 컨셉을 전시하는 건축 스튜디오의 포트폴리오.

02

컬러

#000000Ink
#ffffffBG
rgba(0,0,0,0.2)Line

검정과 흰색의 단색 팔레트이며, 시각적 흥미를 위해 사진 콘텐츠에 전적으로 의존합니다.

03

타이포그래피

grotesque-sans

디스플레이 타입은 엄격히 대문자이며 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

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

전체 너비의 히어로 이미지와 깔끔한 흰색 콘텐츠 섹션이 교차합니다.

07

모션과 인터랙션

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

색상 및 transform 속성의 부드러운 전환. · 상호작용 시 빠른 opacity 페이드.

100-200ms의 짧은 시간 척도에서 색상 또는 transform 변경으로 즉시 반응합니다. · 미세한 transform 변동.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

이 사이트는 거대하고 대담한 타이포그래피와 전체 너비의 건축 사진이 특징인 프리미엄 건축 스튜디오 포트폴리오입니다. 팔레트는 엄격히 단색이며, 높은 대비를 만들기 위해 검정(#000000)과 흰색(#ffffff)만 사용합니다. 타이포그래피 카테고리는 grotesque-sans이며, 디스플레이 텍스트는 크고 kerning이 타이트한 대문자로 설정됩니다. 주요 제약 조건에는 모든 색상 강조 회피, 둥근 UI 형태 회피, 그리고 기본 레이아웃 구성 요소에 그림자를 절대 추가하지 않는 것이 포함됩니다. 레이아웃은 스케일과 비전을 전달하기 위해 사진 히어로 섹션과 깔끔한 흰색 콘텐츠 블록 사이의 엄격한 교차에 의존합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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