---
version: "1.0"
name: "Kiwi Floral - Artisan Botanical"
description: "Kiwi Floral Artisan Botanical is a dark, glassy editorial system for an artisan florist. Key features include a Playfair Display serif voice, gradient-border glass surfaces, and quiet motion. It is suitable for editorial product pages, slow-commerce storefronts, and brand microsites."
colors:
  primary: "#EF4444"
  secondary: "#F6F5F2"
  tertiary: "#F6C148"
  neutral: "#151914"
  background: "#151914"
  surface: "rgba(0,0,0,0.4)"
  text-primary: "#F6F5F2"
  text-secondary: "rgba(246,245,242,0.7)"
  border: "rgba(255,255,255,0.12)"
  accent: "#F6C148"
typography:
  display-lg:
    fontFamily: "Playfair Display"
    fontSize: "88px"
    fontWeight: 400
    lineHeight: "88px"
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "Playfair Display"
    fontSize: "48px"
    fontWeight: 400
    lineHeight: "52px"
    letterSpacing: "-0.025em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "26px"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
    letterSpacing: "0.1em"
    textTransform: "uppercase"
rounded:
  md: "15px"
  lg: "24px"
  xl: "32px"
  full: "9999px"
spacing:
  base: "4.8px"
  sm: "1px"
  md: "4.8px"
  lg: "8px"
  xl: "12px"
  gap: "16px"
  card-padding: "32px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "rgba(255,255,255,0.04)"
    textColor: "#F6F5F2"
    rounded: "9999px"
    padding: "10px 20px"
  button-link:
    textColor: "#F6F5F2"
    rounded: "0px"
    padding: "0px"
  card:
    backgroundColor: "rgba(0,0,0,0.4)"
    rounded: "15px"
    padding: "32px"
---

## Overview

- **Composition cues:**
  - Layout: Editorial Grid
  - Content Width: Constrained
  - Framing: Glassy
  - Grid: Strong

## Colors

The color system uses a deep botanical dark mode with cream, red, and gold accents.

- **Primary (#EF4444):** Botanical red used sparingly for emphasis.
- **Secondary (#F6F5F2):** Cream paper carries the body language.
- **Tertiary (#F6C148):** Gold strike for highlight moments.
- **Neutral (#151914):** Deep botanical ink as the canvas.

- **Usage:** Background: #151914; Surface: rgba(0,0,0,0.4); Text Primary: #F6F5F2; Text Secondary: rgba(246,245,242,0.7); Border: rgba(255,255,255,0.12); Accent: #F6C148

- **Gradients:** linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02)), linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent), linear-gradient(to bottom, transparent, rgba(21,25,20,0.8))

## Typography

Typography pairs Playfair Display serif at editorial sizes with Inter 300 body and JetBrains Mono uppercase labels.

- **Display (`display-lg`):** Playfair Display, 88px, weight 400, line-height 88px, letter-spacing -0.025em.
- **Headline (`headline-lg`):** Playfair Display, 48px, weight 400, line-height 52px.
- **Body (`body-md`):** Inter, 16px, weight 300, line-height 26px.
- **Labels (`label-md`):** JetBrains Mono, 12px, weight 400, line-height 16px, letter-spacing 0.1em, uppercase.

## Layout

- **Layout type:** Editorial Grid
- **Content width:** Constrained, max-w-7xl
- **Base unit:** 4.8px
- **Scale:** 1px, 4.8px, 6px, 8px, 8.8px, 12px, 15px, 16px
- **Section padding:** 96px, 128px
- **Card padding:** 32px, 40px
- **Gaps:** 16px, 24px, 32px

## Elevation & Depth

- **Surface style:** Glass
- **Borders:** 1px rgba(255,255,255,0.1); 1px rgba(255,255,255,0.12)
- **Shadows:** inset 0 2px 4px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.35)
- **Blur:** 12px

### Techniques
- **Gradient border shell:** 1px outer wrapper at 16px radius, gradient background `linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02))`, inner surface `rgba(0,0,0,0.4)` with `backdrop-filter: blur(12px)` at 15px radius.

## Shapes

- **Corner radii:** 15px, 16px, 24px, 32px, 9999px
- **Icon treatment:** Linear duotone
- **Icon sets:** Solar

## Components

### Buttons
- **Primary:** transparent glass pill, text #F6F5F2, radius 9999px, padding 10px 20px, inset highlight shadow.
- **Links:** underline, text #F6F5F2, radius 0px.

### Cards and Surfaces
- **Card surface:** background rgba(0,0,0,0.4), border 1px solid rgba(255,255,255,0.1), radius 15px, padding 32px, blur 12px.

### Iconography
- **Treatment:** Linear duotone.
- **Sets:** Solar.

## Do's and Don'ts

### Do
- Do reserve red and gold for moments that earn emphasis.
- Do keep the Playfair voice for headlines only.
- Do reuse the gradient border shell for every elevated surface.

### Don't
- Don't pair the serif with another display face.
- Don't introduce flat opaque cards alongside the glass system.
- Don't exceed moderate motion intensity.

## Motion

Motion is slow, editorial, and restrained — fades and gentle rises.

**Motion Level:** moderate

**Durations:** 150ms, 1000ms

**Easings:** ease, cubic-bezier(0.4, 0, 0.2, 1)

**Hover Patterns:** text, color, stroke

**Scroll Patterns:** gsap-scrolltrigger, fade-rise