큐레이션 · 오픈 · 무료

Fablepets

현대적이고 디자인 중심의 펫 기어를 위한 프리미엄 전자상거래 플랫폼입니다.

01

디자인 DNA

현대적인 인테리어에 자연스럽게 통합하는 데 중점을 둔 모던 홈 가구 브랜드입니다.

02

컬러

소프트 블루 액센트와 메인 텍스트를 위한 딥 네이비를 사용한 고대비 클린 베이스.

03

타이포그래피

transitional-serif · geometric-sans

• display64px · 500
• body16px · 400

프리미엄스럽고 에디토리얼한 느낌을 위해 디스플레이 및 헤드라인 텍스트에는 젤리카(세리프)를 사용합니다. · 가독성을 위해 본문 텍스트, 내비게이션, UI 요소에는 모데라트(산세리프)를 사용합니다.

04

여백

수직 리듬을 위한 일관된 스케일링을 포함하는 표준 4px 기본 그리드.

05

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

1px solid rgba(3,14,40,1.0)

0px 4px 8px rgba(0,0,0,0.04) · 0px 0px 2px rgba(0,0,0,0.06) · 0px 0px 1px rgba(0,0,0,0.04)

06

레이아웃

풀 와이드 히어로 섹션 뒤에 제품 레이아웃을 위한 12칼럼 그리드.

07

모션과 인터랙션

인터랙티브 요소의 호버 및 포커스 상태에서 부드러운 전환.

버튼과 링크의 미묘한 배경색 또는 불투명도 변화. · 표준 전환 타이밍을 사용한 즉각적인 시각적 피드백.

08

컴포넌트

• button 넉넉한 패딩과 둥근 모서리가 있는 솔리드 메인 버튼.
• card 부드러운 그림자, 깔끔한 타이포그래피, 돋보이는 사진이 있는 제품 카드.
• chip '베스트셀러' 태그를 위한 라임 그린 뱃지.
• input 얇은 테두리가 있는 깔끔한 입력 필드.
• hero 고품질 사진과 돋보이는 세리프 헤드라인이 있는 대형 분할 레이아웃 히어로.

09

보이스와 금지 목록

• 톤 반드시 재미있으면서도 프리미엄한, 펫 라이프의 즐거움과 디자인에 초점을 맞춥니다.
• 헤드라인 품질과 스타일을 전달하는 크고 우아한 세리프 글꼴.
• CTA 명확하고, 행동 지향적이며, 높은 대비로 눈에 띄게 배치.

• 대본문 텍스트에 올캡스를 사용하지 마세요 — 스크린샷에서는 헤드라인에 타이틀 케이스, 본문에 표준 케이스를 보여줍니다.
• 화려한 네온 색상을 사용하지 마세요 — 스크린샷에서는 블루, 그린, 네이비의 무드 있는 팔레트를 보여줍니다.
• 지나치게 복잡한 드롭 섀도우를 사용하지 마세요 — 스크린샷에서는 매우 미묘하고 부드러운 그림자를 보여줍니다.
• UI 요소에 넓고 블록 같은 테두리를 사용하지 마세요 — 스크린샷에서는 얇고 깔끔한 테두리나 테두리 없음을 보여줍니다.
• 모든 과정에 무겁고 두꺼운 타이포그래피를 사용하지 마세요 — 스크린샷에서는 세리프 헤더와 산세리프 본문 간의 명확한 계층을 보여줍니다.
• 혼란스러운 그리드 레이아웃을 사용하지 마세요 — 스크린샷에서는 구조화되고 깔끔한 12칼럼 정렬을 보여줍니다.
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 지저분한 레이아웃
• 피하기: 화려한 네온 팔레트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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