Bauhaus Style

# Bauhaus Design Style

## Design Philosophy

The Bauhaus style embodies "form follows function" with pure geometric beauty. Think 1920s Bauhaus posters: bold, asymmetric, architectural, unapologetically graphic.

**Core Concept**: The interface is a geometric composition. Shapes overlap, borders are thick and deliberate, colors are pure primaries: Red #D02020, Blue #1040C0, Yellow #F0C020, grounded by stark black #121212.

## Design Tokens

### Colors
- background: #F0F0F0 (Off-white canvas)
- foreground: #121212 (Stark Black)
- primary-red: #D02020
- primary-blue: #1040C0
- primary-yellow: #F0C020
- border: #121212 (Thick, distinct)

### Typography
- Font: 'Outfit' (geometric sans-serif)
- Display: text-8xl, font-weight 900, tracking-tighter, uppercase
- Body: text-base, font-weight 400, line-height 1.6
- UI Labels: text-xs, font-weight 700, uppercase, letter-spacing 0.15em

## Layout Rules
- Hard shadows: 4px and 8px offset (never soft/blurred)
- Color blocking: entire sections use solid primary colors
- Thick borders: 2px and 4px black borders on every element
- Asymmetric grids intentionally broken with overlapping elements
- No gradients, no subtle effects — everything direct and declarative

## Components

### Geometric Accent Block
Position: absolute. Width/Height: 120px. Background: #D02020 (Red).
Transform: rotate(45deg). Z-index: below content. No border-radius.

### Hard Shadow Card
Background: #FFFFFF. Border: 2px solid #121212.
Box-shadow: 8px 8px 0px #121212. No border-radius. Transition: 0.15s.
On hover: transform translate(-2px, -2px); box-shadow: 10px 10px 0px #121212.