get-shit-pretty 0.7.0 → 0.7.3

package/gsp/skills/gsp-style/styles/botanical.md

@@ -1,177 +1,141 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
-
-Before proposing or writing any code, first build a clear mental model of the current system:
-
-- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
-- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
-- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
-- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
-
-Ask the user focused questions to understand the user's goals. Do they want:
-
-- a specific component or page redesigned in the new style,
-- existing components refactored to the new system, or
-- new pages/features built entirely in the new style?
-
-Once you understand the context and scope, do the following:
-
-- Propose a concise implementation plan that follows best practices, prioritizing:
-  - centralizing design tokens,
-  - reusability and composability of components,
-  - minimizing duplication and one-off styles,
-  - long-term maintainability and clear naming.
-- When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).
-- Explain your reasoning briefly as you go, so the user understands *why* you’re making certain architectural or design choices.
-
-Always aim to:
-
-- Preserve or improve accessibility.
-- Maintain visual consistency with the provided design system.
-- Leave the codebase in a cleaner, more coherent state than you found it.
-- Ensure layouts are responsive and usable across devices.
-- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.
-
-</role>
-
-<design-system>
-# Design Style: Botanical / Organic Serif
-
-## 1. Design Philosophy
-
-This style is a **digital ode to nature**—it breathes, flows, and grounds itself in organic beauty. It is **soft, sophisticated, and deeply intentional**, rejecting the rigid, hyper-digital sharpness of modern tech aesthetics in favor of **warmth, tactility, and natural imperfection**.
-
-### Core Essence
-
-The Botanical Organic style embodies the calming presence of a botanical garden, the earthy warmth of a ceramics studio, and the refined elegance of editorial design. It whispers rather than shouts. Every element feels **hand-touched, sun-warmed, and naturally crafted**.
-
-### Fundamental Principles
-
-* **Vibe**: Peaceful, curated, artisanal, high-end wellness, sustainable luxury, botanical elegance
-* **Visual DNA**:
-  * **Organic Softness**: Hard angles are purposefully rare. Every corner is rounded, every shape flows like water-smoothed stones or unfurling leaves. The 200px arch radius on images creates iconic architectural moments.
-  * **Typographic Elegance**: Typography is the protagonist—Playfair Display's high-contrast strokes command attention while maintaining grace. Italics add a handwritten, personal touch. Headlines breathe with generous scale (text-5xl to text-8xl).
-  * **Earthbound Palette**: Every color derives from nature—forest floors, clay pottery, sage gardens, terracotta tiles. No artificial brights. Muted, sophisticated, grounded.
-  * **Tactile Texture**: The subtle paper grain overlay is non-negotiable—it transforms cold digital pixels into warm, touchable surfaces. This is the secret ingredient that prevents flatness.
-  * **Breathing Space**: Whitespace is sacred. Sections have generous vertical padding (py-32), cards float with ample gaps (gap-8, gap-16), and every element has room to exist without crowding.
-  * **Intentional Movement**: Animations are slow, graceful, and fluid—like plants swaying in breeze. Duration-500 to duration-700 with ease-out curves. Nothing snaps or jerks.
-  * **Staggered Rhythm**: Breaking the grid creates natural, organic flow. Every second feature card translates vertically. Images rotate subtly. The design breathes asymmetry within structure.
-
-## 2. Design Token System
-
-### Colors (Light Mode - Earthy & Muted)
-
-* **Background**: `#F9F8F4` (Warm Alabaster / Rice Paper) - Not stark white.
-* **Foreground**: `#2D3A31` (Deep Forest Green) - The primary text color. Softer than black.
-* **Primary/Accent**: `#8C9A84` (Sage Green) - For buttons, highlights, icons.
-* **Secondary/Muted**: `#DCCFC2` (Soft Clay / Mushroom) - For backgrounds of cards, secondary buttons.
-* **Border**: `#E6E2DA` (Stone) - Very subtle, low contrast.
-* **Interactive**: `#C27B66` (Terracotta) - Hover states or "call to action" pops.
-
-### Typography
-
-* **Headings**: **"Playfair Display"** (Google Font). It is a transitional serif with high contrast strokes, feeling both classic and modern.
-  * Weight: 600/700 for headlines.
-  * Style: Italicize key words for emphasis.
-* **Body**: **"Source Sans 3"** (Google Font). A clean, legible humanist sans-serif that pairs beautifully with Playfair.
-  * Weight: 400/500.
-* **Scaling**: Large. Headlines should feel airy and grand.
-
-### Radius & Shapes
-
-* **Radius**: Highly rounded.
-  * Standard Card: `rounded-3xl` (24px).
-  * Buttons: `rounded-full` (Pill shape).
-  * Images: Often `rounded-t-full` (Arch) or `rounded-[40px]`.
-* **Border**: Thin, delicate. `1px` solid.
-
-### Shadows & Effects
-
-* **Elevation**: Very soft, diffused shadows. No harsh dark drops.
-  * Default: `0 4px 6px -1px rgba(45, 58, 49, 0.05)`
-  * Medium: `0 10px 15px -3px rgba(45, 58, 49, 0.05)`
-  * Large: `0 20px 40px -10px rgba(45, 58, 49, 0.05)`
-  * Extra Large: `0 25px 50px -12px rgba(45, 58, 49, 0.15)`
-* **Paper Grain Texture** (CRITICAL): A subtle SVG noise overlay is **mandatory** on the main background. This is applied as a fixed, full-screen overlay with `opacity-[0.015]` using an SVG fractal noise filter. This texture is the defining element that transforms the design from flat digital to warm, tactile, paper-like. Without it, the design loses its soul.
-  ```jsx
-  <div
-    className="pointer-events-none fixed inset-0 z-50 opacity-[0.015]"
-    style={{
-      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
-      backgroundRepeat: "repeat",
-    }}
-  />
-  ```
-* **Blur Effects**: Use backdrop-blur-sm on overlays (like the hero quote card) to create depth and layering.
-
-## 3. Component Stylings
-
-### Buttons
-
-* **Primary**: Pill-shaped (`rounded-full`). Background is **Deep Forest Green** (`#2D3A31`) with White text. On hover, it lightens slightly or shifts to Terracotta.
-* **Secondary**: Transparent background with a **Sage Green** border (`1px`). Text is Sage Green.
-* **Typography**: Uppercase, wide tracking (`tracking-widest`), small font size (text-sm).
-
-### Cards (Features, Pricing)
-
-* **Background**: White (`#FFFFFF`) or Soft Clay (`#F2F0EB`).
-* **Border**: None or very subtle Stone (`#E6E2DA`).
-* **Shape**: `rounded-3xl`.
-* **Hover**: Slight lift (`-translate-y-1`) and a bloom of soft shadow.
-
-### Inputs
-
-* **Style**: Underlined only (Border-bottom) or pill-shaped with a very light background (`#F2F0EB`).
-* **Focus**: No harsh blue rings. A soft Sage Green border transition.
-
-## 4. Non-Generic "Bold" Choices
-
-* **Arch Imagery**: Use CSS `clip-path` or `border-radius` to turn standard rectangular images into **Arches** (classic Roman arch shape) or **Organic Blobs**.
-* **Overlapping Typography**: Allow big serif headlines to slightly overlap images or background shapes.
-* **Decorative Lines**: Use fine, 1px SVG lines that curve or meander to connect sections, mimicking vines or roots.
-* **Italic Emphasis**: Frequently use the *Italic* variant of Playfair Display for single words within a bold headline.
-
-## 5. Layout Strategy & Spacing
-
-* **Container**: `max-w-7xl`. We want airiness.
-* **Whitespace**: Generous. `gap-12` or `gap-16` between grid items. `py-24` or `py-32` between sections.
-* **Grid**: Break the grid. Use `translate-y-12` on every second card in a row to create a "staggered" natural look.
-
-## 6. Icons (Lucide React)
-
-* **Style**: Thin stroke (`stroke-width={1.5}`).
-* **Color**: Deep Forest Green or Sage.
-* **Integration**: Don't put them in heavy boxes. Let them float, or place them in soft, pale circles.
-
-## 7. Animation & Micro-Interactions
-
-* **Feel**: Slow, graceful, fluid. Everything moves like it's suspended in honey or swaying in a gentle breeze. "Eased out" significantly.
-* **Durations**:
-  * Fast interactions: `duration-300` (button hovers, link colors)
-  * Standard: `duration-500` (card lifts, transforms)
-  * Slow, dramatic: `duration-700` to `duration-1000` (image scales, hero image hover)
-* **Hover Behaviors**:
-  * Cards: `-translate-y-1` or `-translate-y-2` with shadow intensification
-  * Images: `scale-105` with `duration-700` for smooth, luxurious feel
-  * Buttons: `bg-opacity-90` subtle darkening with `duration-300`
-  * Blog cards: Lift entire card while scaling image, arrow translates right (`translate-x-1`)
-* **Focus States**: Sage green ring (`ring-[#8C9A84]`) with 2px width and offset for accessibility
-* **Accordion**: Smooth height transitions with `max-h-0` to `max-h-48` and opacity fade
-* **Mobile Menu**: Slide in from top with backdrop
-* **Scroll**: Elements should gently fade up and float into place (`opacity-0` to `opacity-100`, `translate-y-4` to `translate-y-0`)
-
-## 8. Responsive Strategy
-
-* **Mobile-First Approach**: The design gracefully adapts while maintaining its organic, sophisticated character.
-* **Navigation**: Desktop shows horizontal nav with Sign In button. Mobile displays hamburger menu that opens a full-screen overlay with vertical nav links.
-* **Hero Image**: Uses `aspect-[3/4]` on mobile, transitions to `aspect-square` with fixed height on md+ breakpoints. This prevents excessive height on small screens.
-* **Grid Breakpoints**:
-  * Features: `grid-cols-1` → `md:grid-cols-3`
-  * Stats: `grid-cols-2` → `md:grid-cols-4`
-  * Blog/Testimonials: `grid-cols-1` → `md:grid-cols-3`
-  * Pricing: `grid-cols-1` → `lg:grid-cols-3`
-* **Typography Scaling**: Headlines reduce from `text-8xl` to `text-5xl` on mobile. Body text remains `text-lg` but line-height adjusts.
-* **Spacing Adjustments**: `py-32` becomes `py-16` on mobile, `gap-16` becomes `gap-12`, padding reduces from `p-8` to `p-4` where needed.
-* **Touch Targets**: All buttons maintain minimum 44px height (`h-12`, `h-14`) for comfortable mobile tapping.
-* **Staggered Cards**: The `translate-y-12` offset on alternating cards only applies at `md:` breakpoint and above to prevent awkward stacking on mobile.
-  `</design-system>`
+<design-system>
+# Design Style: Botanical / Organic Serif
+
+## 1. Design Philosophy
+
+This style is a **digital ode to nature**—it breathes, flows, and grounds itself in organic beauty. It is **soft, sophisticated, and deeply intentional**, rejecting the rigid, hyper-digital sharpness of modern tech aesthetics in favor of **warmth, tactility, and natural imperfection**.
+
+### Core Essence
+
+The Botanical Organic style embodies the calming presence of a botanical garden, the earthy warmth of a ceramics studio, and the refined elegance of editorial design. It whispers rather than shouts. Every element feels **hand-touched, sun-warmed, and naturally crafted**.
+
+### Fundamental Principles
+
+* **Vibe**: Peaceful, curated, artisanal, high-end wellness, sustainable luxury, botanical elegance
+* **Visual DNA**:
+  * **Organic Softness**: Hard angles are purposefully rare. Every corner is rounded, every shape flows like water-smoothed stones or unfurling leaves. The 200px arch radius on images creates iconic architectural moments.
+  * **Typographic Elegance**: Typography is the protagonist—Playfair Display's high-contrast strokes command attention while maintaining grace. Italics add a handwritten, personal touch. Headlines breathe with generous scale (text-5xl to text-8xl).
+  * **Earthbound Palette**: Every color derives from nature—forest floors, clay pottery, sage gardens, terracotta tiles. No artificial brights. Muted, sophisticated, grounded.
+  * **Tactile Texture**: The subtle paper grain overlay is non-negotiable—it transforms cold digital pixels into warm, touchable surfaces. This is the secret ingredient that prevents flatness.
+  * **Breathing Space**: Whitespace is sacred. Sections have generous vertical padding (py-32), cards float with ample gaps (gap-8, gap-16), and every element has room to exist without crowding.
+  * **Intentional Movement**: Animations are slow, graceful, and fluid—like plants swaying in breeze. Duration-500 to duration-700 with ease-out curves. Nothing snaps or jerks.
+  * **Staggered Rhythm**: Breaking the grid creates natural, organic flow. Every second feature card translates vertically. Images rotate subtly. The design breathes asymmetry within structure.
+
+## 2. Design Token System
+
+### Colors (Light Mode - Earthy & Muted)
+
+* **Background**: `#F9F8F4` (Warm Alabaster / Rice Paper) - Not stark white.
+* **Foreground**: `#2D3A31` (Deep Forest Green) - The primary text color. Softer than black.
+* **Primary/Accent**: `#8C9A84` (Sage Green) - For buttons, highlights, icons.
+* **Secondary/Muted**: `#DCCFC2` (Soft Clay / Mushroom) - For backgrounds of cards, secondary buttons.
+* **Border**: `#E6E2DA` (Stone) - Very subtle, low contrast.
+* **Interactive**: `#C27B66` (Terracotta) - Hover states or "call to action" pops.
+
+### Typography
+
+* **Headings**: **"Playfair Display"** (Google Font). It is a transitional serif with high contrast strokes, feeling both classic and modern.
+  * Weight: 600/700 for headlines.
+  * Style: Italicize key words for emphasis.
+* **Body**: **"Source Sans 3"** (Google Font). A clean, legible humanist sans-serif that pairs beautifully with Playfair.
+  * Weight: 400/500.
+* **Scaling**: Large. Headlines should feel airy and grand.
+
+### Radius & Shapes
+
+* **Radius**: Highly rounded.
+  * Standard Card: `rounded-3xl` (24px).
+  * Buttons: `rounded-full` (Pill shape).
+  * Images: Often `rounded-t-full` (Arch) or `rounded-[40px]`.
+* **Border**: Thin, delicate. `1px` solid.
+
+### Shadows & Effects
+
+* **Elevation**: Very soft, diffused shadows. No harsh dark drops.
+  * Default: `0 4px 6px -1px rgba(45, 58, 49, 0.05)`
+  * Medium: `0 10px 15px -3px rgba(45, 58, 49, 0.05)`
+  * Large: `0 20px 40px -10px rgba(45, 58, 49, 0.05)`
+  * Extra Large: `0 25px 50px -12px rgba(45, 58, 49, 0.15)`
+* **Paper Grain Texture** (CRITICAL): A subtle SVG noise overlay is **mandatory** on the main background. This is applied as a fixed, full-screen overlay with `opacity-[0.015]` using an SVG fractal noise filter. This texture is the defining element that transforms the design from flat digital to warm, tactile, paper-like. Without it, the design loses its soul.
+  ```jsx
+  <div
+    className="pointer-events-none fixed inset-0 z-50 opacity-[0.015]"
+    style={{
+      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+      backgroundRepeat: "repeat",
+    }}
+  />
+  ```
+* **Blur Effects**: Use backdrop-blur-sm on overlays (like the hero quote card) to create depth and layering.
+
+## 3. Component Stylings
+
+### Buttons
+
+* **Primary**: Pill-shaped (`rounded-full`). Background is **Deep Forest Green** (`#2D3A31`) with White text. On hover, it lightens slightly or shifts to Terracotta.
+* **Secondary**: Transparent background with a **Sage Green** border (`1px`). Text is Sage Green.
+* **Typography**: Uppercase, wide tracking (`tracking-widest`), small font size (text-sm).
+
+### Cards (Features, Pricing)
+
+* **Background**: White (`#FFFFFF`) or Soft Clay (`#F2F0EB`).
+* **Border**: None or very subtle Stone (`#E6E2DA`).
+* **Shape**: `rounded-3xl`.
+* **Hover**: Slight lift (`-translate-y-1`) and a bloom of soft shadow.
+
+### Inputs
+
+* **Style**: Underlined only (Border-bottom) or pill-shaped with a very light background (`#F2F0EB`).
+* **Focus**: No harsh blue rings. A soft Sage Green border transition.
+
+## 4. Non-Generic "Bold" Choices
+
+* **Arch Imagery**: Use CSS `clip-path` or `border-radius` to turn standard rectangular images into **Arches** (classic Roman arch shape) or **Organic Blobs**.
+* **Overlapping Typography**: Allow big serif headlines to slightly overlap images or background shapes.
+* **Decorative Lines**: Use fine, 1px SVG lines that curve or meander to connect sections, mimicking vines or roots.
+* **Italic Emphasis**: Frequently use the *Italic* variant of Playfair Display for single words within a bold headline.
+
+## 5. Layout Strategy & Spacing
+
+* **Container**: `max-w-7xl`. We want airiness.
+* **Whitespace**: Generous. `gap-12` or `gap-16` between grid items. `py-24` or `py-32` between sections.
+* **Grid**: Break the grid. Use `translate-y-12` on every second card in a row to create a "staggered" natural look.
+
+## 6. Icons (Lucide React)
+
+* **Style**: Thin stroke (`stroke-width={1.5}`).
+* **Color**: Deep Forest Green or Sage.
+* **Integration**: Don't put them in heavy boxes. Let them float, or place them in soft, pale circles.
+
+## 7. Animation & Micro-Interactions
+
+* **Feel**: Slow, graceful, fluid. Everything moves like it's suspended in honey or swaying in a gentle breeze. "Eased out" significantly.
+* **Durations**:
+  * Fast interactions: `duration-300` (button hovers, link colors)
+  * Standard: `duration-500` (card lifts, transforms)
+  * Slow, dramatic: `duration-700` to `duration-1000` (image scales, hero image hover)
+* **Hover Behaviors**:
+  * Cards: `-translate-y-1` or `-translate-y-2` with shadow intensification
+  * Images: `scale-105` with `duration-700` for smooth, luxurious feel
+  * Buttons: `bg-opacity-90` subtle darkening with `duration-300`
+  * Blog cards: Lift entire card while scaling image, arrow translates right (`translate-x-1`)
+* **Focus States**: Sage green ring (`ring-[#8C9A84]`) with 2px width and offset for accessibility
+* **Accordion**: Smooth height transitions with `max-h-0` to `max-h-48` and opacity fade
+* **Mobile Menu**: Slide in from top with backdrop
+* **Scroll**: Elements should gently fade up and float into place (`opacity-0` to `opacity-100`, `translate-y-4` to `translate-y-0`)
+
+## 8. Responsive Strategy
+
+* **Mobile-First Approach**: The design gracefully adapts while maintaining its organic, sophisticated character.
+* **Navigation**: Desktop shows horizontal nav with Sign In button. Mobile displays hamburger menu that opens a full-screen overlay with vertical nav links.
+* **Hero Image**: Uses `aspect-[3/4]` on mobile, transitions to `aspect-square` with fixed height on md+ breakpoints. This prevents excessive height on small screens.
+* **Grid Breakpoints**:
+  * Features: `grid-cols-1` → `md:grid-cols-3`
+  * Stats: `grid-cols-2` → `md:grid-cols-4`
+  * Blog/Testimonials: `grid-cols-1` → `md:grid-cols-3`
+  * Pricing: `grid-cols-1` → `lg:grid-cols-3`
+* **Typography Scaling**: Headlines reduce from `text-8xl` to `text-5xl` on mobile. Body text remains `text-lg` but line-height adjusts.
+* **Spacing Adjustments**: `py-32` becomes `py-16` on mobile, `gap-16` becomes `gap-12`, padding reduces from `p-8` to `p-4` where needed.
+* **Touch Targets**: All buttons maintain minimum 44px height (`h-12`, `h-14`) for comfortable mobile tapping.
+* **Staggered Cards**: The `translate-y-12` offset on alternating cards only applies at `md:` breakpoint and above to prevent awkward stacking on mobile.
+  `</design-system>`