큐레이션 · 오픈 · 무료

Baggu

기능적이고 장난스럽게 디자인된 일상적인 가방 및 액세서리를 위한 현대적인 이커머스 플랫폼.

01

디자인 DNA

밝게 빛나고 정돈된 소매점에 컬러풀하고 고품질 제품이 진열된 모습.

02

컬러

따뜻한 중립적 배경은 깨끗한 갤러리 같은 캔버스 역할을 하여, 컬러풀한 제품 사진이 시각적 계층을 지배하도록 합니다.

03

타이포그래피

grotesque-sans

• display40px · 700
• body16px · 400
• label14px · 700

내비게이션 링크, 카테고리 레이블, 주요 행동 유도 버튼에는 모두 대문자를 사용합니다. · .Compact하고 현대적인 느낌을 위해 타이트한 마이너스 자간을 유지합니다. · 강한 시각적 계층을 보장하기 위해 섹션 헤더에는 높은 굵기(700)를 우선시합니다.

04

여백

표준 8px 기본 격자에 주요 섹션 간 넉넉한 여백을 두어 제품이 숨쉴 수 있도록 합니다.

05

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

구조 요소에는 1px solid #000000; 버튼은 고체 배경과 함께 둥근(필-레이디우스) 스타일을 사용합니다.

0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

레이아웃

전체 폭 이미지 기반 히어로 섹션 뒤에 격자 기반 구조화된 제품 카탈로그가 이어집니다.

07

모션과 인터랙션

호버 상태에서의 부드러운 색상 및 변환 전환 · 장바구니 및 내비게이션 상태 변화를 위한 마이크로 인터랙션 · 제품 갤러리를 위한 매끄러운 이미지 캐러셀 전환

클릭 가능한 텍스트 요소와 버튼에서 미묘한 배경 또는 색상 전환. · 버튼 누를 때 즉각적인 시각적 피드백, 일반적으로 약간의 색상 변화 또는 축소.

08

컴포넌트

• button 고체 검정 배경(#000000)에 흰색(#FFFFFF) 대문자 텍스트, 매우 둥근(필-레이디우스), 최소한의 padding.
• card 중립적 배경에 고품질 제품 사진에 의존하는 깨끗하고 테두리 없는 레이아웃.
• chip 카테고리 내비게이션용 대문자 굵은 텍스트 링크, 넉넉한 간격, 눈에 띄는 배경이나 테두리 없음.
• input 검정 밑줄을 사용한 최소한의 하단 테두리 입력 필드, 부유하는 플레이스홀더 텍스트.
• hero 뷰포트 전체 너비에 걸친 풀블리드, 고채도 라이프스타일 사진.

09

보이스와 금지 목록

• 톤 직접적이고, 친근하며, 자신감 있게 솔직합니다.
• 헤드라인 짧고 강렬하며 매우 묘사적인, 흔히 대문자로.
• CTA 행동 지향적, 명령형 동사, 고대비 버튼 내 대문자 설정.

• 레이아웃 섹션에 컬러풀하거나 지저분한 배경을 사용하지 마세요 — 스크린샷은 일관된 중립 오프화이트(#F6F4EE) 캔버스를 보여줍니다.
• 헤더에 세리프나 스크립트 폰트를 사용하지 마세요 — 스크린샷은 굵은 기즈크-산스 스타일을 보여줍니다.
• 작고 섬세한 버튼을 사용하지 마세요 — 스크린샷은 고대비, 둥근 형태의 검정 버튼을 보여줍니다.
• 레이아웃을 조밀한 텍스트 블록으로 어지럽히지 마세요 — 스크린샷은 넉넉한 여백과 큰 이미지를 보여줍니다.
• 다크 모드 또는 짙은 차콜 배경을 사용하지 마세요 — 스크린샷은 주로 밝고 따뜻한 중립 배경을 보여줍니다.
• 제품을 미니멀한 사진 뒤에 숨기지 마세요 — 스크린샷은 주요 초점으로 생생하고 고채도 제품 샷을 보여줍니다.
• 피하기: 화려하거나 지나치게 기술적인 전문 용어
• 피하기: 과도한 형용사나 최상급 표현
• 피하기: 지나치게 격식 있거나 거리감 있는 기업 언어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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