For: Enterprise AI Studio Project
Category: Reactions Against Swiss Design
Neo-Brutalism is a digital design movement inspired by Brutalist architecture—raw, honest, stripped-down aesthetics that reject corporate polish. In web design, it manifests as:
Historical Context:
Search these for reference examples:
Primary Colors:
#000000) - dominant#FFFFFF) - contrast#FF0000, blue #0000FF, yellow #FFFF00) - used sparingly for impactSecondary Colors:
#808080, #CCCCCC)Usage Patterns:
Font Families:
Courier New, Consolas, Monaco)Type Scale:
Typography Style:
Grid System:
Layout Patterns:
Spacing Philosophy:
Spacing Scale:
4px - minimal gaps8px - standard between elements16px - section separators24px - major breaksAvoid: Generous white space feels too refined
/* Neo-Brutalist Button */
background: #FFFF00;
color: #000000;
border: 3px solid #000000;
padding: 12px 24px;
font-weight: bold;
text-transform: uppercase;
box-shadow: 4px 4px 0 #000000; /* Offset shadow, not subtle */
transition: none; /* No smooth animations */
/* Hover: shift shadow */
hover {
box-shadow: 2px 2px 0 #000000;
transform: translate(2px, 2px);
}
/* Neo-Brutalist Card */
background: #FFFFFF;
border: 4px solid #000000;
padding: 16px;
box-shadow: 8px 8px 0 #000000; /* Hard shadow */
/* No border-radius */
/* No subtle shadows */
/* Neo-Brutalist Nav */
background: #000000;
color: #FFFFFF;
border-bottom: 5px solid #FF0000;
/* Raw link styling */
links: uppercase, underline, no hover fade
Use these prompts with AI when building your Neo-Brutalist site.
Transform the Swiss site's homepage to Neo-Brutalism style:
1. **Color Palette:**
- Replace Swiss red with bright yellow (#FFFF00) for accents
- Use stark black (#000000) and white (#FFFFFF)
- Remove all grays and subtle colors
- Ensure high contrast everywhere
2. **Typography:**
- Change to system fonts (Arial, Courier for code)
- Make headings ALL CAPS and very large (60-72px)
- Tighten line-height to 1.2-1.3
- Remove all letter-spacing adjustments
- Add thick underlines to links
3. **Layout:**
- Add 4-5px black borders around all sections
- Remove border-radius (make everything 90° angles)
- Expose the grid (add visible grid lines)
- Make spacing tighter (reduce padding by 40%)
- Add hard box-shadows (8px 8px 0 #000) instead of subtle shadows
4. **Components:**
- Transform buttons to have thick borders, bright backgrounds, hard shadows
- Make navigation raw (black background, white text, no subtlety)
- Remove all smooth transitions (instant state changes)
Reference `docs/design-system.md` for specific values. Make it feel raw and unrefined.
Acting as a Neo-Brutalist design expert, critique this [component] screenshot.
Check for:
1. **Rawness:** Does it feel unrefined enough? Too polished?
2. **Honesty:** Is structure exposed? Can you see the "bones"?
3. **Anti-corporate:** Would a corporate brand reject this (good sign)?
4. **Borders:** Are borders thick enough (3-5px)? Black?
5. **Shadows:** Are shadows hard and offset (not subtle blur)?
6. **Typography:** ALL CAPS for emphasis? System fonts? Tight line-height?
Be brutal (pun intended). If it looks too nice, it's wrong.
Compare these screenshots to Neo-Brutalist reference examples from brutalistwebsites.com.
Rate 1-10 for Neo-Brutalist authenticity:
- **Rawness** (1=too polished, 10=perfectly rough)
- **Honesty** (1=hides structure, 10=exposes everything)
- **Anti-design** (1=looks corporate, 10=deliberately ugly)
- **Functional minimalism** (1=decorative, 10=pure function)
For anything below 8, explain what's too refined and how to make it more Brutalist.
Wrong: Subtle shadows, rounded corners, smooth gradients
Right: Hard shadows, 90° angles, flat colors
Why it’s wrong: Neo-Brutalism rejects refinement. If it looks “nice,” you’re doing it wrong.
Wrong: Full rainbow palette, pastels, muted tones
Right: Black, white, one or two bright accent colors
Why it’s wrong: Neo-Brutalism is stark and high-contrast, not colorful and playful.
Wrong: Lots of padding, airy layouts, generous margins
Right: Tight, packed, intentionally cramped
Why it’s wrong: Swiss design is generous with space. Neo-Brutalism reacts against that—pack it in.
Wrong: Fade transitions, ease-in-out curves, smooth hovers
Right: Instant state changes, hard snaps, no transitions
Why it’s wrong: Smoothness = polish = corporate. Neo-Brutalism is abrupt and honest.
Wrong: Seamless sections, invisible grids, flowing layouts
Right: Visible borders, exposed grid, compartmentalized boxes
Why it’s wrong: Neo-Brutalism shows the structure honestly. If you hide the grid, you’re not being Brutalist.
Use this when reviewing your site:
If you check all of these, you’re on the right track.
Understand what you’re transforming FROM:
| Aspect | Swiss Design | Neo-Brutalism |
|---|---|---|
| Grid | Invisible, mathematical | Visible, exposed |
| Spacing | Generous white space | Tight, packed |
| Typography | Refined hierarchy | Abrupt contrast |
| Colors | Minimal, refined palette | Stark black/white + bright accents |
| Borders | Thin or absent | Thick, black, dominant |
| Shadows | None or subtle | Hard, offset |
| Corners | Clean, sometimes subtle radius | Sharp 90° angles |
| Philosophy | Perfection, clarity | Honesty, rawness |
| Feel | Professional, elegant | Rough, rebellious |
Your job: Transform the left column into the right column while maintaining technical quality.
“Generate an image of a modern portfolio website in Neo-Brutalist style. Black and white dominant colors, thick black borders around sections, harsh 90° angles, system fonts in ALL CAPS for headings, tight spacing, hard box shadows, raw and unrefined aesthetic.”
Use prompt templates above when working with AI
Remember: Neo-Brutalism is deliberately rough, anti-corporate, and honest about structure. If it looks too polished or professional, you’re not there yet. Embrace the ugliness. That’s the point. 🏗️
Document Version: 1.0
Last Updated: November 5, 2025
Project: Swiss Design Lineage Vibe Coding
Instructor: Keith Williams, NJIT