CURATED · OPEN · FREE

Fablepets

A premium e-commerce platform for modern, design-forward pet gear.

ConsumerProductPhotographicCleanMobile UI

↓ Download design system (26 MB)Open in OpenDesign

Visit: https://fablepets.com

📦 Browse pack contents →

Identity DNA

Premium Pet GearModern HomeFunctional DesignCleanNatural

A modern home furnishing brand that focuses on integrating seamlessly into contemporary interiors.

Color

#B0C7FAAccent

#030E28Ink

#515357Ink soft

#FFFFFFBG

#F7F7F7BG soft

#D9DAE0Muted

rgba(3,14,40,1.0)Line

High-contrast clean base with soft blue accents and deep navy for primary text.

Typography

transitional-serif · geometric-sans

display64px · 500
body16px · 400

Use Gelica (serif) for display and headline text to provide a premium, editorial feel. · Use Moderat (sans-serif) for body text, navigation, and UI elements to ensure readability.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px base grid with consistent scaling for vertical rhythm.

Surfaces

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero sections followed by 12-column grid for product layouts.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover and focus states for interactive elements.

Subtle background color or opacity changes on buttons and links. · Immediate visual feedback with standard transition timing.

Components

button Solid primary button with generous padding and rounded corners.
card Product cards with soft shadows, clean typography, and prominent photography.
chip Lime green badges for 'Best Seller' tags.
input Clean input fields with light borders.
hero Large split-layout hero with high-quality photography and prominent serif headlines.

Voice & Don'ts

Tone Playful yet premium, focusing on the joy and design of pet life.
Headlines Large, elegant serif fonts that convey quality and style.
CTAs Clear, action-oriented, and prominently placed with high contrast.

Don't use all-caps for large body text — the screenshot shows title case for headlines and standard case for body text.
Don't use vibrant neon colors — the screenshot shows a muted palette of blue, green, and navy.
Don't use overly complex drop shadows — the screenshot shows very subtle, soft shadows.
Don't use wide, blocky borders for UI elements — the screenshot shows thin, clean borders or no borders.
Don't use heavy, thick typography for everything — the screenshot shows a clear hierarchy between serif headers and sans-serif body.
Don't use chaotic grid layouts — the screenshot shows a structured, clean 12-column alignment.
Avoid: Overly technical jargon
Avoid: Cluttered layouts
Avoid: Loud, neon color palettes

Inside the pack — real screenshots

Fablepets — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This site is a premium e-commerce platform for modern pet gear, positioning itself at the intersection of home decor and functional pet products. The design uses a clean white base with soft blue accents and a deep navy for primary text. Typography features a transitional serif for elegant headlines and a geometric sans-serif for body text. Critically, avoid using overly complex drop shadows, chaotic grid layouts, or vibrant neon colors, as the site prioritizes restraint, high-quality photography, and a structured, clean aesthetic.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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