get-shit-pretty 0.7.0 → 0.7.3

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

@@ -1,413 +1,377 @@
-<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>
-# High-Fidelity Claymorphism Design System
-
-## Design Philosophy
-
-**Core Concept: Digital Clay**
-This design system is not merely a "soft UI"—it is a high-fidelity simulation of a tangible, physical world constructed from **premium digital clay**. Every element on the screen should evoke the sensation of holding a high-end, matte-finish vinyl toy or a soft, air-filled silicone object. It rejects the flatness of modern minimalism in favor of volume, weight, and tactility.
-
-**The "High-Fidelity" Difference**:
-Unlike early 2020s "Neumorphism" (which felt like extruded plastic) or basic "Claymorphism" (which often feels like flat vector art), **High-Fidelity Claymorphism** relies on complex, multi-layered lighting simulation using 4-layer shadow stacks. It renders objects that feel dense, substantial, and interactive—not hollow decorations.
-
-* **Materiality**: Think of soft-touch matte silicone, marshmallow-like foam, or high-quality injection-molded plastic with a premium finish. Surfaces absorb light rather than reflecting it sharply, creating a warm, inviting aesthetic.
-* **Lighting**: The "world" is lit by a soft, diffused overhead light source positioned top-left, creating deep ambient occlusion shadows below objects and gentle specular highlights on their upper ridges. This creates the illusion of physical depth.
-* **Shadow Architecture**: Every element uses carefully crafted multi-layer shadows:
-  - **Outer shadows**: Soft, colored drop shadows that define distance from the surface
-  - **Highlight shadows**: Top-left highlights that simulate light reflection
-  - **Inner shadows**: Subtle colored reflections and rim lights that add dimensionality
-  - **Active states**: Pressed elements use inset shadows to simulate physical depression
-
-**The Sensory Vibe**:
-
-* **Playful & Optimistic**: The interface radiates joy through "candy store" colors (vivid violets, hot pinks, sky blues, emerald greens, amber oranges) and bouncy, organic motion. It feels safe, welcoming, and unpretentious—like a premium toy store display.
-* **Tactile & Responsive**: Elements don't just change color when interacted with—they physically react with exaggerated realism. Buttons actively "squish" (scale-[0.92] + shadow-clayPressed) and compress under the cursor. Cards lift and float towards the user (-translate-y-2 with enhanced shadows). Every interaction provides satisfying visual feedback.
-* **Friendly & Safe**: There are **zero sharp corners** in this universe. Every edge is aggressively rounded (`rounded-[20px]` minimum, up to `rounded-[60px]` for large containers), subconsciously signaling safety and approachability to the user. The design language speaks "friendly" and "accessible" without words.
-* **Premium Craft**: Despite the playfulness, this aesthetic maintains a sense of quality through careful attention to detail: consistent border radii, precise shadow layering, harmonious color relationships, and smooth micro-interactions.
-
-**The "Clay" Physics Engine**:
-
-1. **Convexity (The Bulge)**: Primary interactive elements (Buttons, Stat orbs, Feature cards) bulge OUT towards the user with `shadow-clayButton` or `shadow-clayCard`. They capture light on their top-left edge and cast soft colored shadows below, creating the illusion of floating above the surface.
-2. **Concavity (The Press)**: Secondary surfaces (Input fields, Active button states, FAQ panels when open) are pressed INTO the clay surface with `shadow-clayPressed`. They cast internal shadows on their top edge and catch light on their bottom lip, making them feel recessed.
-3. **Buoyancy (The Float)**: The interface exists in a zero-gravity environment with high air resistance. Background blobs drift slowly (8-12s animations with translateY and rotate). Cards hover effortlessly with hover states that amplify the float effect. Nothing feels statically "stuck" to the grid—everything breathes and moves subtly.
-4. **Micro-Physics**: Hover states consistently lift elements upward (`hover:-translate-y-1` to `-translate-y-2`) while enhancing their shadows, simulating the element floating closer to the viewer. Active/pressed states do the opposite—compressing downward with reduced shadows.
-
----
-
-## Design Token System
-
-### Colors (The "Candy Shop" Palette)
-
-**Background**:
-
-* **Canvas**: `#F4F1FA` (Very pale, cool lavender-white). This provides a cleaner, more modern base than warm beige. Never use pure white—the slight tint creates warmth.
-
-**Foreground**:
-
-* **Text (Primary)**: `#332F3A` (Soft Charcoal). High contrast (passing WCAG AA) but softer than black for a friendlier feel.
-* **Muted (Secondary)**: `#635F69` (Dark Lavender-Gray). Crucial for readability against light backgrounds. Use for body text, labels, and secondary information. Never go lighter than this value.
-
-**Accents (Vibrant & Saturated)**:
-
-* **Primary Accent**: `#7C3AED` (Vivid Violet). The hero color used for primary CTAs, links, and brand emphasis.
-* **Secondary Accent**: `#DB2777` (Hot Pink). Used in gradients and for secondary emphasis.
-* **Tertiary**: `#0EA5E9` (Sky Blue). For informational elements and background blobs.
-* **Success/Benefits**: `#10B981` (Emerald Green). For checkmarks and positive indicators.
-* **Warning**: `#F59E0B` (Amber). For alerts and star ratings.
-
-**Gradient Strategy**:
-
-* **Primary Buttons**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED]` (lighter violet to primary violet). This creates depth and prevents overly dark buttons.
-* **Icon Orbs**: `bg-gradient-to-br` from light pastel (400) to saturated hue (600) with varied colors for visual interest (e.g., `from-blue-400 to-blue-600`, `from-purple-400 to-purple-600`, `from-pink-400 to-pink-600`).
-* **Text Highlights**: Use multi-stop gradients for hero text (`clay-text-gradient`): `from-clay-foreground 20%, to-clay-accent 60%, to-clay-accent-alt`. Keep gradient text large (text-5xl+) for readability.
-* **Background Blobs**: Semi-transparent accent colors with 10% opacity and blur-3xl for soft ambient lighting.
-
-### Typography
-
-**Font Selection**:
-
-* **Headings**: **Nunito** (Google Fonts, Weights: 700/800/900). The rounded terminals perfectly complement the soft clay aesthetic. Apply via inline styles: `style={{ fontFamily: "Nunito, sans-serif" }}` for all headings, stat numbers, and emphasis text.
-* **Body**: **DM Sans** (Google Fonts, Weights: 400/500/700). Geometric, clean, and highly readable. Applied globally via body font-family.
-
-**Hierarchy (Mobile-First with Progressive Enhancement)**:
-
-* **Hero Headline**: `text-5xl sm:text-6xl md:text-7xl lg:text-8xl`, Black weight (font-black), tight tracking (tracking-tight), line-height 1.1. Always use Nunito.
-* **Section Titles**: `text-3xl sm:text-4xl md:text-5xl`, Extrabold (font-extrabold) or Black. Always use Nunito.
-* **Card Titles**: `text-xl` to `text-2xl` (larger for hero cards: `text-3xl`), Bold (font-bold) to Extrabold. Use Nunito.
-* **Body Text**: `text-base` to `text-lg`, Medium weight (font-medium), relaxed leading (leading-relaxed). Use DM Sans.
-* **Small Text**: `text-sm` to `text-xs`, Medium to Bold weight. Use for labels, metadata, uppercase tracking-wide treatments.
-
-**Typography Best Practices**:
-
-* Always pair Nunito headings with DM Sans body for optimal hierarchy.
-* Use `font-black` (900 weight) for maximum impact on large headings and numbers.
-* Ensure line-height is generous: `leading-relaxed` (1.625) for body, `leading-[1.1]` for tight display headings.
-* Limit line length to 60-75 characters with max-w-2xl to max-w-3xl containers for optimal readability.
-* Use `tracking-tight` on large headings to maintain visual density, `tracking-wide` or `tracking-widest` on small caps/labels.
-
-### Shapes & Radii
-
-**The "Super-Rounded" Rule** (Absolute Values Only):
-
-* **Large Containers/Hero Sections**: `rounded-[48px]` to `rounded-[60px]`
-* **Standard Cards**: `rounded-[32px]` (the default for most cards)
-* **Medium Elements** (Benefits pills, Blog cards): `rounded-[24px]`
-* **Buttons & Inputs**: `rounded-[20px]` or `rounded-2xl`
-* **Icon Containers**: `rounded-2xl` (16px) for square icons, `rounded-full` for circular
-* **Small Badges**: `rounded-lg` (8px) minimum, `rounded-full` preferred
-* **Stat Orbs**: `rounded-full` (perfect circles)
-
-**Critical Rules**:
-
-* Never use `rounded-md` (4px) or `rounded-sm`. They appear too sharp and generic for this aesthetic.
-* Maintain consistency: if a card uses `rounded-[32px]`, its nested image should use `rounded-[24px]` (8px less) to create visual hierarchy.
-* On mobile, you may reduce radii slightly (e.g., `rounded-[32px] sm:rounded-[40px]`) to maximize screen real estate while maintaining the soft aesthetic.
-
-### Shadows (The Engine of Clay)
-
-This system uses a **High-Fidelity Shadow Stack** to simulate complex lighting.
-
-**1. Deep Clay (Surface)**:
-For the main background elements or large containers.
-
-```css
-box-shadow:
-  30px 30px 60px #cdc6d9,           /* Deep, soft ambient occlusion */
-  -30px -30px 60px #ffffff,         /* Top-left ambient light */
-  inset 10px 10px 20px rgba(139, 92, 246, 0.05), /* Subtle color reflection */
-  inset -10px -10px 20px rgba(255, 255, 255, 0.8); /* Surface specularity */
-```
-
-**2. Clay Card (Floating)**:
-For standard content cards.
-
-```css
-box-shadow:
-  16px 16px 32px rgba(160, 150, 180, 0.2), /* Soft purple-gray drop shadow */
-  -10px -10px 24px rgba(255, 255, 255, 0.9), /* Strong top-left highlight */
-  inset 6px 6px 12px rgba(139, 92, 246, 0.03), /* Inner colored bounce light */
-  inset -6px -6px 12px rgba(255, 255, 255, 1); /* Inner rim light */
-```
-
-**3. Clay Button (High Convexity)**:
-For clickable elements.
-
-```css
-box-shadow:
-  12px 12px 24px rgba(139, 92, 246, 0.3), /* Strong colored drop shadow */
-  -8px -8px 16px rgba(255, 255, 255, 0.4), /* Top-left highlight */
-  inset 4px 4px 8px rgba(255, 255, 255, 0.4), /* Inner rim */
-  inset -4px -4px 8px rgba(0, 0, 0, 0.1); /* Bottom-right shading */
-```
-
-**4. Clay Pressed (Recessed)**:
-For inputs and active states.
-
-```css
-box-shadow:
-  inset 10px 10px 20px #d9d4e3, /* Deep inner shadow top-left */
-  inset -10px -10px 20px #ffffff; /* Inner highlight bottom-right */
-```
-
----
-
-## Component Architecture
-
-### 1. The Universal Card (`Card`)
-
-* **Base Styles**: `relative overflow-hidden rounded-[32px] bg-clay-cardBg p-8 text-clay-foreground shadow-clayCard backdrop-blur-xl`
-* **Interactive States**:
-  * Default: `shadow-clayCard` (4-layer shadow with soft depth)
-  * Hover: `hover:-translate-y-2 hover:shadow-[enhanced]` (lifted with stronger shadow)
-  * Transition: `transition-all duration-500` (smooth, premium feel)
-* **Structure**:
-  * Outer wrapper handles positioning, overflow, shadows
-  * **Inner Content Wrapper**: `<div className="relative z-10 flex h-full flex-col">{children}</div>` to support absolute positioned decorative elements
-* **Decorations**: Use absolute positioned panels with negative margins (`-bottom-8 -left-8 -right-8`) to create "peeking" UI elements that emerge from card bottoms
-* **Variants**:
-  * Glass effect: `bg-white/60` to `bg-white/80`
-  * Solid: `bg-white`
-  * Feature hero card: `md:col-span-2 md:row-span-2` with larger internal padding
-
-### 2. The Clay Button (`Button`)
-
-* **Base Shape**: `rounded-[20px]` with chunky height (`h-14` default, `h-16` for lg)
-* **Base Styles**: `inline-flex items-center justify-center font-bold tracking-wide transition-all duration-200`
-* **Variants**:
-  * **Primary/Default**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED] text-white shadow-clayButton hover:shadow-clayButtonHover`
-  * **Secondary**: `bg-white text-clay-foreground shadow-clayButton`
-  * **Outline**: `border-2 border-clay-accent/20 bg-transparent text-clay-accent hover:border-clay-accent hover:bg-clay-accent/5`
-  * **Ghost**: `text-clay-foreground hover:bg-clay-accent/10 hover:text-clay-accent`
-* **Interactive States**:
-  * Hover: `hover:-translate-y-1` (lift up 4px) + Enhanced shadow
-  * Active: `active:scale-[0.92] active:shadow-clayPressed` (pronounced squish effect)
-  * Focus: `focus-visible:ring-4 focus-visible:ring-clay-accent/30 focus-visible:ring-offset-2`
-* **Sizing**: Use `size` prop: `sm` (h-11), `default` (h-14), `lg` (h-16)
-
-### 3. The Recessed Input (`Input`)
-
-* **Base Shape**: `rounded-2xl` with generous height `h-16`
-* **Base Styles**: `flex w-full border-0 bg-[#EFEBF5] px-6 py-4 text-clay-foreground text-lg shadow-clayPressed`
-* **States**:
-  * Default: Recessed with `shadow-clayPressed` (inset shadows)
-  * Focus: `focus:bg-white focus:ring-4 focus:ring-clay-accent/20` (transforms to raised white surface)
-  * Placeholder: `placeholder:text-clay-muted`
-* **Accessibility**: `transition-all duration-200` for smooth state changes
-
-### 4. Floating 3D Blobs (Background)
-
-**Never use a flat background.** Always include 3-4 large, animated blobs.
-
-* **Container**: `<div className="pointer-events-none fixed inset-0 overflow-hidden -z-10">`
-* **Individual Blobs**:
-  * Classes: `absolute h-[60vh] w-[60vh] rounded-full blur-3xl`
-  * Colors: Accent colors with `/10` opacity (e.g., `bg-[#8B5CF6]/10`, `bg-[#EC4899]/10`, `bg-[#0EA5E9]/10`)
-  * Positioning: Negative margins to bleed off edges (`-top-[10%] -left-[10%]`, `-right-[10%] top-[20%]`)
-  * Animation: `clay-blob` or `clay-blob-alt` with staggered `animation-delay-2000` or `animation-delay-4000`
-* **Purpose**: Creates ambient colored lighting that shows through glass-morphic cards
-
----
-
-## Animation System
-
-**1. Clay Float (`clay-float`)**:
-Simulates zero-gravity drift for background blobs. 8 second duration.
-
-```css
-@keyframes clay-float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(2deg); }
-}
-```
-
-**2. Clay Float Delayed (`clay-float-delayed`)**:
-Alternative animation with opposite rotation. 10 second duration.
-
-```css
-@keyframes clay-float-delayed {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-15px) rotate(-2deg); }
-}
-```
-
-**3. Clay Float Slow (`clay-float-slow`)**:
-For hero decorative elements that orbit the headline. 12 second duration with more pronounced movement.
-
-```css
-@keyframes clay-float-slow {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-30px) rotate(5deg); }
-}
-```
-
-**4. Clay Breathe (`clay-breathe`)**:
-Simulates an object inflating/deflating slightly. 6 second duration. Used on stat orbs.
-
-```css
-@keyframes clay-breathe {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.02); }
-}
-```
-
-**5. Hover Lift**:
-Standard interactive elements should lift upward on hover:
-
-* Cards: `hover:-translate-y-2` (8px) with enhanced shadow
-* Benefits pills: `hover:-translate-y-1` (4px)
-* Testimonials: `hover:-translate-y-2` (8px)
-* Blog posts: `hover:-translate-y-3` (12px) for dramatic effect
-* Buttons: `hover:-translate-y-1` (4px) with shadow enhancement
-
-**6. Active Press**:
-Buttons use `active:scale-[0.92]` combined with `active:shadow-clayPressed` to simulate a physical squish when clicked. Duration should be fast (200ms) for immediate feedback.
-
-**7. Scale Transforms**:
-
-* Stat orbs: `hover:scale-110` (10% growth)
-* How It Works circles: `group-hover:scale-110` with 300ms duration
-* Pricing cards (non-highlighted): `hover:scale-105` (5% subtle growth)
-* Featured card in Bento grid: `hover:scale-[1.02]` (minimal growth due to large size)
-
-**8. Animation Delays**:
-Use staggered animations for visual rhythm:
-
-* `.animation-delay-2000` (2s delay)
-* `.animation-delay-4000` (4s delay)
-
-**9. Reduced Motion**:
-Always include `@media (prefers-reduced-motion: reduce)` to disable all animations for accessibility.
-
----
-
-## Layout Patterns
-
-**1. Masonry / Bento Grid**:
-
-* Don't use uniform grids. Mix `col-span-1` with `col-span-2` or `row-span-2` cards.
-* Use `hover:scale-[1.02]` on large grid items for a tactile feel.
-
-**2. Split Layouts**:
-
-* Use 50/50 splits for "Product" or "Benefits" sections.
-* One side text, one side **Abstract 3D Composition** (nested clay shapes, not just an image).
-
-**3. Overlapping Elements**:
-
-* Allow elements to break their containers (e.g., a "Popular" badge floating *above* a pricing card).
-* Use negative margins to pull decorative elements to the edges.
-
----
-
-## Responsive Strategy
-
-**Mobile-First Approach with Progressive Enhancement**
-
-The Clay design system maintains its playful, tactile personality across all screen sizes while adapting layouts and sizing for optimal mobile experience.
-
-**Typography Scaling**:
-
-* Hero headlines: `text-5xl → sm:text-6xl → md:text-7xl → lg:text-8xl`
-* Section titles: `text-3xl → sm:text-4xl → md:text-5xl`
-* Body text: `text-base → sm:text-lg → md:text-xl` where appropriate
-* Always maintain `leading-relaxed` and proper line length constraints
-
-**Layout Transformations**:
-
-* **Navigation**: Compact on mobile (`h-16 rounded-[32px] px-4`) → Larger on desktop (`sm:h-20 sm:rounded-[40px] sm:px-8`). Hide non-essential nav items on mobile.
-* **Hero**: Stack CTAs vertically (`flex-col gap-6`) → Horizontal on desktop (`sm:flex-row`)
-* **Stats**: 2-column grid on mobile (`grid-cols-2 gap-6`) → 4 columns on desktop (`md:grid-cols-4 gap-8`)
-* **Features**: Single column → Bento layout with spans on desktop (`md:grid-cols-2 lg:grid-cols-3` with hero card `md:col-span-2 md:row-span-2`)
-* **Benefits/Product Detail**: Stack vertically on mobile → Side-by-side split on desktop (`lg:grid-cols-2`)
-* **Pricing**: Stack cards on mobile → 3 columns on desktop (`md:grid-cols-3`). Scale effect for highlighted card only applies on desktop (`md:scale-110`)
-
-**Component Adjustments**:
-
-* **Cards**: Reduce padding on mobile (`p-6 sm:p-8`)
-* **Border Radii**: Maintain generous radii even on mobile (never less than `rounded-[20px]`)
-* **Buttons**: Full width on mobile (`w-full sm:w-auto`) for primary CTAs
-* **Decorative Elements**: Hide some floating shapes on mobile (`hidden lg:block`)
-* **Shadows**: Keep full shadow stacks—they're essential to the aesthetic
-
-**Touch Targets**:
-
-* All interactive elements meet 44px minimum tap target (buttons are `h-14+`)
-* Increase spacing in mobile navigation for easier tapping
-* Ensure accordion FAQ items have adequate vertical spacing
-
-**Performance**:
-
-* Animations still run on mobile but respect `prefers-reduced-motion`
-* Blur effects (`backdrop-blur-xl`) remain—they're critical to the glass-clay aesthetic
-* Background blobs scale with viewport units (`vh`) so they adapt naturally
-
-**What NOT to Change on Mobile**:
-
-* Don't flatten the design—keep the shadows and depth
-* Don't reduce border radii to generic values
-* Don't remove the candy-store colors or make them muted
-* Don't disable all animations (only simplify if performance issues arise)
-
----
-
-## Dos and Don'ts
-
-* **DO** use pronounced "Squish" animations on click (`active:scale-[0.92]` combined with `shadow-clayPressed`).
-* **DO** use varying border radii within components (e.g., `rounded-[48px]` for outer container, `rounded-[32px]` for card, `rounded-[24px]` for inner image).
-* **DO** use "Glass-Clay" hybrid (semi-transparent white `bg-white/60` to `/80` + `backdrop-blur-xl`) for cards to reveal background blobs.
-* **DO** use multi-layer shadow stacks (4 shadows minimum) to achieve high-fidelity depth.
-* **DO** apply Nunito font family explicitly to all headings, numbers, and labels via inline styles.
-* **DO** use vibrant gradient backgrounds for icon containers with varied colors (blue, purple, pink, green, cyan, amber).
-* **DON'T** use gray text lighter than `#635F69`. This is the minimum for accessibility against light backgrounds.
-* **DON'T** use sharp corners anywhere. Minimum radius is `rounded-[20px]`, never `rounded-md` or `rounded-lg`.
-* **DON'T** use flat colors for backgrounds. Always include animated blobs or subtle gradients.
-* **DON'T** use gradient text for font sizes smaller than `text-5xl` (readability risk).
-* **DON'T** make buttons too small. Minimum height is `h-11` (44px) for accessibility.
-* **DON'T** skip the hover lift effect on interactive elements—it's core to the tactile feel.
-
----
-
-## Implementation Checklist
-
-- [ ] **Background**: Canvas `#F4F1FA` + Animated Blobs.
-- [ ] **Shadows**: 4-layer box-shadows defined in CSS.
-- [ ] **Typography**: Nunito Black (Headings) + DM Sans (Body).
-- [ ] **Buttons**: Gradient, rounded-2xl, click-squish.
-- [ ] **Cards**: White/60%, backdrop-blur, rounded-3xl.
-- [ ] **Text**: High contrast charcoal/slate, no light grays.
-  `</design-system>`
+<design-system>
+# High-Fidelity Claymorphism Design System
+
+## Design Philosophy
+
+**Core Concept: Digital Clay**
+This design system is not merely a "soft UI"—it is a high-fidelity simulation of a tangible, physical world constructed from **premium digital clay**. Every element on the screen should evoke the sensation of holding a high-end, matte-finish vinyl toy or a soft, air-filled silicone object. It rejects the flatness of modern minimalism in favor of volume, weight, and tactility.
+
+**The "High-Fidelity" Difference**:
+Unlike early 2020s "Neumorphism" (which felt like extruded plastic) or basic "Claymorphism" (which often feels like flat vector art), **High-Fidelity Claymorphism** relies on complex, multi-layered lighting simulation using 4-layer shadow stacks. It renders objects that feel dense, substantial, and interactive—not hollow decorations.
+
+* **Materiality**: Think of soft-touch matte silicone, marshmallow-like foam, or high-quality injection-molded plastic with a premium finish. Surfaces absorb light rather than reflecting it sharply, creating a warm, inviting aesthetic.
+* **Lighting**: The "world" is lit by a soft, diffused overhead light source positioned top-left, creating deep ambient occlusion shadows below objects and gentle specular highlights on their upper ridges. This creates the illusion of physical depth.
+* **Shadow Architecture**: Every element uses carefully crafted multi-layer shadows:
+  - **Outer shadows**: Soft, colored drop shadows that define distance from the surface
+  - **Highlight shadows**: Top-left highlights that simulate light reflection
+  - **Inner shadows**: Subtle colored reflections and rim lights that add dimensionality
+  - **Active states**: Pressed elements use inset shadows to simulate physical depression
+
+**The Sensory Vibe**:
+
+* **Playful & Optimistic**: The interface radiates joy through "candy store" colors (vivid violets, hot pinks, sky blues, emerald greens, amber oranges) and bouncy, organic motion. It feels safe, welcoming, and unpretentious—like a premium toy store display.
+* **Tactile & Responsive**: Elements don't just change color when interacted with—they physically react with exaggerated realism. Buttons actively "squish" (scale-[0.92] + shadow-clayPressed) and compress under the cursor. Cards lift and float towards the user (-translate-y-2 with enhanced shadows). Every interaction provides satisfying visual feedback.
+* **Friendly & Safe**: There are **zero sharp corners** in this universe. Every edge is aggressively rounded (`rounded-[20px]` minimum, up to `rounded-[60px]` for large containers), subconsciously signaling safety and approachability to the user. The design language speaks "friendly" and "accessible" without words.
+* **Premium Craft**: Despite the playfulness, this aesthetic maintains a sense of quality through careful attention to detail: consistent border radii, precise shadow layering, harmonious color relationships, and smooth micro-interactions.
+
+**The "Clay" Physics Engine**:
+
+1. **Convexity (The Bulge)**: Primary interactive elements (Buttons, Stat orbs, Feature cards) bulge OUT towards the user with `shadow-clayButton` or `shadow-clayCard`. They capture light on their top-left edge and cast soft colored shadows below, creating the illusion of floating above the surface.
+2. **Concavity (The Press)**: Secondary surfaces (Input fields, Active button states, FAQ panels when open) are pressed INTO the clay surface with `shadow-clayPressed`. They cast internal shadows on their top edge and catch light on their bottom lip, making them feel recessed.
+3. **Buoyancy (The Float)**: The interface exists in a zero-gravity environment with high air resistance. Background blobs drift slowly (8-12s animations with translateY and rotate). Cards hover effortlessly with hover states that amplify the float effect. Nothing feels statically "stuck" to the grid—everything breathes and moves subtly.
+4. **Micro-Physics**: Hover states consistently lift elements upward (`hover:-translate-y-1` to `-translate-y-2`) while enhancing their shadows, simulating the element floating closer to the viewer. Active/pressed states do the opposite—compressing downward with reduced shadows.
+
+---
+
+## Design Token System
+
+### Colors (The "Candy Shop" Palette)
+
+**Background**:
+
+* **Canvas**: `#F4F1FA` (Very pale, cool lavender-white). This provides a cleaner, more modern base than warm beige. Never use pure white—the slight tint creates warmth.
+
+**Foreground**:
+
+* **Text (Primary)**: `#332F3A` (Soft Charcoal). High contrast (passing WCAG AA) but softer than black for a friendlier feel.
+* **Muted (Secondary)**: `#635F69` (Dark Lavender-Gray). Crucial for readability against light backgrounds. Use for body text, labels, and secondary information. Never go lighter than this value.
+
+**Accents (Vibrant & Saturated)**:
+
+* **Primary Accent**: `#7C3AED` (Vivid Violet). The hero color used for primary CTAs, links, and brand emphasis.
+* **Secondary Accent**: `#DB2777` (Hot Pink). Used in gradients and for secondary emphasis.
+* **Tertiary**: `#0EA5E9` (Sky Blue). For informational elements and background blobs.
+* **Success/Benefits**: `#10B981` (Emerald Green). For checkmarks and positive indicators.
+* **Warning**: `#F59E0B` (Amber). For alerts and star ratings.
+
+**Gradient Strategy**:
+
+* **Primary Buttons**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED]` (lighter violet to primary violet). This creates depth and prevents overly dark buttons.
+* **Icon Orbs**: `bg-gradient-to-br` from light pastel (400) to saturated hue (600) with varied colors for visual interest (e.g., `from-blue-400 to-blue-600`, `from-purple-400 to-purple-600`, `from-pink-400 to-pink-600`).
+* **Text Highlights**: Use multi-stop gradients for hero text (`clay-text-gradient`): `from-clay-foreground 20%, to-clay-accent 60%, to-clay-accent-alt`. Keep gradient text large (text-5xl+) for readability.
+* **Background Blobs**: Semi-transparent accent colors with 10% opacity and blur-3xl for soft ambient lighting.
+
+### Typography
+
+**Font Selection**:
+
+* **Headings**: **Nunito** (Google Fonts, Weights: 700/800/900). The rounded terminals perfectly complement the soft clay aesthetic. Apply via inline styles: `style={{ fontFamily: "Nunito, sans-serif" }}` for all headings, stat numbers, and emphasis text.
+* **Body**: **DM Sans** (Google Fonts, Weights: 400/500/700). Geometric, clean, and highly readable. Applied globally via body font-family.
+
+**Hierarchy (Mobile-First with Progressive Enhancement)**:
+
+* **Hero Headline**: `text-5xl sm:text-6xl md:text-7xl lg:text-8xl`, Black weight (font-black), tight tracking (tracking-tight), line-height 1.1. Always use Nunito.
+* **Section Titles**: `text-3xl sm:text-4xl md:text-5xl`, Extrabold (font-extrabold) or Black. Always use Nunito.
+* **Card Titles**: `text-xl` to `text-2xl` (larger for hero cards: `text-3xl`), Bold (font-bold) to Extrabold. Use Nunito.
+* **Body Text**: `text-base` to `text-lg`, Medium weight (font-medium), relaxed leading (leading-relaxed). Use DM Sans.
+* **Small Text**: `text-sm` to `text-xs`, Medium to Bold weight. Use for labels, metadata, uppercase tracking-wide treatments.
+
+**Typography Best Practices**:
+
+* Always pair Nunito headings with DM Sans body for optimal hierarchy.
+* Use `font-black` (900 weight) for maximum impact on large headings and numbers.
+* Ensure line-height is generous: `leading-relaxed` (1.625) for body, `leading-[1.1]` for tight display headings.
+* Limit line length to 60-75 characters with max-w-2xl to max-w-3xl containers for optimal readability.
+* Use `tracking-tight` on large headings to maintain visual density, `tracking-wide` or `tracking-widest` on small caps/labels.
+
+### Shapes & Radii
+
+**The "Super-Rounded" Rule** (Absolute Values Only):
+
+* **Large Containers/Hero Sections**: `rounded-[48px]` to `rounded-[60px]`
+* **Standard Cards**: `rounded-[32px]` (the default for most cards)
+* **Medium Elements** (Benefits pills, Blog cards): `rounded-[24px]`
+* **Buttons & Inputs**: `rounded-[20px]` or `rounded-2xl`
+* **Icon Containers**: `rounded-2xl` (16px) for square icons, `rounded-full` for circular
+* **Small Badges**: `rounded-lg` (8px) minimum, `rounded-full` preferred
+* **Stat Orbs**: `rounded-full` (perfect circles)
+
+**Critical Rules**:
+
+* Never use `rounded-md` (4px) or `rounded-sm`. They appear too sharp and generic for this aesthetic.
+* Maintain consistency: if a card uses `rounded-[32px]`, its nested image should use `rounded-[24px]` (8px less) to create visual hierarchy.
+* On mobile, you may reduce radii slightly (e.g., `rounded-[32px] sm:rounded-[40px]`) to maximize screen real estate while maintaining the soft aesthetic.
+
+### Shadows (The Engine of Clay)
+
+This system uses a **High-Fidelity Shadow Stack** to simulate complex lighting.
+
+**1. Deep Clay (Surface)**:
+For the main background elements or large containers.
+
+```css
+box-shadow:
+  30px 30px 60px #cdc6d9,           /* Deep, soft ambient occlusion */
+  -30px -30px 60px #ffffff,         /* Top-left ambient light */
+  inset 10px 10px 20px rgba(139, 92, 246, 0.05), /* Subtle color reflection */
+  inset -10px -10px 20px rgba(255, 255, 255, 0.8); /* Surface specularity */
+```
+
+**2. Clay Card (Floating)**:
+For standard content cards.
+
+```css
+box-shadow:
+  16px 16px 32px rgba(160, 150, 180, 0.2), /* Soft purple-gray drop shadow */
+  -10px -10px 24px rgba(255, 255, 255, 0.9), /* Strong top-left highlight */
+  inset 6px 6px 12px rgba(139, 92, 246, 0.03), /* Inner colored bounce light */
+  inset -6px -6px 12px rgba(255, 255, 255, 1); /* Inner rim light */
+```
+
+**3. Clay Button (High Convexity)**:
+For clickable elements.
+
+```css
+box-shadow:
+  12px 12px 24px rgba(139, 92, 246, 0.3), /* Strong colored drop shadow */
+  -8px -8px 16px rgba(255, 255, 255, 0.4), /* Top-left highlight */
+  inset 4px 4px 8px rgba(255, 255, 255, 0.4), /* Inner rim */
+  inset -4px -4px 8px rgba(0, 0, 0, 0.1); /* Bottom-right shading */
+```
+
+**4. Clay Pressed (Recessed)**:
+For inputs and active states.
+
+```css
+box-shadow:
+  inset 10px 10px 20px #d9d4e3, /* Deep inner shadow top-left */
+  inset -10px -10px 20px #ffffff; /* Inner highlight bottom-right */
+```
+
+---
+
+## Component Architecture
+
+### 1. The Universal Card (`Card`)
+
+* **Base Styles**: `relative overflow-hidden rounded-[32px] bg-clay-cardBg p-8 text-clay-foreground shadow-clayCard backdrop-blur-xl`
+* **Interactive States**:
+  * Default: `shadow-clayCard` (4-layer shadow with soft depth)
+  * Hover: `hover:-translate-y-2 hover:shadow-[enhanced]` (lifted with stronger shadow)
+  * Transition: `transition-all duration-500` (smooth, premium feel)
+* **Structure**:
+  * Outer wrapper handles positioning, overflow, shadows
+  * **Inner Content Wrapper**: `<div className="relative z-10 flex h-full flex-col">{children}</div>` to support absolute positioned decorative elements
+* **Decorations**: Use absolute positioned panels with negative margins (`-bottom-8 -left-8 -right-8`) to create "peeking" UI elements that emerge from card bottoms
+* **Variants**:
+  * Glass effect: `bg-white/60` to `bg-white/80`
+  * Solid: `bg-white`
+  * Feature hero card: `md:col-span-2 md:row-span-2` with larger internal padding
+
+### 2. The Clay Button (`Button`)
+
+* **Base Shape**: `rounded-[20px]` with chunky height (`h-14` default, `h-16` for lg)
+* **Base Styles**: `inline-flex items-center justify-center font-bold tracking-wide transition-all duration-200`
+* **Variants**:
+  * **Primary/Default**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED] text-white shadow-clayButton hover:shadow-clayButtonHover`
+  * **Secondary**: `bg-white text-clay-foreground shadow-clayButton`
+  * **Outline**: `border-2 border-clay-accent/20 bg-transparent text-clay-accent hover:border-clay-accent hover:bg-clay-accent/5`
+  * **Ghost**: `text-clay-foreground hover:bg-clay-accent/10 hover:text-clay-accent`
+* **Interactive States**:
+  * Hover: `hover:-translate-y-1` (lift up 4px) + Enhanced shadow
+  * Active: `active:scale-[0.92] active:shadow-clayPressed` (pronounced squish effect)
+  * Focus: `focus-visible:ring-4 focus-visible:ring-clay-accent/30 focus-visible:ring-offset-2`
+* **Sizing**: Use `size` prop: `sm` (h-11), `default` (h-14), `lg` (h-16)
+
+### 3. The Recessed Input (`Input`)
+
+* **Base Shape**: `rounded-2xl` with generous height `h-16`
+* **Base Styles**: `flex w-full border-0 bg-[#EFEBF5] px-6 py-4 text-clay-foreground text-lg shadow-clayPressed`
+* **States**:
+  * Default: Recessed with `shadow-clayPressed` (inset shadows)
+  * Focus: `focus:bg-white focus:ring-4 focus:ring-clay-accent/20` (transforms to raised white surface)
+  * Placeholder: `placeholder:text-clay-muted`
+* **Accessibility**: `transition-all duration-200` for smooth state changes
+
+### 4. Floating 3D Blobs (Background)
+
+**Never use a flat background.** Always include 3-4 large, animated blobs.
+
+* **Container**: `<div className="pointer-events-none fixed inset-0 overflow-hidden -z-10">`
+* **Individual Blobs**:
+  * Classes: `absolute h-[60vh] w-[60vh] rounded-full blur-3xl`
+  * Colors: Accent colors with `/10` opacity (e.g., `bg-[#8B5CF6]/10`, `bg-[#EC4899]/10`, `bg-[#0EA5E9]/10`)
+  * Positioning: Negative margins to bleed off edges (`-top-[10%] -left-[10%]`, `-right-[10%] top-[20%]`)
+  * Animation: `clay-blob` or `clay-blob-alt` with staggered `animation-delay-2000` or `animation-delay-4000`
+* **Purpose**: Creates ambient colored lighting that shows through glass-morphic cards
+
+---
+
+## Animation System
+
+**1. Clay Float (`clay-float`)**:
+Simulates zero-gravity drift for background blobs. 8 second duration.
+
+```css
+@keyframes clay-float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(2deg); }
+}
+```
+
+**2. Clay Float Delayed (`clay-float-delayed`)**:
+Alternative animation with opposite rotation. 10 second duration.
+
+```css
+@keyframes clay-float-delayed {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-15px) rotate(-2deg); }
+}
+```
+
+**3. Clay Float Slow (`clay-float-slow`)**:
+For hero decorative elements that orbit the headline. 12 second duration with more pronounced movement.
+
+```css
+@keyframes clay-float-slow {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-30px) rotate(5deg); }
+}
+```
+
+**4. Clay Breathe (`clay-breathe`)**:
+Simulates an object inflating/deflating slightly. 6 second duration. Used on stat orbs.
+
+```css
+@keyframes clay-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+```
+
+**5. Hover Lift**:
+Standard interactive elements should lift upward on hover:
+
+* Cards: `hover:-translate-y-2` (8px) with enhanced shadow
+* Benefits pills: `hover:-translate-y-1` (4px)
+* Testimonials: `hover:-translate-y-2` (8px)
+* Blog posts: `hover:-translate-y-3` (12px) for dramatic effect
+* Buttons: `hover:-translate-y-1` (4px) with shadow enhancement
+
+**6. Active Press**:
+Buttons use `active:scale-[0.92]` combined with `active:shadow-clayPressed` to simulate a physical squish when clicked. Duration should be fast (200ms) for immediate feedback.
+
+**7. Scale Transforms**:
+
+* Stat orbs: `hover:scale-110` (10% growth)
+* How It Works circles: `group-hover:scale-110` with 300ms duration
+* Pricing cards (non-highlighted): `hover:scale-105` (5% subtle growth)
+* Featured card in Bento grid: `hover:scale-[1.02]` (minimal growth due to large size)
+
+**8. Animation Delays**:
+Use staggered animations for visual rhythm:
+
+* `.animation-delay-2000` (2s delay)
+* `.animation-delay-4000` (4s delay)
+
+**9. Reduced Motion**:
+Always include `@media (prefers-reduced-motion: reduce)` to disable all animations for accessibility.
+
+---
+
+## Layout Patterns
+
+**1. Masonry / Bento Grid**:
+
+* Don't use uniform grids. Mix `col-span-1` with `col-span-2` or `row-span-2` cards.
+* Use `hover:scale-[1.02]` on large grid items for a tactile feel.
+
+**2. Split Layouts**:
+
+* Use 50/50 splits for "Product" or "Benefits" sections.
+* One side text, one side **Abstract 3D Composition** (nested clay shapes, not just an image).
+
+**3. Overlapping Elements**:
+
+* Allow elements to break their containers (e.g., a "Popular" badge floating *above* a pricing card).
+* Use negative margins to pull decorative elements to the edges.
+
+---
+
+## Responsive Strategy
+
+**Mobile-First Approach with Progressive Enhancement**
+
+The Clay design system maintains its playful, tactile personality across all screen sizes while adapting layouts and sizing for optimal mobile experience.
+
+**Typography Scaling**:
+
+* Hero headlines: `text-5xl → sm:text-6xl → md:text-7xl → lg:text-8xl`
+* Section titles: `text-3xl → sm:text-4xl → md:text-5xl`
+* Body text: `text-base → sm:text-lg → md:text-xl` where appropriate
+* Always maintain `leading-relaxed` and proper line length constraints
+
+**Layout Transformations**:
+
+* **Navigation**: Compact on mobile (`h-16 rounded-[32px] px-4`) → Larger on desktop (`sm:h-20 sm:rounded-[40px] sm:px-8`). Hide non-essential nav items on mobile.
+* **Hero**: Stack CTAs vertically (`flex-col gap-6`) → Horizontal on desktop (`sm:flex-row`)
+* **Stats**: 2-column grid on mobile (`grid-cols-2 gap-6`) → 4 columns on desktop (`md:grid-cols-4 gap-8`)
+* **Features**: Single column → Bento layout with spans on desktop (`md:grid-cols-2 lg:grid-cols-3` with hero card `md:col-span-2 md:row-span-2`)
+* **Benefits/Product Detail**: Stack vertically on mobile → Side-by-side split on desktop (`lg:grid-cols-2`)
+* **Pricing**: Stack cards on mobile → 3 columns on desktop (`md:grid-cols-3`). Scale effect for highlighted card only applies on desktop (`md:scale-110`)
+
+**Component Adjustments**:
+
+* **Cards**: Reduce padding on mobile (`p-6 sm:p-8`)
+* **Border Radii**: Maintain generous radii even on mobile (never less than `rounded-[20px]`)
+* **Buttons**: Full width on mobile (`w-full sm:w-auto`) for primary CTAs
+* **Decorative Elements**: Hide some floating shapes on mobile (`hidden lg:block`)
+* **Shadows**: Keep full shadow stacks—they're essential to the aesthetic
+
+**Touch Targets**:
+
+* All interactive elements meet 44px minimum tap target (buttons are `h-14+`)
+* Increase spacing in mobile navigation for easier tapping
+* Ensure accordion FAQ items have adequate vertical spacing
+
+**Performance**:
+
+* Animations still run on mobile but respect `prefers-reduced-motion`
+* Blur effects (`backdrop-blur-xl`) remain—they're critical to the glass-clay aesthetic
+* Background blobs scale with viewport units (`vh`) so they adapt naturally
+
+**What NOT to Change on Mobile**:
+
+* Don't flatten the design—keep the shadows and depth
+* Don't reduce border radii to generic values
+* Don't remove the candy-store colors or make them muted
+* Don't disable all animations (only simplify if performance issues arise)
+
+---
+
+## Dos and Don'ts
+
+* **DO** use pronounced "Squish" animations on click (`active:scale-[0.92]` combined with `shadow-clayPressed`).
+* **DO** use varying border radii within components (e.g., `rounded-[48px]` for outer container, `rounded-[32px]` for card, `rounded-[24px]` for inner image).
+* **DO** use "Glass-Clay" hybrid (semi-transparent white `bg-white/60` to `/80` + `backdrop-blur-xl`) for cards to reveal background blobs.
+* **DO** use multi-layer shadow stacks (4 shadows minimum) to achieve high-fidelity depth.
+* **DO** apply Nunito font family explicitly to all headings, numbers, and labels via inline styles.
+* **DO** use vibrant gradient backgrounds for icon containers with varied colors (blue, purple, pink, green, cyan, amber).
+* **DON'T** use gray text lighter than `#635F69`. This is the minimum for accessibility against light backgrounds.
+* **DON'T** use sharp corners anywhere. Minimum radius is `rounded-[20px]`, never `rounded-md` or `rounded-lg`.
+* **DON'T** use flat colors for backgrounds. Always include animated blobs or subtle gradients.
+* **DON'T** use gradient text for font sizes smaller than `text-5xl` (readability risk).
+* **DON'T** make buttons too small. Minimum height is `h-11` (44px) for accessibility.
+* **DON'T** skip the hover lift effect on interactive elements—it's core to the tactile feel.
+
+---
+
+## Implementation Checklist
+
+- [ ] **Background**: Canvas `#F4F1FA` + Animated Blobs.
+- [ ] **Shadows**: 4-layer box-shadows defined in CSS.
+- [ ] **Typography**: Nunito Black (Headings) + DM Sans (Body).
+- [ ] **Buttons**: Gradient, rounded-2xl, click-squish.
+- [ ] **Cards**: White/60%, backdrop-blur, rounded-3xl.
+- [ ] **Text**: High contrast charcoal/slate, no light grays.
+  `</design-system>`