Neo-Brutalism Raw Interface

# Neo-Brutalism Raw Interface

## Philosophy

Neo-brutalism for interfaces treats digital surfaces like printed placards assembled from cut paper, tape, and exposed framing. It rejects polished neutrality in favor of obvious borders, offset shadows, compressed heavy headlines, and loud patches of color that make controls look physically grab-able. The result should feel direct, anti-corporate, and highly legible: the user always knows what is clickable because every important element declares itself with graphic force.

### Values

- Structural honesty through visible frames, dividers, and outlines instead of hidden chrome.
- Confrontational clarity where actions are obvious before the user reads supporting explanation.
- Graphic energy built from poster-scale type, hard contrast, and deliberate misregistration.
- Playful resistance to frictionless corporate sameness through raw but systematic composition.

### Anti-Values

- Soft luxury minimalism with dissolved boundaries.
- Atmospheric glass, blur, and gradient polish.
- Understated controls that disappear into neutral layouts.

### Visual Character

- Every panel and control uses thick 3px to 4px solid black borders with square or near-square corners, so containment is always visibly constructed rather than implied.
- Depth comes from hard offset box-shadows in black, typically shifted 4px to 8px down and right with zero blur, creating a screen-printed misregistration effect instead of soft elevation.
- Headlines use heavy uppercase display typography with tight leading and aggressive scale jumps, while micro-labels use tracked uppercase mono text like poster annotations.
- Layouts deliberately misalign selected cards or badges by a few pixels and overlap accent stickers across container edges, creating controlled collision without breaking the reading order.
- Accent color appears as large flat slabs of acid yellow, hot pink, and electric blue against off-white paper backgrounds, with each region choosing one dominant fill rather than blending many soft tones.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#FFD400` |
| secondary | `#FF4F8B` |
| accent | `#1769FF` |
| background | `#FFF9F0` |
| surface | `#FFFFFF` |
| text | `#111111` |
| muted | `#EDE1CF` |
| border | `#111111` |
| error | `#FF5A36` |
| success | `#16A34A` |
| warning | `#F59E0B` |
| info | `#1769FF` |

### Typography

- **Heading Font**: Archivo Black
- **Body Font**: Space Grotesk
- **Mono Font**: IBM Plex Mono
- **Base Size**: 17px
- **Scale Ratio**: 1.25
- **Line Height**: 1.45
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0px
- **Sm**: 2px
- **Md**: 4px
- **Lg**: 6px
- **Full**: 9999px

### Shadows

- **Sm**: 3px 3px 0 0 #111111
- **Md**: 5px 5px 0 0 #111111
- **Lg**: 8px 8px 0 0 #111111

### Surfaces

- **Treatment**: paper
- **Card Style**: flat color blocks with white cards and hard offset shadows
- **Bg Pattern**: grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: hard black comic-poster outlines with visible weight on every interactive and structural region

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.15,0.85,0.3,1)
- **Philosophy**: snappy

## Rules

### Composition

Build screens as poster-like modules on an uneven grid: one oversized hero block, several blunt utility cards, and a few sticker elements that intentionally cross container boundaries.

### Hierarchy

Establish order first through scale, border weight, and fill blocks; primary actions get saturated fills and largest shadows, while supporting tools stay white with the same outline language.

### Density

Moderately dense but never cramped; many modules can coexist if each keeps visible padding and enough margin to read as its own printed tile.

### Signature Patterns

- Primary panels use 3px to 4px black outlines plus zero-blur offset shadows, so every important surface looks like a screen-printed card lifted from the page.
- Section labels and data chips use uppercase monospaced microcopy with wide tracking inside bordered pills or tape-like tags, echoing editorial annotations.
- Hero cards pair oversized uppercase display headlines with flat high-saturation background fills, then pin contrasting sticker badges so the composition feels pasted and slightly misregistered.
- Interactive controls animate by translating 2px to 4px and collapsing their offset shadow on active press, producing a physical tile-press illusion rather than a soft fade.
- Selected list rows and form fields use inset accent bars or corner stickers in electric blue or hot pink so state changes read as graphic intervention, not subtle tint shifts.

