精選 · 開放 · 免費

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