Neo Brutalist

# Neo Brutalist

## Design Philosophy

Neo Brutalist rejects the polished, rounded, gradient-soaked aesthetic that dominates modern web design. Instead, it embraces **raw honesty** — thick borders, stark contrasts, exposed structure, and zero ornamentation.

The philosophy is simple: if the structure is the design, there's nothing to hide. Every element wears its purpose on its sleeve. Buttons look like buttons. Cards look like boxes. Navigation looks like a menu. There's no ambiguity, no metaphor, no skeuomorphism — just function made visible.

## Design Goals

- Create an instantly recognizable, memorable visual identity
- Achieve maximum readability through stark contrast
- Celebrate structure rather than concealing it
- Prove that "ugly" can be beautiful when executed with intention
- Make interfaces that feel handmade, human, and anti-corporate

## Visual Language

The visual language is **unapologetically raw**. Every element has a 2-3px solid black border. Shadows are hard-offset with no blur (`4px 4px 0px #000`). Border-radius is universally zero. Typography is monospace, reinforcing the technical, DIY aesthetic.

Backgrounds are stark white. Color appears only as accent — primarily red (`#dc2626`) for emphasis. The overall effect is reminiscent of printed zines, construction signage, and early computer interfaces.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#ffffff` | Page background             |
| surface         | `#ffffff` | Card backgrounds            |
| primary         | `#000000` | Text, borders, icons        |
| secondary       | `#dc2626` | Accents, emphasis           |
| text            | `#000000` | All text                    |
| text-muted      | `#525252` | Secondary text              |
| border          | `#000000` | All borders                 |
| accent-red      | `#dc2626` | CTAs, badges, alerts        |
| surface-alt     | `#f5f5f5` | Alternating sections        |

## Typography

- **Primary Font:** JetBrains Mono
- **Fallback:** Courier New, monospace
- **Heading Scale:** `clamp(2rem, 5vw, 3.5rem)` for H1
- **Body Size:** 15px, line-height 1.5
- **Font Weights:** 400 (body), 700 (headings, emphasis)
- **Uppercase:** Used for labels and navigation items
- **Letter Spacing:** 0.05em for uppercase text

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Tight inline gaps        |
| sm    | 8px    | Component internals      |
| md    | 16px   | Card padding             |
| lg    | 24px   | Section padding          |
| xl    | 32px   | Major spacing            |
| 2xl   | 48px   | Section gaps             |
| 3xl   | 64px   | Hero spacing             |

## Border Radius

**Universal: 0px** — No rounded corners anywhere. Every element is a sharp rectangle.

## Shadows

```css
.brutal-shadow {
  box-shadow: 4px 4px 0px 0px #000000;
}
.brutal-elevated {
  box-shadow: 6px 6px 0px 0px #000000;
}
.brutal-hover {
  box-shadow: 8px 8px 0px 0px #000000;
}
```

On hover, elements shift up-left by 2px and shadow grows — creating a physical "lifting" effect.

## Gradients

None. Gradients are antithetical to the brutalist aesthetic. All color is flat and solid.

## Layout

- **Container:** max-width 960px, centered, 16px padding
- **Grid:** CSS Grid with visible grid lines (border on grid items)
- **Section Spacing:** 0 — sections separated by borders, not whitespace
- **Breakpoints:**
  - Mobile: < 640px (single column, full borders)
  - Tablet: 640px–1024px (two columns)
  - Desktop: > 1024px (three columns)

## Components

### Navbar
- Solid black bar, white text
- 56px height, fixed top
- Logo left, links center-right
- All links uppercase, letter-spacing 0.05em
- Bottom border 3px solid black

### Hero
- Full-width black background
- White text, maximum size
- Red accent line or block
- CTA: white button with black border and offset shadow

### Buttons
- White background, black border (3px)
- Black offset shadow (4px)
- Hover: shadow grows to 8px, button translates -2px
- Active: shadow becomes 0px, button translates 4px (pressed)
- Red variant: red background, white text

### Cards
- White background, 3px black border
- 4px black offset shadow
- 16px internal padding
- Title in bold monospace
- Hover: shadow grows, card lifts

### Forms
- Inputs: white background, 3px black border, no radius
- Focus: red border instead of black
- Labels: uppercase, letter-spacing 0.05em
- Error states: red background on input

### Footer
- Black background, white text
- 3px top border
- Uppercase links

## Animation

- **Duration:** 100ms for interactions
- **Easing:** `linear` — no easing curves, everything is mechanical
- **Hover Effects:** Translate -2px, shadow grows from 4px to 8px
- **Active Effects:** Translate 4px, shadow becomes 0 (pressed feel)
- **Entrance:** None — content appears immediately
- **Transitions:** `transform 100ms linear, box-shadow 100ms linear`

## Responsive Rules

- **Mobile (< 640px):** Single column, full-width cards, 16px padding, hamburger menu
- **Tablet (640px–1024px):** Two columns, border on every grid cell
- **Desktop (> 1024px):** Three columns, maximum visual density
- **Touch devices:** Shadow effects reduced to 2px for tap targets

## Accessibility

- Black on white exceeds WCAG AAA (21:1 contrast)
- Focus indicators: 3px red outline with 4px offset
- All interactive elements have minimum 44px touch targets
- Screen reader: explicit labels on all icon-only buttons
- Reduced motion: disables translate animations, keeps static shadows

## Performance

- Zero image dependencies — all visuals are CSS
- No JavaScript for visual effects
- System monospace font for zero font-loading time
- Hard shadows are GPU-friendly
- Minimal CSS — total stylesheet under 5KB

## Implementation Rules

1. Never use border-radius — zero tolerance for curves
2. All shadows must be hard-offset, zero blur
3. Text must be black on white or white on black — no exceptions
4. Every interactive element must have visible hover AND active states
5. Grid borders must be visible — the structure IS the design
6. Use `transform: translate()` for hover effects, never margin