# Brutalist / Neo-Brutalist Aesthetic

Raw. Bold. Unconventional. Brutalism rejects polish in favor of impact. It's the visual equivalent of saying something so directly it makes people uncomfortable — then owning it.

## Critical Self-Assessment

**Why this deserves a template:**
- ✅ Major web/graphic design trend crossing to video
- ✅ Extremely distinctive (impossible to confuse with other styles)
- ✅ Strong use cases (fashion, art, editorial, bold statements)
- ✅ Achievable in Remotion (typography-driven, no special assets)
- ✅ Fills a gap (we have no "raw/unconventional" option)

**When NOT to use:**
- Corporate/enterprise (too rebellious)
- Healthcare (feels harsh)
- Children's content (too intense)
- Brands that need to feel "safe" or "friendly"

---

## Core Philosophy

**Reject the polish.** Where other styles smooth edges, brutalism sharpens them.

| Polished Design | Brutalist Design |
|-----------------|------------------|
| Balanced layouts | Intentional imbalance |
| Subtle animations | Harsh cuts, no easing |
| Harmonious colors | Clashing or monochrome |
| Rounded corners | Sharp edges, boxes |
| Comfortable spacing | Cramped or extreme spacing |
| "Pretty" | "Powerful" |

---

## Typography Rules

### 1. MASSIVE Type
Headlines dominate. If it doesn't feel "too big," it's not big enough.

```tsx
const BrutalistHeadline = ({ children }: { children: string }) => (
  <h1 style={{
    fontFamily: "'Helvetica Neue', 'Arial Black', sans-serif",
    fontSize: 200, // Yes, 200px
    fontWeight: 900,
    lineHeight: 0.85, // Tight, overlapping
    textTransform: 'uppercase',
    letterSpacing: '-0.03em', // Slightly condensed
    color: '#000000',
  }}>
    {children}
  </h1>
);
```

### 2. Broken Grid
Text doesn't have to align. Let it overflow, overlap, break expectations.

```tsx
const BrokenLayout = () => (
  <div style={{ position: 'relative', width: '100%', height: '100%' }}>
    {/* Main headline - intentionally overflows */}
    <h1 style={{
      position: 'absolute',
      top: '10%',
      left: '-5%', // Bleeds off edge
      fontSize: 180,
      fontWeight: 900,
      width: '120%', // Wider than container
    }}>
      BREAK THE RULES
    </h1>
    
    {/* Secondary text - overlaps headline */}
    <p style={{
      position: 'absolute',
      top: '35%',
      right: '5%',
      fontSize: 24,
      fontWeight: 400,
      maxWidth: 300,
      textAlign: 'right',
    }}>
      Design is not about following conventions.
    </p>
  </div>
);
```

### 3. Mixed Sizes (Extreme)
Not just hierarchy — dramatic scale contrast.

```tsx
// "The BIG idea"
<>
  <span style={{ fontSize: 36 }}>The</span>
  <span style={{ fontSize: 200, fontWeight: 900 }}>BIG</span>
  <span style={{ fontSize: 36 }}>idea</span>
</>
```

### 4. Font Stacking
Mix weights, styles, even families within a sentence.

```tsx
const MixedType = () => (
  <p style={{ fontSize: 48 }}>
    <span style={{ fontWeight: 100 }}>Light</span>
    {' '}
    <span style={{ fontWeight: 900, fontStyle: 'italic' }}>BOLD ITALIC</span>
    {' '}
    <span style={{ fontFamily: 'Times New Roman', fontWeight: 400 }}>Serif</span>
    {' '}
    <span style={{ fontFamily: 'Courier', fontSize: 36 }}>mono</span>
  </p>
);
```

---

## Color Approach

### Option 1: Stark Monochrome
Black and white. Maximum contrast. No gray.

```tsx
const colors = {
  background: '#ffffff', // or #000000
  text: '#000000',       // or #ffffff
  // That's it. No accent. No gradient.
};
```

### Option 2: Harsh Clashing
Colors that "shouldn't" go together.

```tsx
const brutalistPalettes = {
  // Aggressive clash
  electric: {
    background: '#ff0000',
    text: '#00ff00',
    accent: '#0000ff',
  },
  // Neon on neutral
  neonBrutal: {
    background: '#e5e5e5',
    text: '#000000',
    accent: '#ff00ff',
  },
  // Dark with warning
  warning: {
    background: '#1a1a1a',
    text: '#ffffff',
    accent: '#ffff00',
  },
};
```

### Option 3: Newsprint
Aged paper feel, utilitarian.

```tsx
const newsprintPalette = {
  background: '#f5f0e6', // Off-white/cream
  text: '#1a1a1a',       // Near black
  accent: '#cc0000',     // Red like a newspaper
};
```

---

## Animation: Intentionally Harsh

Brutalism rejects smooth easing. Cuts are abrupt. Movements are direct.

