큐레이션 · 오픈 · 무료

Loewe

대규모 사진과 미니멀한 크롬을 결합하여 제품 스토리텔링을 고조시키는 프리미엄 패션 하우스 사이트.

01

디자인 DNA

실재화된 하이패션 매거진 화보.

02

컬러

풍부한 사진 이미지가 지배할 수 있도록 깨끗한 흑백 기반을 두고, 단 하나의 강렬한 시안 포인트로 마무리합니다.

03

타이포그래피

geometric-sans

• display120px · 400
• heading22px · 400
• body14px · 400
• caption13px · 400

모든 주요 제목 및 UI 요소에 Avus를 사용합니다. · 단계 간 넉넉한 간격을 유지하여 엄격한 타이포그래피 계층을 지킵니다. · 일반 본문에서는 regular 또는 medium 웨이트를 유지하고, bold 웨이트는 사용하지 않습니다.

04

여백

4px 기반 그리드를 일관되게 적용하며, 콘텐츠 블록 주변에 호흡할 공간을 만들기 위해 종종 가로 24px의 넉넉한 패딩을 둡니다.

05

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

최소한으로 사용하며, 필요할 때 미세한 구분을 위해 1px solid 검정선을 적용합니다.

06

레이아웃

대형 이미지가 지배하는 풀블리드, 매거진 스타일 레이아웃으로, 넉넉한 여백과 고정 상단 내비게이션 바를 둡니다.

07

모션과 인터랙션

콘텐츠를 드러내기 위한 부드러운 opacity 트랜지션. · 내비게이션 메뉴 및 오버레이를 위한 미묘한 transform 애니메이션. · 콘텐츠 섹션 확장을 위한 Flex-basis 트랜지션.

사이트의 세련된 분위기를 유지하면서 미묘한 opacity 변화나 시각적 드러남을 구현합니다. · 부드러운 트랜지션과 상태 변화를 통해, 주로 더 많은 텍스트나 새로운 뷰를 드러냅니다.

08

컴포넌트

• button 최소한의 형태로, 주로 삼각형 아이콘(▸)이 있는 텍스트로 구성되며, 컨테이너보다는 타이포그래피와 여백에 의존합니다.
• card 콘텐츠는 하단에 깔끔한 타이포그래피가 결합된 크고 전체 폭의 이미지를 통해 전달되며, 넓은 카드 역할을 합니다.
• input 배경이나 눈에 띄는 컨테이너 없이 하단 테두리 하나만 있는 단순한 텍스트 필드입니다.
• hero 전체 뷰포트 크기의 포토그래피 히어로에 과감하고 볼드한 타이포그래피를 이미지 위에 직접 겹쳐 배치합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 세련되며, 약간은 시적인 어조.
• 헤드라인 직설적이고 선언적이며, 종종 선동적이며, 크고 깔끔한 타이포그래피를 사용합니다.
• CTA 미묘하고 통합적이며, 두드러진 버튼 대신 텍스트 링크 옆에 작은 삼각형 아이콘(▸)을 사용합니다.

• 드롭 섀도우를 사용하지 마세요 — 스크린샷은 플랫하고 깔끔한 레이아웃을 보여줍니다.
• 컨테이너에 둥근 모서리를 적용하지 마세요 — 스크린샷은 날카롭고 0px 반경의 가장자리를 보여줍니다.
• 본문 텍스트에 볼드 웨이트를 사용하지 마세요 — 스크린샷은 regular 웨이트 텍스트를 보여줍니다.
• 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색과 깔끔한 포토그래피를 보여줍니다.
• 주요 액션을 위해 넓고 채워진 버튼 스타일을 사용하지 마세요 — 스크린샷은 미니멀한 텍스트 링크를 보여줍니다.
• 텍스트의 여러 열로 레이아웃을 과도하게 채우지 마세요 — 스크린샷은 넉넉한 여백을 보여줍니다.
• 피하기: 불필요한 UI 요소나 장식 그래픽으로 인터페이스를 복잡하게 하지 마세요.
• 피하기: 무거운 드롭 섀도우나 복잡한 그라디언트를 사용하지 마세요.
• 피하기: 거슬리거나 급격한 애니메이션을 사용하지 마세요.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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