CURATED · OPEN · FREE

Fableandmane

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

PremiumConsumerCleanProductRefined

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://fableandmane.com

📦 Browse pack contents →

Identity DNA

premiumcleanartisanalfragrancebotanical

A minimalist, high-end apothecary shelf

Color

#F9423AAccent

#000000Ink

#1A243DInk soft

#FFF5ECBG

#A3A3A3Muted

rgba(0,0,0,0.1)Line

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

Typography

transitional-serif · geometric-sans

display72px · 800
headline56px · 700
body16px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 999px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.25) 0px 4px 20px 0px · rgba(0, 0, 0, 0.05) 0px -4px 10px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.46, 0.01, 0.32, 1)easing

Smooth fade-in transitions for modals and page elements. · Subtle hover state transformations on interactive elements.

Subtle background color or opacity change on buttons and links. · Immediate visual feedback via transform or opacity change.

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.

Voice & Don'ts

Tone Refined, sophisticated, and approachable.
Headlines Bold, expressive serif headlines with tight tracking.
CTAs Direct, action-oriented verbs in pill-shaped buttons.

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.
Avoid: Cluttered interfaces
Avoid: Overly playful or casual language
Avoid: Harsh, high-saturation color palettes

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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