精选 · 开放 · 免费

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

display80px · 400
heading30px · 400
body18px · 400

标题使用粗体的过渡衬线字体，字间距紧凑。 · 正文使用简洁的几何无衬线字体以保证可读性。 · 文本根据语境主要采用大写或句首字母大写。

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

组件

button 深蓝色底、白色文字的胶囊形主按钮；深蓝色文字的描边幽灵按钮。
card 产品卡片，具有大尺寸意象和少量文字，并采用圆角设计。
hero 大型分栏式首屏，纯色背景上搭配粗体排版，并与生活方式摄影图片结合。

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品牌。其设计温暖、亲切且简洁，采用柔和的粉色和白色配色方案，与深海军蓝和充满活力的橙色强调色形成对比。排版上，展示文本使用粗体过渡衬线字体，正文使用简洁的几何无衬线字体。关键约束：不要使用暗色模式美学。不要使用刺眼的霓虹色。不要使用纯粹的几何无衬线字体作为展示标题。保持高对比度和充足的留白。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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