# Fablepets · Design system migration spec

> Source: https://fablepets.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of modern, premium e-commerce design that balances playful brand elements with a sophisticated, home-goods aesthetic.

## 1. Identity DNA

Fablepets operates with the spatial logic of a modern home furnishing brand, treating pet gear not as accessory but as integral interior object. The design language bridges functional pet products and the clean, considered aesthetic of contemporary living spaces.

**One-liner:** A premium e-commerce platform for modern, design-forward pet gear.
**Keywords:** Premium Pet Gear · Modern Home · Functional Design · Clean · Natural
**Analogy:** A modern home furnishing brand that focuses on integrating seamlessly into contemporary interiors.

## 2. Color

The palette establishes a clean white base with deep navy for primary text, grounding the interface with authority. Soft periwinkle accents provide gentle punctuation, while lime green badges inject controlled, functional energy for labels like 'Best Seller'.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--ink` | `#030E28` | body text |
| `--ink-soft` | `#515357` | secondary text |
| `--muted` | `#D9DAE0` | placeholder |
| `--accent` | `#B0C7FA` | single accent |
| `--line` | `rgba(3,14,40,1.0)` | divider |

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

The color principle is one of restraint: a high-contrast, clean base that supports rather than competes with photographic content.

## 3. Typography

Typographic voice is split between two distinct roles: Gelica, a transitional serif, handles display and headline text to convey editorial premium. Moderat, a geometric sans-serif, takes on all body copy and UI elements, ensuring clarity and functional readability.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -1px | Hero headlines |
| body | 16px | 1.5 | 400 | 0.16px | General content |

**Type rules:**
- 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.

## 4. Spacing

Vertical rhythm is governed by a strict 4px base grid, creating consistent and predictable spacing increments across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with consistent scaling for vertical rhythm.

## 5. Surfaces

Surfaces rely on depth built through layered, subtle shadows—never harsh or complex—combined with precise, thin borders. This approach maintains the clean aesthetic while providing necessary visual hierarchy and component separation.

- **Radius:** sm 2px · md 4px · lg 12px · pill 9999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(3,14,40,1.0)

## 6. Layout

The layout skeleton begins with full-width hero sections designed for high-impact photography and prominent serif headlines. This transitions into a structured 12-column grid system that organizes product displays and content with mathematical clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is minimal and strictly functional, serving only to provide immediate feedback for user actions. All transitions utilize a consistent 0.15s cubic-bezier timing function, creating a cohesive and responsive feel without decorative flourish.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover and focus states for interactive elements.

- **Hover:** Subtle background color or opacity changes on buttons and links.
- **Click:** Immediate visual feedback with standard transition timing.
- **Transition:** All properties transition over 0.15s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

Editorial voice is playful yet premium, focusing on the joy and design of pet life. Headlines are large and elegant, CTAs are clear and high-contrast, and the tone avoids technical jargon in favor of accessible, stylish language.

- **Tone:** Playful yet premium, focusing on the joy and design of pet life.
- **Headline style:** Large, elegant serif fonts that convey quality and style.
- **CTA style:** Clear, action-oriented, and prominently placed with high contrast.
- **Avoid:** Overly technical jargon / Cluttered layouts / Loud, neon color palettes

### Don'ts
- ❌ 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.

The system deliberately excludes vibrant neon palettes, complex drop shadows, chaotic grids, and heavy typography, committing instead to photographic clarity and structural restraint.

## System Prompt (paste into AI tool)

```
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.
```
