Brutalist Landing

# Brutalist Landing Page

Create a bold, raw landing page that rejects conventional polish in favor of stark typography, exposed structure, and unapologetic aesthetics.

## Design Specifications

**Style**: Web brutalism / Neo-brutalism
**Typography**: Heavy, oversized, often system fonts or grotesque sans-serifs
**Layout**: Exposed grid, intentional rawness, no hiding of structure
**Colors**: High contrast, often black/white with single accent color

## Prompt for AI Code Generation

```
Build a brutalist landing page with these characteristics:

LAYOUT:
- Full viewport hero section with massive typography
- Visible grid structure (borders on containers, exposed padding)
- Asymmetric layouts with intentional visual tension
- No rounded corners anywhere
- Thick borders (2-4px) as primary visual element

TYPOGRAPHY:
- Hero headline: 80-120px, uppercase, tight letter-spacing (-0.02em)
- Body text: 16-18px, generous line-height (1.6+)
- Font stack: Arial, Helvetica, system-ui (embrace "ugly" fonts)
- All caps for navigation and labels
- Mix of extremely large and normal-sized text

COLORS:
- Background: Pure white (#FFFFFF) or off-white (#F5F5F5)
- Text: Pure black (#000000)
- Accent: Single bold color (e.g., electric blue #0000FF, warning yellow #FFFF00)
- No gradients, no subtle grays

INTERACTIONS:
- Hover states: Color inversion (black becomes white, white becomes black)
- Cursor changes: pointer for all interactive elements
- No smooth transitions - instant state changes
- Underlines on links (visible, not hidden)

SECTIONS TO INCLUDE:
1. Hero with oversized headline and single CTA
2. Feature grid with thick borders
3. Testimonial with massive quotation marks
4. Pricing table with stark comparison
5. Footer with exposed sitemap structure

TECHNICAL:
- No shadows
- No border-radius
- box-sizing: border-box everywhere
- CSS Grid for layout
- Monospace font for code/technical elements
```

## Example React Component Structure

```tsx
export default function BrutalistLanding() {
  return (
    <main className="min-h-screen bg-white text-black">
      {/* Hero */}
      <section className="flex min-h-screen items-center border-b-4 border-black p-8">
        <h1 className="text-[clamp(3rem,15vw,12rem)] leading-none font-bold tracking-tighter uppercase">
          Build
          <br />
          Something
          <br />
          Raw
        </h1>
      </section>

      {/* Features Grid */}
      <section className="grid grid-cols-1 md:grid-cols-3">
        {features.map((feature, i) => (
          <div key={i} className="border-4 border-black p-8 hover:bg-black hover:text-white">
            <span className="font-mono text-6xl">{String(i + 1).padStart(2, '0')}</span>
            <h3 className="mt-4 text-2xl font-bold uppercase">{feature.title}</h3>
            <p className="mt-2">{feature.description}</p>
          </div>
        ))}
      </section>

      {/* CTA */}
      <section className="border-4 border-black p-8 text-center">
        <button className="border-4 border-black bg-black px-12 py-4 text-xl font-bold text-white uppercase hover:bg-white hover:text-black">
          Get Started
        </button>
      </section>
    </main>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-accent: #0000ff;
  --border-width: 4px;
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-mono: 'Courier New', monospace;
}

* {
  border-radius: 0 !important;
}

a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

button {
  transition: none;
}
```

## Key Principles

1. **Reject polish**: If it looks "too designed," simplify it
2. **Embrace rawness**: System fonts, visible borders, no decorative elements
3. **High contrast**: Black and white with bold accent
4. **Honest structure**: Show the grid, don't hide the boxes
5. **Instant feedback**: No transition animations on hover states