# Fableandmane · Design system migration spec

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

> A strong example of a premium, consumer-focused e-commerce design that balances expressive serif typography with functional sans-serif UI elements.

## 1. Identity DNA

The system is built around the analogy of a minimalist, high-end apothecary shelf. Every element is placed with intention, balancing artisanal warmth with the clean functionality of a premium storefront.

**One-liner:** A clean, premium e-commerce interface for artisanal fragrance products.
**Keywords:** premium · clean · artisanal · fragrance · botanical
**Analogy:** A minimalist, high-end apothecary shelf

## 2. Color

The palette is defined by a warm cream background (#FFF5EC) and high-contrast black text, creating a calm, readable canvas. A single, high-chroma red (#F9423A) serves as the accent, reserved exclusively for primary calls-to-action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF5EC` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#1A243D` | secondary text |
| `--muted` | `#A3A3A3` | placeholder |
| `--accent` | `#F9423A` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The core principle is restraint: a single chromatic voice punctuates the serene monochrome foundation.

## 3. Typography

Typographic hierarchy is built on a clear division of labor. A transitional serif handles expressive, high-impact headlines, while a geometric sans-serif provides clarity and function for all body text and interface elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 800 | -1.44px | Hero headlines |
| headline | 56px | 1.0 | 700 | -1.12px | Section headings |
| body | 16px | 1.375 | 400 | 0.2px | Body copy and UI text |

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

## 4. Spacing

The design rhythm is established on a consistent 4px base unit, scaled to maintain generous whitespace and an uncluttered, premium feel.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit, with generous whitespace to maintain a premium, uncluttered feel.

## 5. Surfaces

Surfaces are differentiated by subtle depth, not sharp division. Soft, directional shadows and fine, translucent borders create a gentle layering effect on the warm canvas.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is a centered, single-column composition designed for focused product presentation. It uses generous horizontal padding within a standard 12-column grid structure.

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

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

## 7. Motion & Interaction

Motion is functional and restrained, using smooth, consistent cubic-bezier transitions. The philosophy is to provide clear feedback for state changes without distracting from the products.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.46, 0.01, 0.32, 1)`
- **Patterns:**
  - Smooth fade-in transitions for modals and page elements.
  - Subtle hover state transformations on interactive elements.

- **Hover:** Subtle background color or opacity change on buttons and links.
- **Click:** Immediate visual feedback via transform or opacity change.
- **Transition:** All elements use a smooth 0.2s to 0.4s cubic-bezier transition for state changes.
- **Keyboard:** Standard browser focus outlines; interactive elements have cursor: pointer.

## 8. Voice & Don'ts

The voice is refined, sophisticated, and approachable. It employs bold, expressive serif headlines and direct, action-oriented CTAs, avoiding cluttered interfaces and overly casual language.

- **Tone:** Refined, sophisticated, and approachable.
- **Headline style:** Bold, expressive serif headlines with tight tracking.
- **CTA style:** Direct, action-oriented verbs in pill-shaped buttons.
- **Avoid:** Cluttered interfaces / Overly playful or casual language / Harsh, high-saturation color palettes

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

The system deliberately avoids neon colors, sharp corners, and dense information layouts to preserve its serene, product-focused atmosphere.

## System Prompt (paste into AI tool)

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