精选 · 开放 · 免费
Fablepets
一个面向现代、注重设计的宠物用品的高端电商平台。
ConsumerProductPhotographicCleanMobile UI
01
设计气质 DNA
高端宠物用品现代家居功能设计简洁自然
一个现代家居品牌，专注于与当代室内设计无缝融合。
02
色彩
#B0C7FAAccent
#030E28Ink
#515357Ink soft
#FFFFFFBG
#F7F7F7BG soft
#D9DAE0Muted
rgba(3,14,40,1.0)Line
以高对比度的干净基底为基础，搭配柔和的蓝色点缀和深海军蓝作为主要文字颜色。
03
字体
transitional-serif · geometric-sans
- display
64px · 500 - body
16px · 400
使用 Gelica（衬线体）用于展示和标题文字，营造高端、编辑感的氛围。 · 使用 Moderat（无衬线体）用于正文、导航和界面元素，确保可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于标准的4px网格，垂直节奏保持一致的缩放比例。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 12px
pill · 9999px
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
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域，下方采用12栏网格进行产品布局。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素在悬停和聚焦状态下具有平滑的过渡效果。
按钮和链接在悬停时背景颜色或透明度发生微妙变化。 · 提供即时视觉反馈，过渡时间标准。
08
组件
- button 实色主按钮，拥有充足的内边距和圆角。
- card 产品卡片，带有柔和阴影、简洁排版和突出的摄影图片。
- chip 柠檬绿色的徽章，用于“畅销商品”标签。
- input 简洁的输入框，带有浅色边框。
- hero 大型分割布局主视觉，搭配高质量摄影和醒目的衬线体标题。
09
文案语气与禁用清单
- 语气 趣味而不失高级感，聚焦于宠物生活的乐趣与设计。
- 标题风格 大而优雅的衬线字体，传达品质与风格。
- 按钮文案 清晰、以行动为导向，位置突出且高对比度。
- 不要对大段正文使用全大写字母——截图显示标题采用首字母大写，正文采用标准大小写。
- 不要使用鲜艳的霓虹色——截图显示的是由蓝色、绿色和海军蓝构成的柔和色调。
- 不要使用过于复杂的投影——截图显示的是非常微妙、柔和的阴影。
- 不要为界面元素使用宽大的块状边框——截图显示的是纤细、干净的边框或无边框。
- 不要对所有内容使用厚重、粗壮的字体——截图显示了衬线体标题与无衬线体正文之间清晰的层次关系。
- 不要使用混乱的网格布局——截图显示的是结构化、整洁的12栏对齐。
- 避免: 过于技术性的术语
- 避免: 杂乱的布局
- 避免: 鲜艳的霓虹色配色
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向现代宠物用品的高端电商平台，定位在家装与功能性宠物产品的交叉点。设计采用干净的白色基底，搭配柔和的蓝色点缀和深海军蓝作为主要文字颜色。排版上，使用过渡衬线体作为优雅的标题字体，使用几何无衬线体作为正文字体。至关重要的是，避免使用过于复杂的投影、混乱的网格布局或鲜艳的霓虹色，因为该网站优先考虑克制、高质量的摄影以及结构化、整洁的美学。
en · zh-CN · zh-TW · ja · ko