---
name: Fableandmane
description: "A strong example of a premium, consumer-focused e-commerce design that balances expressive serif typography with functional sans-serif UI elements."
version: alpha

colors:
  background: "#FFF5EC"
  primary: "#000000"
  secondary: "#1A243D"
  tertiary: "#F9423A"
  neutral: "#A3A3A3"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-1.44px"
  headline:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.12px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "0.2px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

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

---

## Overview

A clean, premium e-commerce interface for artisanal fragrance products.

*A minimalist, high-end apothecary shelf*

## Colors

High-contrast monochrome text on warm off-white backgrounds with a single high-chroma red accent for primary actions.

- **Background (`#FFF5EC`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#1A243D`)** — uses `ink-soft` token
- **Accent (`#F9423A`)** — uses `accent` token
- **Muted (`#A3A3A3`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use transitional-serif for expressive, high-impact headlines.
- Use geometric-sans for all functional and body text.

## Layout

Centered, single-column layout for product focus with generous horizontal padding.

*Rhythm:* Consistent 4px base unit, with generous whitespace to maintain a premium, uncluttered feel.

## Elevation & Depth

- rgba(0, 0, 0, 0.25) 0px 4px 20px 0px
- rgba(0, 0, 0, 0.05) 0px -4px 10px 0px
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary button with high-chroma red background and white text; outlined secondary button with dark text.
- **card:** Clean product cards with subtle borders or soft shadows, rounded corners (24px).
- **chip:** N/A - Not prominently visible in the analyzed modal/hero state.
- **input:** N/A - Not prominently visible in the analyzed modal/hero state.
- **hero:** Split layout with large typography on one side and a product image on the other.

## Do's and Don'ts

**Don't:**
- Don't use neon or overly saturated colors — screenshot shows a warm, off-white background (#FFF5EC) with a single red accent.
- Don't use purely monospace or handwritten fonts — screenshot uses geometric sans and transitional serif categories.
- Don't use sharp, rectangular corners everywhere — screenshot shows large 24px border radius on components.
- Don't pack the UI with dense information — screenshot maintains generous spacing and a clean layout.
- Don't use a bright white (#FFFFFF) as the primary background — screenshot consistently uses a warm cream tone.
- Don't use thin, hard-to-read font weights for body text — screenshot uses a regular 400 weight for readability.

---

## System Prompt (paste into AI agent)

```
A premium, clean e-commerce design system for artisanal consumer products. The primary background is a warm cream (#FFF5EC) with high-contrast black (#000000) text and a single high-chroma red (#F9423A) accent for calls-to-action. Typography pairs a transitional-serif for expressive display headlines with a clean geometric-sans for body copy. Layouts are generous with whitespace, utilizing a 12-column grid and 24px gutters. Critical don'ts: avoid neon colors, sharp corners (use 24px radii), and cluttered interfaces. The overall aesthetic is refined, sophisticated, and product-focused.
```