큐레이션 · 오픈 · 무료

Peak Design

거친 아웃도어 미학과 세련된 미니멀리스트 디자인을 결합한 시각적으로 주도적이고 제품 중심적인 브랜드입니다.

01

디자인 DNA

하이엔드 아웃도어 장비 카탈로그와 현대적인 디자인 포트폴리오의 만남입니다.

02

컬러

사진이 주요 색상 원천이며, UI는 다크와 라이트 그레이의 중립적이고 고대비의 프레임을 제공합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display40px · 700
• headline32px · 700
• body16px · 400

버튼 레이블과 내비게이션 링크에는 대문자 트래킹을 사용합니다. · 큰 디스플레이 헤드라인에는 타이트한 음수 letterSpacing를 사용합니다. · 잉크와 배경 요소 간에 높은 대비 비율을 유지합니다.

04

여백

일관된 4px 기본 그리드가 패딩과 간격에 사용되어 구조화된 레이아웃을 보장합니다.

05

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

미묘한 구분을 위해 낮은 불투명도의 기본 잉크 색상을 사용한 최소한의 1px solid 테두리입니다.

0px 0px 4px 0px rgba(0, 0, 0, 0.04)

06

레이아웃

중앙 정렬된 콘텐츠와 제품 목록을 위한 12컬럼 그리드가 포함된 풀블리드 사진 히어로입니다.

07

모션과 인터랙션

오버레이 및 모달을 위한 부드러운 불투명도 및 가시성 전환. · 호버 및 클릭 시 상호작용 요소를 위한 빠른 transform(스케일) 전환.

미묘한 불투명도 변화 또는 배경색 전환(0.2s cubic-bezier). · 즉각적인 transform 스케일(0.15s ease-out) 후 액션.

08

컴포넌트

• button 대문자 텍스트와 넉넉한 패딩(8px 16px 또는 12px 24px)을 사용한 고대비 단색 배경(화이트 또는 다크)입니다.
• card 제품 이미지가 주요 요소인 깔끔하고 테두리 없는 컨테이너로, 최소한의 타이포그래피로 보완됩니다.
• chip 카테고리 또는 태그에 사용되는 필 모양 요소(border-radius: 32px에서 9999px)입니다.
• input 1px solid 테두리와 border-radius 4px를 사용한 간단한 직사각형 필드입니다.
• hero 크고 중앙 정렬된 디스플레이 텍스트와 눈에 띄는 CTA 버튼이 포함된 풀블리드 고품질 사진 배경입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 프리미엄적인 톤입니다.
• 헤드라인 대담하고 대문자이며 고대비입니다.
• CTA 행동 지향적이고 대문자이며 매우 읽기 쉽습니다.

• 다색 그라디언트 배경을 사용하지 마세요 — 이 사이트는 깔끔한 단색(#FBFDFC) 또는 풀블리드 사진에 의존합니다.
• 장식용 세리프 폰트를 사용하지 마세요 — 타이포그래피는 엄격하게 기하학적이고 humanist-sans-serif입니다.
• 지나치게 둥글고 장난스러운 컴포넌트를 사용하지 마세요 — 버튼과 입력 필드는 미묘한 4px에서 8px border-radius를 사용합니다.
• CTA용 작고低대비 텍스트를 사용하지 마세요 — 헤드라인과 버튼은 대담하고 대문자이며 매우 읽기 쉽습니다.
• 복잡하고 다층적인 그림자를 사용하지 마세요 — 높이감은 단일하고 매우 미묘한 box-shadow로 처리됩니다.
• 복잡하고 산만한 레이아웃을 사용하지 마세요 — 모든 요소에는 넉넉한 공간(16px에서 24px 간격)이 확보되어 있습니다.
• 피하기: 밝고 인위적인 강조 색상의 과도한 사용.
• 피하기: 사진과 경쟁하는 복잡한 레이아웃.
• 피하기: 너무 장난스럽게 느껴지는 둥근 '버블' UI 요소.
• 피하기: impact이 부족한 작고 섬세한 타이포그래피.
• 피하기: 복잡한 그라디언트 또는 장식적인 배경 패턴.
• 피하기: 일관되지 않은 패딩 또는 간격.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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