큐레이션 · 오픈 · 무료

A-COLD-WALL*

인더스트리얼-브루탈리스트 럭셔리 패션 이커머스

01

디자인 DNA

산업적 건축과 하이패션의 만남

02

컬러

이미지 중심의 악센트를 강조하는 고대비 단색

03

타이포그래피

grotesque-sans

• display56px · 500
• display-sm26px · 500
• body12px · 500
• body-lg16px · 500

모든 텍스트 요소에 NeueHaasDisplay 사용 · 대부분의 요소에 기본 굵기 500 사용 · 네비게이션과 CTA에 대문자 변환을 적극 활용 · 작은 UI 텍스트에 타이트한 행간(1.16) 적용

04

여백

인더스트리얼 브루탈리스트 미학을 반영한 타이트한 간격의 일관성

05

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

0px solid transparent — 보이지 않는 테두리 최소화 사용

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

레이아웃

최소한의 UI 오버레이가 적용된 풀블리드 히어로 이미지

07

모션과 인터랙션

모든 상호작용 요소에 부드러운 전환 (0.2s ease-in-out) · 콘텐츠 로딩 시 페이드 인 투명도 효과 (1s) · 미세한 배경색 변화 (0.6s)

미세한 색상 반전 또는 투명도 변화 · 상태 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 배경이나 테두리 없이 텍스트만 있는 간단한 대문자 버튼, hover 상태만 적용
• card 풀블리드 이미지와 최소한의 텍스트 오버레이가 있는 상품 카드
• chip N/A — 이 디자인에서 칩은 주요 구성 요소가 아님
• input 하단 테두리만 적용된 미니멀한 텍스트 입력 필드
• hero 크고 좌측 정렬된 타이포그래피가 있는 풀뷰포트 시네마틱 사진

09

보이스와 금지 목록

• 톤 미니멀하고 직접적이며 권위 있는
• 헤드라인 짧고 강렬한 대문자 구절
• CTA 단순하고 명령적인 텍스트 (예: '바로 구매하기', '닫기')

• 카드나 버튼에 둥근 모서리 사용 금지 — 스크린샷에 날카롭고 각진 가장자리가 나타남
• 다색 팔레트 사용 금지 — 스크린샷에 엄격한 단색 흑백이 나타남
• 밝거나 가벼운 배경 사용 금지 — 스크린샷에 지배적인 검은색 배경이 나타남
• 장식적이거나 스트립트 글꼴 사용 금지 — 스크린샷에 엄격한 grotesque-sans 타이포그래피가 나타남
• 모든 텍스트를 중앙 정렬 금지 — 스크린샷에 네비게이션과 헤드라인에 강한 좌측 정렬이 나타남
• 복잡한 테두리나 구분선 사용 금지 — 스크린샷에 요소 간 깔끔하고 테두리 없는 구분이 나타남
• 피하기: 장식적 요소 회피
• 피하기: 복잡한 UI 패턴 회피
• 피하기: 과도한 텍스트 설명 회피
• 피하기: 화려하거나 장난스러운 색상 팔레트 회피
• 피하기: 화려한 타이포그래피 회피
• 피하기: 주요 컨테이너의 둥근 모서리 회피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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