대규모 사진이 뷰포트를 지배하도록 하여, 표준 UI 요소를 주변으로 밀어내는 전체 폭의 몰입형 그리드입니다.
07
모션과 인터랙션
150msmicro
250mssmall
350msmedium
cubic-bezier(0.32, 0, 0.67, 0)easing
모달과 오버레이 전환은 350ms 기간과 날카로운 cubic-bezier 이징 곡선을 사용합니다. · 버튼 인터랙션은 섬세한 피드백을 위해 빠른 150ms box-shadow 또는 색상 전환에 의존합니다. · 페이지 수준의 상태 변화는 0.25s ease-out 페이드 인/아웃으로 표시됩니다.
인터랙티브 요소에 섬세한 opacity 또는 box-shadow 전환. · 누를 때 즉시 시각적 상태 변화.
08
컴포넌트
button모서리가 날카로운 엄격한 직사각형 형태로, 고대비 채워진(검정) 또는 윤곽(검정 테두리가 있는 흰색) 변형으로 제공됩니다.
card일반적으로 단색 흰색 배경을 사용하는, 상품 이미지를 위한 깔끔하고 테두리 없는 컨테이너입니다.
input보이지 않는 테두리가 있고, 플레이스홀더 텍스트와 섬세한 밑줄로만 정의되는 미니멀리스트 텍스트 입력 필드입니다.
hero전체 뷰포트 너비에 걸쳐 펼쳐지는 풀블리드, 시네마틱 이미지 또는 비디오 히어로로, 최소한의 중앙 정렬 UI가 겹쳐져 있습니다.
09
보이스와 금지 목록
톤권위 있고, 엄숙하며, 미니멀리스트입니다.
헤드라인짧고 단언적이며, 대문자 산세리프로 설정됩니다.
CTA대문자 텍스트를 사용하여 직접적이고 명령형으로 작성됩니다.
UI 요소에 border-radius를 사용하지 마세요 — 스크린샷은 엄격히 직사각형인 버튼과 카드를 보여줍니다.
카드나 패널에 그림자(drop shadow)를 추가하지 마세요 — 스크린샷은 날카로운 테두리가 있는 평면적 표면을 보여줍니다.
UI 텍스트에 세리프 글꼴을 사용하지 마세요 — 스크린샷은 산세리프 타이포그래피의 일관된 사용을 보여줍니다.
본문 텍스트에 대문자를 사용하지 마세요 — 스크린샷은 대문자가 내비게이션과 헤더에만 엄격히 사용됨을 보여줍니다.
UI에 여러 색상을 사용하지 마세요 — 스크린샷은 검정, 흰색, 회색의 엄격한 팔레트를 보여줍니다.
버튼에 둥근 모서리를 추가하지 마세요 — 스크린샷은 0px 반경의 날카로운 버튼을 보여줍니다.
Balenciaga는 강렬하고 단색의 UI를 사용하여 풀블리드 시네마틱 사진이 사용자 경험을 지배하도록 하는 하이패션 전자상거래 플랫폼입니다. 디자인은 엄격한 검정, 흰색, 회색 팔레트(ink #000000, bg #FFFFFF, muted #767676)와 깔끔한 산세리프 타이포그래피 시스템에 의존합니다. UI 요소는 엄숙하며, 날카로운 직사각형 버튼과 최소한의 테두리를 특징으로 합니다. 중요 규칙: 1) border-radius를 완전히 0으로 유지하여 엄격히 직사각형인 UI를 유지합니다. 2) 모든 주요 내비게이션과 헤더를 대문자로 유지합니다. 3) 카드나 패널에 그림자를 절대 사용하지 않고 대신 깔끔한 테두리에 의존합니다. 4) 모달 전환에 날카로운 cubic-bezier(0.32, 0, 0.67, 0) 이징 곡선을 사용합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