### No Easing
```tsx
// ❌ Polished (what we usually do)
const smooth = spring({ frame, fps: 30, config: { damping: 15 } });

// ✅ Brutalist
const brutal = interpolate(frame, [0, 5], [0, 1], { 
  extrapolateRight: 'clamp',
  // No easing — linear, or use step function
});
```

### Hard Cuts
```tsx
// Element appears instantly, no fade
const HardCut = ({ children, showAt, frame }: Props) => {
  if (frame < showAt) return null;
  return <>{children}</>; // Just appears
};
```

### Flicker / Flash
Brief appearance and disappearance.

```tsx
const Flicker = ({ children, frame }: Props) => {
  // Flicker pattern: visible for 2 frames, gone for 1
  const flickerPattern = [1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1];
  const index = frame % flickerPattern.length;
  
  if (flickerPattern[index] === 0) return null;
  return <>{children}</>;
};
```

### Shake / Vibrate
Raw, unstable energy.

```tsx
const Shake = ({ children, intensity = 3 }: Props) => {
  const x = (Math.random() - 0.5) * intensity * 2;
  const y = (Math.random() - 0.5) * intensity * 2;
  
  return (
    <div style={{ transform: `translate(${x}px, ${y}px)` }}>
      {children}
    </div>
  );
};
```

---

## Layout Principles

### 1. Edge Bleeding
Elements go off-screen intentionally.

```tsx
<h1 style={{
  position: 'absolute',
  left: '-10%',   // Starts off-screen
  width: '120%',  // Extends off-screen
}}>
  OVERFLOW IS INTENTIONAL
</h1>
```

### 2. Extreme Margins
Either cramped (elements touching) or vast (huge empty space).

```tsx
// Cramped - elements overlap
.cramped { margin: -20px; }

// Vast - huge intentional emptiness  
.vast { margin: 200px; }
```

### 3. Asymmetry
Nothing centered. Balance is boring.

```tsx
// Everything pushed to edges or corners
<div style={{
  position: 'absolute',
  bottom: 20,
  right: 20,
  textAlign: 'right',
}}>
  {/* Content hugs bottom-right */}
</div>
```

### 4. Visible Structure
Show the grid, boxes, borders. Don't hide the skeleton.

```tsx
const VisibleBox = ({ children }: Props) => (
  <div style={{
    border: '3px solid #000000',
    padding: 20,
    // No border-radius — sharp corners
    // No box-shadow — flat
  }}>
    {children}
  </div>
);
```

---

## Font Choices

Brutalism favors utilitarian, no-nonsense fonts.

**Sans-Serif (Sharp):**
- Helvetica / Helvetica Neue
- Arial Black
- Impact
- Futura Bold
- Bebas Neue

**Serif (Editorial):**
- Times New Roman (yes, really)
- Georgia Bold
- Playfair Display

**Mono (Technical):**
- Courier
- JetBrains Mono
- IBM Plex Mono

**Display (Statement):**
- Knockout
- Druk
- GT America

---

## Sound Design

- **Music:** Industrial, noise, harsh electronic, or complete silence
- **SFX:** Hard cuts, static, mechanical sounds
- **No:** Gentle whooshes, pleasant chimes, smooth transitions

---

## Example Compositions

### 1. The Manifesto
```
┌─────────────────────────────────────┐
│                                     │
│  WE                                 │
│  DON'T                              │
│  DO                                 │
│  PRETTY.                            │  ← Each word on own line
│                                     │     Massive, left-aligned
│                          (we do     │  ← Small, right-aligned
│                           powerful) │     Contrast
│                                     │
└─────────────────────────────────────┘
```

### 2. The Clash
```
┌─────────────────────────────────────┐
│                                     │
│   ████████████████████████████████  │  ← Colored bars
│   THIS IS NOT    ████████████████   │
│   ███████████    A TEMPLATE         │
│   ████████████████████████████████  │
│                                     │
│   It's a statement.                 │  ← Tiny, understated
│                                     │
└─────────────────────────────────────┘
```

### 3. The Overlap
```
┌─────────────────────────────────────┐
│         BREAK                       │
│              BREAK                  │  ← Same word, offset
│                   BREAK             │     Creates motion/echo
│                        BREAK        │
│                                     │
│     the rules.                      │
└─────────────────────────────────────┘
```

---

## Quality Checklist

Before calling it "brutalist," verify:

- [ ] Is anything too "comfortable"? Make it uncomfortable.
- [ ] Could this be mistaken for a polished brand video? If yes, it's not brutal enough.
- [ ] Are animations smooth? Remove the easing.
- [ ] Is the layout balanced? Break it.
- [ ] Does the type feel "big enough"? Make it bigger.
- [ ] Would a traditional client be nervous about this? Good.

---

## When to Pull Back

Even brutalism has limits:
- Text must still be **readable** (legibility over aesthetics)
- The message must be **clear** (chaos with purpose, not chaos for chaos)
- Know your audience — brutalism polarizes by design

---

*Reference: Balenciaga campaigns, Bloomberg design, Ssense editorial, David Rudnick typography, brutalistwebsites.com*
