get-shit-pretty 0.7.0 → 0.7.1

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

@@ -1,225 +1,189 @@
-<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: Bauhaus
-
-## 1. Design Philosophy
-
-The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. This is **constructivist modernism**—every element is deliberately composed from circles, squares, and triangles. The aesthetic should evoke 1920s Bauhaus posters: bold, asymmetric, architectural, and unapologetically graphic.
-
-**Vibe**: Constructivist, Geometric, Modernist, Artistic-yet-Functional, Bold, Architectural
-
-**Core Concept**: The interface is not merely a layout—it is a **geometric composition**. Every section is constructed rather than designed. Think of the page as a Bauhaus poster brought to life: shapes overlap, borders are thick and deliberate, colors are pure primaries (Red #D02020, Blue #1040C0, Yellow #F0C020), and everything is grounded by stark black (#121212) and clean white.
-
-**Key Characteristics**:
-
-- **Geometric Purity**: All decorative elements derive from circles, squares, and triangles
-- **Hard Shadows**: 4px and 8px offset shadows (never soft/blurred) create depth through layering
-- **Color Blocking**: Entire sections use solid primary colors as backgrounds
-- **Thick Borders**: 2px and 4px black borders define every major element
-- **Asymmetric Balance**: Grids are used but intentionally broken with overlapping elements
-- **Constructivist Typography**: Massive uppercase headlines (text-6xl to text-8xl) with tight tracking
-- **Functional Honesty**: No gradients, no subtle effects—everything is direct and declarative
-
-## 2. Design Token System (The DNA)
-
-### Colors (Single Palette - Light Mode)
-
-The palette is strictly limited to the Bauhaus primaries, plus stark black and white.
-
-- `background`: `#F0F0F0` (Off-white canvas)
-- `foreground`: `#121212` (Stark Black)
-- `primary-red`: `#D02020` (Bauhaus Red)
-- `primary-blue`: `#1040C0` (Bauhaus Blue)
-- `primary-yellow`: `#F0C020` (Bauhaus Yellow)
-- `border`: `#121212` (Thick, distinct borders)
-- `muted`: `#E0E0E0`
-
-### Typography
-
-- **Font Family**: **'Outfit'** (geometric sans-serif from Google Fonts). This typeface's circular letterforms and clean geometry perfectly embody Bauhaus principles.
-- **Font Import**: `Outfit:wght@400;500;700;900`
-- **Scaling**: Extreme contrast between display and body text
-  - Display: text-4xl (mobile) → text-6xl (tablet) → text-8xl (desktop)
-  - Subheadings: text-2xl → text-3xl → text-4xl
-  - Body: text-base → text-lg
-- **Weights**:
-  - Headlines: font-black (900) with uppercase and tracking-tighter
-  - Subheadings: font-bold (700) with uppercase
-  - Body: font-medium (500) for readability
-  - Labels: font-bold (700) with uppercase and tracking-widest
-- **Line Height**: Tight for headlines (leading-[0.9]), relaxed for body (leading-relaxed)
-
-### Radius & Border
-
-- **Radius**: Binary extremes—either `rounded-none` (0px) for squares/rectangles or `rounded-full` (9999px) for circles. No in-between rounded corners.
-- **Border Widths**:
-  - Mobile: `border-2` (2px)
-  - Desktop: `border-4` (4px)
-  - Navigation/Major divisions: `border-b-4` (4px bottom border)
-- **Border Color**: Always `#121212` (black) for maximum contrast
-
-### Shadows/Effects
-
-- **Hard Offset Shadows** (inspired by Bauhaus layering):
-  - Small: `shadow-[3px_3px_0px_0px_black]` or `shadow-[4px_4px_0px_0px_black]`
-  - Medium: `shadow-[6px_6px_0px_0px_black]`
-  - Large: `shadow-[8px_8px_0px_0px_black]`
-- **Button Press Effect**: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-none` (simulates physical button press)
-- **Card Hover**: `hover:-translate-y-1` or `hover:-translate-y-2` (subtle lift)
-- **Patterns**: Use CSS background patterns for texture
-  - Dot grid: `radial-gradient(#fff 2px, transparent 2px)` with `background-size: 20px 20px`
-  - Opacity overlays: Large geometric shapes at 10-20% opacity for background decoration
-
-## 3. Component Stylings
-
-### Buttons
-
-- **Variants**:
-  - **Primary** (Red): `bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
-  - **Secondary** (Blue): `bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
-  - **Yellow**: `bg-[#F0C020] text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
-  - **Outline**: `bg-white text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
-  - **Ghost**: `border-none text-black hover:bg-gray-200`
-- **Shapes**: Either `rounded-none` (square) or `rounded-full` (pill). Use shape variants deliberately.
-- **States**:
-  - Hover: Slight opacity change (`hover:bg-[color]/90`)
-  - Active: Button "presses down" (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
-  - Focus: 2px offset ring
-- **Typography**: Uppercase, font-bold, tracking-wider
-
-### Cards
-
-- **Base Style**: White background, `border-4 border-black`, `shadow-[8px_8px_0px_0px_black]`
-- **Decoration**: Small geometric shape in top-right corner (8px x 8px):
-  - Circle: `rounded-full bg-[primary-color]`
-  - Square: `rounded-none bg-[primary-color]`
-  - Triangle: CSS clip-path `polygon(50% 0%, 0% 100%, 100% 100%)`
-- **Hover**: `hover:-translate-y-1` (subtle lift effect)
-- **Content Hierarchy**: Large bold titles, medium body text, generous padding
-
-### Accordion (FAQ)
-
-- **Closed State**: White background, `border-4 border-black`, `shadow-[4px_4px_0px_0px_black]`
-- **Open State**: Red background (`bg-[#D02020]`), white text for header
-- **Expanded Content**: Light yellow background (`bg-[#FFF9C4]`), black text, `border-t-4 border-black`
-- **Icon**: ChevronDown with `rotate-180` when open
-
-## 4. Layout & Spacing
-
-- **Container Width**: `max-w-7xl` for main content sections (creates poster-like breadth)
-- **Section Padding**:
-  - Mobile: `py-12 px-4`
-  - Tablet: `py-16 px-6`
-  - Desktop: `py-24 px-8`
-- **Grid Systems**:
-  - Stats: 1-column (mobile) → 2-column (tablet) → 4-column (desktop) with `divide-y` and `divide-x` borders
-  - Features: 1-column → 2-column → 3-column with 8px gaps
-  - Pricing: 1-column → 3-column (center elevated on desktop)
-- **Spacing Scale**: Consistent use of 4px, 8px, 12px, 16px, 24px
-- **Section Dividers**: Every section has `border-b-4 border-black` creating strong horizontal rhythm
-
-## 5. Non-Genericness (Bold Choices)
-
-**This design MUST NOT look like generic Tailwind or Bootstrap. The following are mandatory:**
-
-- **Color Blocking**: Entire sections use solid primary colors as backgrounds:
-
-  - Hero right panel: Blue (`bg-[#1040C0]`)
-  - Stats section: Yellow (`bg-[#F0C020]`)
-  - Blog section: Blue (`bg-[#1040C0]`)
-  - Benefits section: Red (`bg-[#D02020]`)
-  - Final CTA: Yellow (`bg-[#F0C020]`)
-  - Footer: Near-black (`bg-[#121212]`)
-- **Geometric Logo**: Navigation features three geometric shapes (circle, square, triangle) in primary colors forming the brand identity
-- **Geometric Compositions**: Use abstract compositions of overlapping shapes:
-
-  - Hero right panel: Overlapping circle, rotated square, and centered square with triangle
-  - Product Detail: Abstract geometric "face" constructed from circles, squares, and diagonal line
-  - Final CTA: Large decorative shapes (circle and rotated square) at 50% opacity in corners
-- **Rotated Elements**: Deliberate 45° rotation on:
-
-  - Every 3rd shape in repeating patterns
-  - Step numbers in "How It Works" (counter-rotate inner content)
-  - Decorative background shapes
-- **Image Treatments**:
-
-  - Blog images: Alternate between `rounded-full` and `rounded-none`, grayscale filter with `hover:grayscale-0`
-  - Testimonial avatars: Circular crop with `rounded-full` and grayscale filter
-- **Unique Decorations**: Small geometric shapes (8px-16px) as corner decorations on cards, using the three primary colors in rotation
-
-## 6. Icons & Imagery
-
-- **Icon Library**: `lucide-react` (Circle, Square, Triangle, Check, Quote, ArrowRight, ChevronDown)
-- **Icon Style**:
-  - Stroke width: 2px (default) or 3px (emphasis)
-  - Size: h-6 w-6 to h-8 w-8
-  - Color: Match section accent color or white on colored backgrounds
-- **Icon Integration**: Icons placed inside bordered geometric containers:
-  - Features: Icon in white bordered box with shadow
-  - Benefits: Check icon in yellow circular badge
-  - Stats: Numbers in geometric shapes (circle/square/rotated square)
-- **Image Treatment**: All images use grayscale filter by default, color on hover
-
-## 7. Responsive Strategy
-
-- **Mobile-First Approach**: Start with single-column layouts, expand to grids on larger screens
-- **Breakpoints**:
-  - Mobile: < 640px (sm)
-  - Tablet: 640px - 1024px (sm to lg)
-  - Desktop: > 1024px (lg+)
-- **Typography Scaling**: All text uses responsive classes (text-4xl sm:text-6xl lg:text-8xl)
-- **Border/Shadow Scaling**: Reduce border and shadow sizes on mobile (border-2 → border-4, shadow-[3px] → shadow-[8px])
-- **Navigation**: Hamburger menu button on mobile (< 768px), full nav on desktop
-- **Grid Adaptations**:
-  - Stats: 1 col → 2 col (sm) → 4 col (lg)
-  - Features: 1 col → 2 col (md) → 3 col (lg)
-  - How It Works: 1 col → 2 col (sm) → 4 col (md), hide connecting line on mobile
-
-## 8. Animation & Micro-Interactions
-
-- **Feel**: Mechanical, snappy, geometric (no soft organic movement)
-- **Transition Duration**: `duration-200` or `duration-300` (fast and decisive)
-- **Easing**: `ease-out` (mechanical feel)
-- **Interactions**:
-  - Button press: Translate and remove shadow (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
-  - Card hover: Lift upward (`hover:-translate-y-1` or `hover:-translate-y-2`)
-  - Accordion: ChevronDown rotation (`rotate-180`) and content reveal with max-height transition
-  - Icon hover: Scale up on grouped shapes (`group-hover:scale-110`)
-  - Link hover: Color change to accent color
-- **Background Patterns**: Static (no animation on patterns)
-  `</design-system>`
+<design-system>
+# Design Style: Bauhaus
+
+## 1. Design Philosophy
+
+The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. This is **constructivist modernism**—every element is deliberately composed from circles, squares, and triangles. The aesthetic should evoke 1920s Bauhaus posters: bold, asymmetric, architectural, and unapologetically graphic.
+
+**Vibe**: Constructivist, Geometric, Modernist, Artistic-yet-Functional, Bold, Architectural
+
+**Core Concept**: The interface is not merely a layout—it is a **geometric composition**. Every section is constructed rather than designed. Think of the page as a Bauhaus poster brought to life: shapes overlap, borders are thick and deliberate, colors are pure primaries (Red #D02020, Blue #1040C0, Yellow #F0C020), and everything is grounded by stark black (#121212) and clean white.
+
+**Key Characteristics**:
+
+- **Geometric Purity**: All decorative elements derive from circles, squares, and triangles
+- **Hard Shadows**: 4px and 8px offset shadows (never soft/blurred) create depth through layering
+- **Color Blocking**: Entire sections use solid primary colors as backgrounds
+- **Thick Borders**: 2px and 4px black borders define every major element
+- **Asymmetric Balance**: Grids are used but intentionally broken with overlapping elements
+- **Constructivist Typography**: Massive uppercase headlines (text-6xl to text-8xl) with tight tracking
+- **Functional Honesty**: No gradients, no subtle effects—everything is direct and declarative
+
+## 2. Design Token System (The DNA)
+
+### Colors (Single Palette - Light Mode)
+
+The palette is strictly limited to the Bauhaus primaries, plus stark black and white.
+
+- `background`: `#F0F0F0` (Off-white canvas)
+- `foreground`: `#121212` (Stark Black)
+- `primary-red`: `#D02020` (Bauhaus Red)
+- `primary-blue`: `#1040C0` (Bauhaus Blue)
+- `primary-yellow`: `#F0C020` (Bauhaus Yellow)
+- `border`: `#121212` (Thick, distinct borders)
+- `muted`: `#E0E0E0`
+
+### Typography
+
+- **Font Family**: **'Outfit'** (geometric sans-serif from Google Fonts). This typeface's circular letterforms and clean geometry perfectly embody Bauhaus principles.
+- **Font Import**: `Outfit:wght@400;500;700;900`
+- **Scaling**: Extreme contrast between display and body text
+  - Display: text-4xl (mobile) → text-6xl (tablet) → text-8xl (desktop)
+  - Subheadings: text-2xl → text-3xl → text-4xl
+  - Body: text-base → text-lg
+- **Weights**:
+  - Headlines: font-black (900) with uppercase and tracking-tighter
+  - Subheadings: font-bold (700) with uppercase
+  - Body: font-medium (500) for readability
+  - Labels: font-bold (700) with uppercase and tracking-widest
+- **Line Height**: Tight for headlines (leading-[0.9]), relaxed for body (leading-relaxed)
+
+### Radius & Border
+
+- **Radius**: Binary extremes—either `rounded-none` (0px) for squares/rectangles or `rounded-full` (9999px) for circles. No in-between rounded corners.
+- **Border Widths**:
+  - Mobile: `border-2` (2px)
+  - Desktop: `border-4` (4px)
+  - Navigation/Major divisions: `border-b-4` (4px bottom border)
+- **Border Color**: Always `#121212` (black) for maximum contrast
+
+### Shadows/Effects
+
+- **Hard Offset Shadows** (inspired by Bauhaus layering):
+  - Small: `shadow-[3px_3px_0px_0px_black]` or `shadow-[4px_4px_0px_0px_black]`
+  - Medium: `shadow-[6px_6px_0px_0px_black]`
+  - Large: `shadow-[8px_8px_0px_0px_black]`
+- **Button Press Effect**: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-none` (simulates physical button press)
+- **Card Hover**: `hover:-translate-y-1` or `hover:-translate-y-2` (subtle lift)
+- **Patterns**: Use CSS background patterns for texture
+  - Dot grid: `radial-gradient(#fff 2px, transparent 2px)` with `background-size: 20px 20px`
+  - Opacity overlays: Large geometric shapes at 10-20% opacity for background decoration
+
+## 3. Component Stylings
+
+### Buttons
+
+- **Variants**:
+  - **Primary** (Red): `bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
+  - **Secondary** (Blue): `bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]`
+  - **Yellow**: `bg-[#F0C020] text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
+  - **Outline**: `bg-white text-black border-2 border-black shadow-[4px_4px_0px_0px_black]`
+  - **Ghost**: `border-none text-black hover:bg-gray-200`
+- **Shapes**: Either `rounded-none` (square) or `rounded-full` (pill). Use shape variants deliberately.
+- **States**:
+  - Hover: Slight opacity change (`hover:bg-[color]/90`)
+  - Active: Button "presses down" (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
+  - Focus: 2px offset ring
+- **Typography**: Uppercase, font-bold, tracking-wider
+
+### Cards
+
+- **Base Style**: White background, `border-4 border-black`, `shadow-[8px_8px_0px_0px_black]`
+- **Decoration**: Small geometric shape in top-right corner (8px x 8px):
+  - Circle: `rounded-full bg-[primary-color]`
+  - Square: `rounded-none bg-[primary-color]`
+  - Triangle: CSS clip-path `polygon(50% 0%, 0% 100%, 100% 100%)`
+- **Hover**: `hover:-translate-y-1` (subtle lift effect)
+- **Content Hierarchy**: Large bold titles, medium body text, generous padding
+
+### Accordion (FAQ)
+
+- **Closed State**: White background, `border-4 border-black`, `shadow-[4px_4px_0px_0px_black]`
+- **Open State**: Red background (`bg-[#D02020]`), white text for header
+- **Expanded Content**: Light yellow background (`bg-[#FFF9C4]`), black text, `border-t-4 border-black`
+- **Icon**: ChevronDown with `rotate-180` when open
+
+## 4. Layout & Spacing
+
+- **Container Width**: `max-w-7xl` for main content sections (creates poster-like breadth)
+- **Section Padding**:
+  - Mobile: `py-12 px-4`
+  - Tablet: `py-16 px-6`
+  - Desktop: `py-24 px-8`
+- **Grid Systems**:
+  - Stats: 1-column (mobile) → 2-column (tablet) → 4-column (desktop) with `divide-y` and `divide-x` borders
+  - Features: 1-column → 2-column → 3-column with 8px gaps
+  - Pricing: 1-column → 3-column (center elevated on desktop)
+- **Spacing Scale**: Consistent use of 4px, 8px, 12px, 16px, 24px
+- **Section Dividers**: Every section has `border-b-4 border-black` creating strong horizontal rhythm
+
+## 5. Non-Genericness (Bold Choices)
+
+**This design MUST NOT look like generic Tailwind or Bootstrap. The following are mandatory:**
+
+- **Color Blocking**: Entire sections use solid primary colors as backgrounds:
+
+  - Hero right panel: Blue (`bg-[#1040C0]`)
+  - Stats section: Yellow (`bg-[#F0C020]`)
+  - Blog section: Blue (`bg-[#1040C0]`)
+  - Benefits section: Red (`bg-[#D02020]`)
+  - Final CTA: Yellow (`bg-[#F0C020]`)
+  - Footer: Near-black (`bg-[#121212]`)
+- **Geometric Logo**: Navigation features three geometric shapes (circle, square, triangle) in primary colors forming the brand identity
+- **Geometric Compositions**: Use abstract compositions of overlapping shapes:
+
+  - Hero right panel: Overlapping circle, rotated square, and centered square with triangle
+  - Product Detail: Abstract geometric "face" constructed from circles, squares, and diagonal line
+  - Final CTA: Large decorative shapes (circle and rotated square) at 50% opacity in corners
+- **Rotated Elements**: Deliberate 45° rotation on:
+
+  - Every 3rd shape in repeating patterns
+  - Step numbers in "How It Works" (counter-rotate inner content)
+  - Decorative background shapes
+- **Image Treatments**:
+
+  - Blog images: Alternate between `rounded-full` and `rounded-none`, grayscale filter with `hover:grayscale-0`
+  - Testimonial avatars: Circular crop with `rounded-full` and grayscale filter
+- **Unique Decorations**: Small geometric shapes (8px-16px) as corner decorations on cards, using the three primary colors in rotation
+
+## 6. Icons & Imagery
+
+- **Icon Library**: `lucide-react` (Circle, Square, Triangle, Check, Quote, ArrowRight, ChevronDown)
+- **Icon Style**:
+  - Stroke width: 2px (default) or 3px (emphasis)
+  - Size: h-6 w-6 to h-8 w-8
+  - Color: Match section accent color or white on colored backgrounds
+- **Icon Integration**: Icons placed inside bordered geometric containers:
+  - Features: Icon in white bordered box with shadow
+  - Benefits: Check icon in yellow circular badge
+  - Stats: Numbers in geometric shapes (circle/square/rotated square)
+- **Image Treatment**: All images use grayscale filter by default, color on hover
+
+## 7. Responsive Strategy
+
+- **Mobile-First Approach**: Start with single-column layouts, expand to grids on larger screens
+- **Breakpoints**:
+  - Mobile: < 640px (sm)
+  - Tablet: 640px - 1024px (sm to lg)
+  - Desktop: > 1024px (lg+)
+- **Typography Scaling**: All text uses responsive classes (text-4xl sm:text-6xl lg:text-8xl)
+- **Border/Shadow Scaling**: Reduce border and shadow sizes on mobile (border-2 → border-4, shadow-[3px] → shadow-[8px])
+- **Navigation**: Hamburger menu button on mobile (< 768px), full nav on desktop
+- **Grid Adaptations**:
+  - Stats: 1 col → 2 col (sm) → 4 col (lg)
+  - Features: 1 col → 2 col (md) → 3 col (lg)
+  - How It Works: 1 col → 2 col (sm) → 4 col (md), hide connecting line on mobile
+
+## 8. Animation & Micro-Interactions
+
+- **Feel**: Mechanical, snappy, geometric (no soft organic movement)
+- **Transition Duration**: `duration-200` or `duration-300` (fast and decisive)
+- **Easing**: `ease-out` (mechanical feel)
+- **Interactions**:
+  - Button press: Translate and remove shadow (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`)
+  - Card hover: Lift upward (`hover:-translate-y-1` or `hover:-translate-y-2`)
+  - Accordion: ChevronDown rotation (`rotate-180`) and content reveal with max-height transition
+  - Icon hover: Scale up on grouped shapes (`group-hover:scale-110`)
+  - Link hover: Color change to accent color
+- **Background Patterns**: Static (no animation on patterns)
+  `</design-system>`