## Layout

### Grid

Desktop uses a 12-column uneven poster grid with broad spans for hero modules and narrow utility rails; tablet collapses to 8 columns and mobile to a single loud stack with occasional two-up metric rows.

### Breakpoints

Mobile: 0-599px, Tablet: 600-959px, Desktop: 960-1439px, Wide: 1440px and above.

### Whitespace

Use 16px to 24px gaps between neighboring modules, 32px around hero blocks, and larger outer margins so loud components can breathe like printed placards pinned to a wall.

## Guidance

### Do

- Do give every meaningful component a visible outline and enough padding to feel like an independent printed tile.
- Do use one dominant accent fill per region and let other surrounding modules reset to white or paper tones.
- Do pair aggressive display headlines with concise body copy so the interface stays readable despite its loud voice.
- Do keep focus, hover, pressed, and disabled states explicit with movement, outline, and fill changes.

### Don't

- Do not add blur, translucency, or premium gradient polish that softens the style's exposed construction.
- Do not round everything into friendly pills; neo-brutalism depends on firmness and edge definition.
- Do not make every card equally saturated or equally oversized, or hierarchy collapses into noise.
- Do not hide actions as low-contrast text links when the interface can communicate more clearly with framed controls.

## Imagery Direction

### Illustration Style

Illustration should feel like a graphic poster system made from thick outlines, flat fills, sticker-like shapes, marker arrows, naive geometry, and purposeful visual noise. Use simple forms with oversized scale, occasional misregistration, and playful anti-polish rather than polished vector perfection.

### Hero Image Direction

Hero images should look like screen-printed collages, bold product cutouts, street photography with flash, or object still lifes dropped into loud graphic frames. Compose with abrupt crops, label stickers, oversized captions, and contrasting background slabs that make the image feel pinned onto the interface.

### Background Treatment

Backgrounds can alternate between warm paper tones, white, acid fills, doodled patterns, checker blocks, heavy ruled grids, or halftone fields. The treatment should add attitude without reducing contrast or interfering with text readability.

### Icon Style

Icons should use heavy strokes, square corners, and almost signage-level bluntness. Filled and outlined icons can coexist if the weight stays consistent and the shapes remain simple, obvious, and bold.

### Image Generation Prompts

- neo brutalist web poster, thick black borders, acid yellow and hot pink blocks, offset shadows, flash photography cutout, DIY zine composition
- raw interface collage, chunky geometric cards, black outlines, sticker labels, anti-design energy, playful asymmetry
- contemporary anti-design product hero, bold uppercase type, screen-printed textures, electric blue accents, heavy keylines
- indie software dashboard in neo-brutalist language, offset shadows, white cards on warm paper field, confrontational graphic clarity

### Photography Direction

Photography should feel direct, contrasty, and slightly raw: flash-lit portraits, object photography, urban scenes, studio cutouts, or documentary moments with honest texture. Avoid dreamy blur or glossy luxury retouching; the mood should be immediate and tactile.

## Generative Canvas

### Webgl Techniques

- flat-shaded geometric slabs with hard outlines
- posterized image threshold shaders
- cursor-pushed block displacement
- low-depth extrusions with visible edge color

### Canvas Effects

- halftone dot overlays
- misregistered shadow layers
- animated sticker collisions
- checkerboard and ruled-grid transitions

### Shader Palette

Shader work should translate the palette into loud, flat fields with high-contrast edges: warm paper, black, acid yellow, hot pink, and electric blue. GPU treatments should look screen-printed or posterized, not atmospheric, with clear separations between planes and visible contour definition.

### Animation Philosophy

Animation should feel snappy, chunky, and physical, like cards slamming into place or labels being stamped onto a surface. Use short durations, abrupt easing, and occasional micro-jitters that reinforce the printed-object metaphor without becoming disruptive.

### Interactive Elements

- cursor-follow sticker badges
- hover-induced offset shadow snaps
- scroll-triggered poster panel collisions
- stamped label reveals
- drag-like card lifts