---
name: Fablepets
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#030E28"
  secondary: "#515357"
  tertiary: "#B0C7FA"
  neutral: "#D9DAE0"
  bg-soft: "#F7F7F7"
  line: "rgba(3,14,40,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.16px"

rounded:
  sm: 2px
  md: 4px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#030E28`)** — uses `ink` token
- **Secondary text (`#515357`)** — uses `ink-soft` token
- **Accent (`#B0C7FA`)** — uses `accent` token
- **Muted (`#D9DAE0`)** — uses `muted` token
- **Borders (`rgba(3,14,40,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 12px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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