Brutalistische Kreativagentur

Create a brutalist website for a creative studio. Brutalism exposes structure instead of polishing it — raw grids, system-like type, harsh contrast — and in the right hands that honesty becomes beautiful.

Brief

Subject: Concrete Office — a six-person graphic design studio in Rotterdam known for posters and exhibition identities

The copy needs attitude and specifics: invented client names, project years, a short manifesto in the studio's voice, a street address

Design Rules

Break conventions intentionally — overlapping elements, harsh contrast, visible structure — while navigation and reading still work

Raw HTML feel — visible borders, monospace, system UI elements, default-looking form controls

Typography: Extreme scale contrast (8–12rem headlines against 13px text); IBM Plex Mono for body, a heavy grotesk for headlines

Colour: #ffffff base, #000000 text, #0000ff for highlights and hovers. No gradients, no shadows

Borders: 2–4px solid on everything, zero border-radius

Sections to Include

Header — Fixed bar with the studio name in caps, underlined raw links

Hero — Massive overlapping type (rotated, mixed sizes) carrying the studio's tagline; no hero image

Work Grid — Hard grid with thick borders; project cells invert colours on hover

Manifesto — Full-screen monospace text with line numbers, like a code editor

Team — A plain table of names, roles and emails

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

Footer — Raw data: copyright, address, email, coordinates

Anti-Design Patterns to Include

Intentional overlap and text at unexpected angles (transform: rotate)

Instant hover inversions, no easing

cursor: crosshair on the work grid

Serif, sans and mono mixed within a section

Technical Details

Project visuals: CSS/SVG poster compositions, or https://picsum.photos/seed///?grayscale

Responsive: the chaos reorganises on mobile but stays legible

Real accessibility underneath: semantic HTML, labelled inputs, thick visible focus outlines