Bauhaus

# Bauhaus

<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: &lt; 640px (sm)

-   Tablet: 640px - 1024px (sm to lg)

-   Desktop: &gt; 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>