큐레이션 · 오픈 · 무료

Petfinn

장난스러운 이미지와 깔끔한 타이포그래피를 사용한 강아지 영양제 전문의 따뜻하고 접근하기 쉬운 DTC 브랜드입니다.

ConsumerCalmCleanProductMobile UI
Petfinn 스크린샷
↓ 디자인 시스템 다운로드 (37 MB)OpenDesign 에서 열기

원본 사이트: https://petfinn.com

📦 팩 내용 보기 →

01

디자인 DNA

반려동물 건강강아지 영양제친근한접근하기 쉬운신뢰할 수 있는

친근한 동네 애완동물 가게와 현대적인 건강 브랜드의 만남.

02

컬러

#FF7F00Accent
#161345Ink
#321004Ink soft
#FFFFFFBG
#F9F9F9BG soft
#F2E6ECBG quiet
#999999Muted
rgba(235,235,235,1)Line

부드러운 핑크 또는 흰색 배경에 고대비의 진한 파란색 잉크를 사용하며, CTA와 강조를 위해 활기찬 오렌지 악센트로 포인트를 줍니다.

03

타이포그래피

transitional-serif · geometric-sans

헤드라인은 간격을 좁힌 굵은 트랜지셔널 세리프를 사용합니다. · 본문 텍스트는 가독성을 위해 깔끔한 기하학적 산세리프를 사용합니다. · 텍스트는 문맥에 따라 주로 대문자 또는 문장 시작 대문자로 작성됩니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

섹션 간 넉넉한 간격을 두는 8px 기본 리듬을 사용합니다.

05

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

sm · 4px
md · 20px
lg · 32px
pill · 999px

1px 얇은 테두리를 절제하여 사용하며, 주로 아웃라인 버튼에 적용됩니다.

0px 0px 1px 0px rgba(0, 0, 0, 0.2)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

풀위드 히어로 섹션에서 중앙 정렬된 콘텐츠 그리드로 전환됩니다.

07

모션과 인터랙션

100msmicro
250mssmall
500msmedium
ease-in-outeasing

UI 상호작용을 위한 표준 투명도 및 변환 전환.

상호작용 요소에 대한 크기 또는 투명도 전환. · 미세한 축소 효과.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Petfinn — 桌面首屏（hero）
桌面首屏（hero）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Petfinn — 移动首屏
移动首屏

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

11

System Prompt

Finn은 강아지 영양제 전문 소비자 DTC 브랜드입니다. 디자인은 따뜻하고 접근하기 쉬우며 깔끔하며, 부드러운 핑크와 흰색 팔레트를 깊은 네이비와 활기찬 오렌지 악센트로 대조시킵니다. 타이포그래피는 디스플레이에 굵은 트랜지셔널 세리프, 본문에 깔끔한 기하학적 산세리프를 사용합니다. 핵심 제약 조건: 다크 모드 미학을 사용하지 마세요. 강렬한 네온 색상을 사용하지 마세요. 디스플레이 헤드라인에 순수 기하학적 산세리프를 사용하지 마세요. 고대비와 넉넉한 화이트 스페이스를 유지하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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