{
  "id": "fableandmane",
  "title": "Fableandmane",
  "url": "https://fableandmane.com",
  "tags": [
    "Premium",
    "Consumer",
    "Clean",
    "Product",
    "Refined"
  ],
  "colors": {
    "principle": "High-contrast monochrome text on warm off-white backgrounds with a single high-chroma red accent for primary actions.",
    "bg": "#FFF5EC",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#000000",
    "inkSoft": "#1A243D",
    "muted": "#A3A3A3",
    "mutedSoft": null,
    "accent": "#F9423A",
    "line": "rgba(0,0,0,0.1)"
  },
  "typography": {
    "rules": [
      "Use transitional-serif for expressive, high-impact headlines.",
      "Use geometric-sans for all functional and body text."
    ],
    "scaleUses": [
      "Hero headlines",
      "Section headings",
      "Body copy and UI text"
    ],
    "display": "transitional-serif",
    "body": "geometric-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 72,
        "lh": 1.0,
        "weight": 800,
        "ls": "-1.44px"
      },
      {
        "token": "headline",
        "size": 56,
        "lh": 1.0,
        "weight": 700,
        "ls": "-1.12px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.375,
        "weight": 400,
        "ls": "0.2px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Consistent 4px base unit, with generous whitespace to maintain a premium, uncluttered feel.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "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)",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 24,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Centered, single-column layout for product focus with generous horizontal padding.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Smooth fade-in transitions for modals and page elements.",
      "Subtle hover state transformations on interactive elements."
    ],
    "durations": {
      "micro": 220,
      "small": 400,
      "medium": 800
    },
    "easing": "cubic-bezier(0.46, 0.01, 0.32, 1)"
  },
  "identity": {
    "keywords": [
      "premium",
      "clean",
      "artisanal",
      "fragrance",
      "botanical"
    ],
    "analogy": "A minimalist, high-end apothecary shelf",
    "oneLiner": "A clean, premium e-commerce interface for artisanal fragrance products."
  },
  "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."
  },
  "interaction": {
    "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."
  },
  "voice": {
    "tone": "Refined, sophisticated, and approachable.",
    "headlineStyle": "Bold, expressive serif headlines with tight tracking.",
    "ctaStyle": "Direct, action-oriented verbs in pill-shaped buttons.",
    "avoid": [
      "Cluttered interfaces",
      "Overly playful or casual language",
      "Harsh, high-saturation color palettes"
    ]
  },
  "donts": [
    "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."
  ],
  "systemPrompt": "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."
}