Brutalist Creative Agency

Create a brutalist website for a creative agency. Brutalism rejects polished aesthetics in favor of raw, honest, and intentionally "ugly" design that paradoxically becomes beautiful.

Design Rules

Break conventions intentionally — overlapping elements, harsh contrasts, visible borders

Raw HTML feel — visible borders, monospace fonts, system UI elements

Typography: Mix of extremely large (8-12rem) and small text, IBM Plex Mono for body, bold sans-serif for headlines

Color: Stark contrast — #ffffff base, #000000 text, #ff0000 for highlights. No gradients.

Borders: Thick 2-4px solid borders on everything. No border-radius.

Sections to Include

Header — Fixed bar with agency name in caps, raw links with underlines, no padding

Hero — Massive overlapping text (rotated, different sizes), agency tagline, no hero image

Work Grid — Hard grid with thick borders separating cells, project images with harsh hover (invert colors)

Manifesto — Full-screen section with paragraph of text in monospace, line-numbered like code

Team — System-font table layout with names, roles, and emails as raw data

Contact — Oversized form fields with thick borders, submit button in accent color

Footer — Raw data: copyright, address, email, no styling

Anti-Design Patterns to Include

Elements that overlap intentionally

Text at unexpected angles (CSS transform: rotate)

Hover effects: harsh color inversions, not smooth transitions

Visible cursor: cursor: crosshair or cursor: cell

Mix of serif, sans-serif, and monospace in the same section