---
name: Rosa Artisan Fleuriste
colors:
  surface: '#fcf9f8'
  surface-dim: '#dcd9d9'
  surface-bright: '#fcf9f8'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f2'
  surface-container: '#f0eded'
  surface-container-high: '#eae7e7'
  surface-container-highest: '#e4e2e1'
  on-surface: '#1b1c1c'
  on-surface-variant: '#444841'
  inverse-surface: '#303030'
  inverse-on-surface: '#f3f0f0'
  outline: '#747871'
  outline-variant: '#c4c8bf'
  surface-tint: '#53624f'
  primary: '#53624f'
  on-primary: '#ffffff'
  primary-container: '#8a9a84'
  on-primary-container: '#243221'
  inverse-primary: '#bbcbb3'
  secondary: '#7c5450'
  on-secondary: '#ffffff'
  secondary-container: '#ffcbc6'
  on-secondary-container: '#7b534f'
  tertiary: '#625e55'
  on-tertiary: '#ffffff'
  tertiary-container: '#9a958a'
  on-tertiary-container: '#302e26'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d7e7cf'
  primary-fixed-dim: '#bbcbb3'
  on-primary-fixed: '#121f10'
  on-primary-fixed-variant: '#3c4b38'
  secondary-fixed: '#ffdad6'
  secondary-fixed-dim: '#eebab5'
  on-secondary-fixed: '#2f1311'
  on-secondary-fixed-variant: '#623d3a'
  tertiary-fixed: '#e8e2d6'
  tertiary-fixed-dim: '#cbc6ba'
  on-tertiary-fixed: '#1e1c14'
  on-tertiary-fixed-variant: '#4a473e'
  background: '#fcf9f8'
  on-background: '#1b1c1c'
  surface-variant: '#e4e2e1'
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: '400'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Playfair Display
    fontSize: 36px
    fontWeight: '400'
    lineHeight: '1.2'
  headline-md:
    fontFamily: Playfair Display
    fontSize: 32px
    fontWeight: '400'
    lineHeight: '1.3'
  headline-sm:
    fontFamily: Playfair Display
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Montserrat
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-md:
    fontFamily: Montserrat
    fontSize: 14px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: 0.05em
  caption:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: '400'
    lineHeight: '1.4'
    letterSpacing: 0.02em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1200px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 64px
  section-gap: 120px
---

## Brand & Style
The brand identity centers on the intersection of craftsmanship and nature. This design system evokes an emotional response of tranquility and quiet luxury, mirroring the experience of walking into a high-end atelier in Rennes. The visual direction is **Minimalist and Organic**, prioritizing the photographic beauty of floral arrangements over heavy UI decoration.

The style is characterized by "breathable" layouts that use generous negative space to signal premium positioning. It avoids the coldness of corporate minimalism by introducing soft, earthy textures and a poetic typographic rhythm, ensuring the digital experience feels as tactile and authentic as a hand-tied bouquet.

## Colors
The palette is rooted in the natural world, utilizing "nude" and botanical tones to create a soothing, sophisticated backdrop.

*   **Sage Green (#8A9A84):** Used for primary actions, subtle accents, and representing stems and foliage.
*   **Dusty Rose (#D4A39E):** Reserved for delicate highlights, secondary calls to action, and seasonal promotions.
*   **Sand/Beige (#E8E2D6):** Used for container backgrounds and subtle section dividers to soften the interface.
*   **Deep Charcoal (#2C2C2C):** Applied to all primary typography and iconography to ensure WCAG AA accessibility and a grounded, professional feel.
*   **Paper White (#F9F7F2):** The primary background color, providing a warmer, more organic feel than pure digital white.

## Typography
The typographic hierarchy relies on the contrast between a romantic, high-contrast Serif and a functional, geometric Sans-Serif.

**Headings (Playfair Display):** Should be used for editorial moments, product names, and section titles. Italics are encouraged for poetic emphasis in sub-headers.
**Body (Montserrat):** Set with increased line height to improve readability and maintain the airy feel of the brand. 
**Labels:** Always in Sans-Serif, often using uppercase with slight letter spacing to denote categories or small UI metadata.

## Layout & Spacing
This design system employs a **Fixed Grid** on desktop (12 columns) and a **Fluid Grid** on mobile (4 columns). 

The "Poetic Layout" philosophy allows for asymmetrical placements of images to mimic the organic arrangement of flowers. Large section gaps (120px+) are intentional to separate "stories" or collections. Content should never feel cramped; if in doubt, increase the padding. Margin logic follows an 8px base unit, but component internal padding should favor larger values to maintain the premium feel.

## Elevation & Depth
Depth is created through **Tonal Layers** rather than heavy shadows. The aesthetic is flat but dimensional.

*   **Surface Hierarchy:** Use the Sand/Beige (#E8E2D6) tone to pull elements forward against the Paper White background.
*   **Shadows:** When necessary for functional depth (e.g., hovering over a product card), use an "Ambient Whisper" shadow: `0 8px 24px rgba(44, 44, 44, 0.04)`. It should be barely perceptible.
*   **Outlines:** Use fine, 1px borders in a slightly darker sand tone to define input fields and buttons without adding visual weight.

## Shapes
The shape language is "Soft-Modern." Sharp corners are avoided to remain approachable, but high roundedness is avoided to maintain a professional, high-end "artisan" look.

*   **Cards and Containers:** Use 4px (Soft) radius for a tailored appearance.
*   **Images:** May use larger, asymmetrical rounding (e.g., top-left and top-right only) to create an editorial, arched look reminiscent of garden gates or windows.
*   **Buttons:** Standardized with a 4px radius; pill shapes are reserved exclusively for "Status" tags or "Sale" chips.

## Components
*   **Buttons:** Primary buttons are solid Sage Green with white or charcoal text. Secondary buttons use a fine-line Charcoal border with no fill. All buttons feature a subtle color shift on hover rather than an elevation change.
*   **Input Fields:** Minimalist design with only a bottom border or a very light-toned Sand background. Focus states are indicated by a Sage Green bottom border.
*   **Cards:** Product cards are borderless with generous internal padding. The image is the hero, followed by a Playfair Display title and a Montserrat price.
*   **Iconography:** 1.5px stroke weight, "Fine-Line" style. Icons should be Charcoal and never filled.
*   **Floral Accent:** A custom "Hand-sketched" divider component or a subtle "Petal" loading state adds a final poetic touch.