큐레이션 · 오픈 · 무료

Leica

프리미엄 포토그래픽 하드웨어를 위한 레거시 중심의 시각적 쇼케이스.

01

디자인 DNA

하이엔드 광학 기기 박물관.

02

컬러

고대비 텍스트와 시그니처 브랜드 레드 앵커를 적용한 중립적 배경.

03

타이포그래피

humanist-sans

• display32px · 600
• body16px · 400
• caption12px · 400

모든 기본 인터페이스에 깔끔한 휴머니스트 산세리프를 사용합니다. · 긴 설명 텍스트의 가독성을 위해 넉넉한 행간을 유지합니다. · 작은 유틸리티 레이블에는 대문자를 절제하여 사용합니다.

04

여백

4px 단위의 명확한 수직 리듬을 기반으로 하며, 주요 콘텐츠 블록 사이에 넉넉한 여백(96px)을 둡니다.

05

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

다크 네utral 또는 라이트 그레이 톤의 미묘한 1px 또는 2px 테두리.

06

레이아웃

풀-width 히어로 이미지에서 멀티칼럼 카드 레이아웃으로 전환되는 반응형 12열 그리드.

07

모션과 인터랙션

hover 시 부드러운 색상 및 background-color 전환. · 기본 콘텐츠 섹션을 위한 우아한 fade-in.

정교한 감각을 유지하는 미묘한 색상 변화 또는 opacity 변화. · 기본 콘텐츠 카드의 직접적인 내비게이션 또는 확장.

08

컴포넌트

• button 필 모양(radius: 9999px)의 고대비 버튼으로, 종종 작은 브랜드 컬러 도트 인디케이터를 포함합니다.
• card 이미지를 강조한 카드로, 미묘하거나 보이지 않는 테두리를 사용하며 내부 패딩이 넉넉합니다.
• chip 하단 내비게이션에 텍스트 기반의 미니멀 링크.
• input 미묘한 테두리의 깔끔하고 최소한의 입력 필드.
• hero 전체 뷰포트의 몰입형 포토그래피에 오버레이된 타이포그래피와 두드러진 call-to-action.

09

보이스와 금지 목록

• 톤 권위 있고 정교하며, 포토그래피 기술에 깊이 집중합니다.
• 헤드라인 대담하고 명료하며 묘사적입니다. 종종 특정 제품 이름이나 예술적 테마를 강조합니다.
• CTA 직접적이며 행동 지향적입니다. 종종 시그니처 레드 도트를 시각적 앵커로 사용합니다.

• 화려한 그래디언트를 사용하지 마세요 — 스크린샷은 평면적이고 고대비의 중립 팔레트를 보여줍니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 거의 그림자를 보여주지 않으며, 깔끔한 가장자리를 선호합니다.
• 다크모드를 기본으로 사용하지 마세요 — 스크린샷은 주로 라이트(#F5F5F5/#FFFFFF) 테마를 보여줍니다.
• 장식적 서체를 사용하지 마세요 — 스크린샷은 일관된 기능적 휴머니스트 산세리프를 보여줍니다.
• 크고 다채로운 UI 요소를 사용하지 마세요 — 스크린샷은 레드만을 유일한 고채도 액센트로 보여줍니다.
• 복잡한 그리드를 사용하지 마세요 — 스크린샷은 고품질 사진 자산 사이에 넓은 여백을 보여줍니다.
• 피하기: 화려하거나 네온색
• 피하기: 장난스럽거나 지나치게 캐주얼한 언어
• 피하기: 이미지를 산만하게 하는 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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