큐레이션 · 오픈 · 무료

Ganni

대담한 타이포그래피와 강렬한 사진을 특징으로 하는 프리미엄 패션 이커머스 플랫폼입니다.

01

디자인 DNA

대담하고 미니멀한 패션 에디토리얼

02

컬러

활기찬 사진이 시각적 에너지를 주도하도록 하는 중립적인 캔버스.

03

타이포그래피

grotesque-sans

• display26px · 500
• body16px · 400
• small14px · 400
• micro12px · 400

네비게이션과 카테고리 라벨은 일반적으로 대문자로 표시합니다. · 헤드라인은 혼합 대소문자 또는 좁은 간격의 대문자를 사용합니다. · 본문 텍스트는 일반적인 문장 대소문자 형식을 사용합니다.

04

여백

유연한 4px 기본 그리드를 통해 일관된 내부 컴포넌트 패딩과 레이아웃 간격을 제어합니다.

05

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

표준 인터랙티브 요소에 사용되는 실선 1px 테두리입니다.

rgba(0, 0, 0, 0.4) 0px 4px 8px 0px

06

레이아웃

풀블리드 사진부터 다중 컬럼 제품 레이아웃까지 적응하는 유동적인 그리드 시스템입니다.

07

모션과 인터랙션

표준 UI 상태 변경을 위한 매끄러운 0.15s ease-in 전환. · 큰 요소 움직임을 위한 0.8s cubic-bezier 전환.

상태 변경은 미세한 배경 또는 텍스트 색상 전환을 통해 나타냅니다. · 인터랙티브 요소에 대한 표준 포인터 상호작용입니다.

08

컴포넌트

• button 모서리가 둥글지 않은 고대비 솔리드 블록(일반적으로 흰색 텍스트가 포함된 검은색 배경)입니다.
• card 지배적인 이미지와 최소한의 텍스트 정보를 특징으로 하는 제품 전시용 깔끔하고 구조화된 레이아웃입니다.
• input 하단 테두리로 정의된 미니멀한 직사각형 필드입니다.
• hero 대형 타이포그래피와 두드러진 CTA가 결합된 풀블리드 사진 이미지입니다.

09

보이스와 금지 목록

• 톤 직설적이고 간결하며 자신감 있는 어조입니다.
• 헤드라인 짧고 강렬하며, 특정 대소문자 규칙으로 스타일링되는 경우가 많습니다.
• CTA 명확하고 긴박하며, 자주 대문자 텍스트를 활용합니다.

• 버튼에 부드럽고 둥근 모서리를 사용하지 마세요. 스크린샷은 날카롭고 직사각형 UI 요소를 보여줍니다.
• 단일 강한 악센트 색상에 의존하지 마세요. 스크린샷은 사진에 의해 주도되는 주로 단색 팔레트를 보여줍니다.
• 얇거나 서체 타이포그래피를 사용하지 마세요. 스크린샷은 대담하고 견고한 고딕 서체를 보여줍니다.
• 레이아웃을 과도한 테두리로 복잡하게 만들지 마세요. 스크린샷은 요소를 정의하는 깔끔하고 넉넉한 여백을 보여줍니다.
• 네비게이션에 저대비 텍스트를 사용하지 마세요. 스크린샷은 밝은 배경 위의 강렬한 검은색 텍스트를 보여줍니다.
• 표준 UI 요소에 장식적인 그림자를 사용하지 마세요. 스크린샷은 플랫하고 깔끔한 미학을 보여줍니다.
• 피하기: 지나치게 장식적인 서체
• 피하기: 보조 색상의 과도한 사용
• 피하기: 복잡한 UI 패턴

10

팩 안의 실제 스크린샷

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

11

System Prompt

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