Create a brutalist website for a creative studio. Brutalism exposes structure instead of polishing it: raw grids, system-like type, harsh contrast. 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 identitiesThe copy needs attitude and specifics: invented client names, project years, a short manifesto in the studio's voice, a street addressBreak conventions on purpose (overlap, rotation, harsh contrast, exposed structure) while navigation, reading and the form keep workingDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#0000ff"
background: "#ffffff"
border: "#000000"
guide: "color-mix(in srgb, #000000 18%, transparent)"
muted: "color-mix(in srgb, #000000 60%, #ffffff)"
onAccent: "#ffffff"
surface: "#000000, with background-coloured text (inverted blocks)"
text: "#000000"
effects:
cursorBlink: "a 0.6em × 1.1em block, opacity toggling every 0.5s with step-end"
guides: 6 columns of 1px dashed guide-colour right borders across the hero below the header
outlineText: "background-colour fill with -webkit-text-stroke 3px in the text colour, paint-order stroke fill (2px on mobile)"
press: "translate(3px, 3px) on :active"
rotations: "headline word -9° and 2.5°, vertical band -90°, intro -1.2°, sticker 11°, stamps -7° and 5°"
fonts:
accent:
fallback: "'Times New Roman', serif"
family: Instrument Serif
weights: [400]
body:
fallback: "ui-monospace, Menlo, Consolas, monospace"
family: IBM Plex Mono
weights: [400, 700]
display:
fallback: "'Arial Black', Impact, sans-serif"
family: Archivo Black
weights: [400]
layout:
breakpoints:
mobile: 760px
tablet: 1100px
container: "full width, no max-width: blocks run edge to edge"
gutter: 16px inside every block
motion:
durations:
cursor: 1s
everythingElse: 0ms
easings:
cursor: step-end
radii:
everything: 0
shadows:
everywhere: none
spacing:
header: "52px, 92px under 760px"
hero: "header + 28px top, 32px bottom"
sectionHeading: 24px 16px 20px
type:
body:
font: body
lineHeight: 1.55
size: "13px; fields clamp(18px, 2vw, 24px)"
tracking: 0
weight: 400
caption:
font: body
lineHeight: 1.4
size: "11–13px, uppercase"
tracking: 0.04em
weight: 700
display:
font: display
lineHeight: 0.82
size: "clamp(4.4rem, 17vw, 12rem), uppercase"
tracking: -0.045em
weight: 400
headline:
font: display
lineHeight: 0.85
size: "clamp(3.5rem, 11vw, 9.5rem), uppercase"
tracking: -0.04em
weight: 400
title:
font: display
lineHeight: 1
size: "1.35rem, uppercase"
tracking: -0.01em
weight: 400
Style Rules
Structure is visible: 3px solid lines between every block, 4px under every section, dashed 1px column guides behind the hero; zero radiusExtreme scale contrast: Archivo Black at 9–12rem against 13px mono body textThree families clash on purpose: Archivo Black for headlines and numerals, the mono for body, labels and data, Instrument Serif italic for single emphasis words, which take the accentOverlap and rotation are reserved for the hero headline, the intro box, the sticker and the stampsRaw HTML feel: underlined links, default-looking radios and checkboxes with accent-color, a plain table, system-like uppercase labelsInteraction is inversion: hover and focus swap fill and text instantly, with no easingText and background colours are exact opposites everywhere; the accent marks emphasis and actionPage Layout
full width; ━ 3px rule, ▬ 4px rule; ┆ dashed guides
┃ STUDIO⁰⁶ ┃ 01 WORK ┃ 02 MANIFESTO ┃ 03 TEAM ┃ 04 CONTACT ┃ ROTTERDAM 14:32 ┃ ← fixed header
┆[51.9°N 4.4°E]┆ [EST. 2014]┆ [6 PEOPLE]┆ [BOOKING]┆ ┆ ┆ ← hero
┆POSTERS ┆ ┆ ┆ ┆ ┆ ║ side note
┆ are (serif, accent, -9°) ┆ ┆ ┆ █ band
┆ARGU░MENTS. (2.5°, partly outlined) ┆ ┆ ┆ █ -90°
┆┌ serif line / mono intro / → links ┐ (-1.2°) ◆ STICKER 11°
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WORK we'd sign ← work grid
[ poster 2:1, wide ··············· ][ poster 1:1 ] 3px gaps
01 TITLE / client / tags 02 … [STAMP]
[ 03 ][ 04 ][ 05 photo ]
[ 06 ][ 07 poster 2:1, wide ················ ]
━ + 212 projects in the flat files ···························· request archive ━
▓ [Manifesto.txt] clients.csv lunch.md ············ ~/studio/rules/manifesto.txt ▓ ← manifesto
▓ 1 │ rule … ▓
▓ 2 │ // comment ▓
▓ 12 │ last line █ ▓
▓ accent status bar: 12 lines · UTF-8 · saved ▓
TEAM (six) ┃ NAME ┃ role ┃ known for (serif) ┃ email ┃ × 6 ← team
SAY something. ┃ serif lede / VISIT MAIL CALL HOURS ┃ [NAME][EMAIL] [ORG] (budget) [MESSAGE] [SEND IT →] ← contact
┃ © ┃ ADDRESS ┃ EMAIL ┃ COORDS ┃ KVK ┃ VAT ┃ TZ ┃ BUILD ┃ ← footer
STUDIO NAME (17.4vw, cropped)
▓ end bar ▓
Sections
Header — Fixed, 52px, background fill, 3px bottom border; cells stretch to full height; brand left, nav and clock rightContent:Studio nameFour links: Work, Manifesto, Team, ContactCity and live timeComponents:Brand cell: the studio name in Archivo Black 18px with a mono superscript, a 3px right borderNav cells: each separated by a 3px left border, an uppercase mono link with a 2px underline and a small number ('01')Clock cell: the studio city's live time in uppercaseStates:Links hover to an accent fill with background-coloured text, instantlyMobile: Under 1100px the clock hides; under 760px two rows (92px): brand on top, the four links as equal cells below without numbersHero — At least 100vh, padding 80px 16px 32px, 4px bottom border, the dashed guides behind; meta row, the headline, then the intro box and sticker along the bottom (space-between)Content:A four-part headline stating the studio's belief in 3–5 wordsOne serif line and a two-sentence mono intro with the addressBooking statusComponents:Meta row: four boxed tags (2px border, uppercase, background fill): coordinates, founding year, team size, current statusHeadline in four parts: word 1 in Archivo Black at display size; word 2 in accent serif italic at clamp(3.8rem, 13vw, 10rem), rotated -9° and pulled up over word 1; word 3 in Archivo Black rotated 2.5°, partly outlined (background fill, 3px text-colour stroke); a short phrase in a text-colour band, rotated -90° up the right edgeSide note: vertical text (writing-mode vertical-rl) in a 2px box naming the type sizes usedIntro box: 3px border, background fill, rotated -1.2°, max 46ch: a 22px serif italic line, a mono paragraph, two → linksSticker: a 168px accent square with a 4px border, rotated 11°, linking to contact: 'Now booking' and a quarter and year in Archivo Black 30pxMobile: Natural height; guides drop to 3 columns; rotations soften to -7° and 1.5°; the vertical band becomes an inline -3° band; the side note hides; the sticker shrinks to 140pxWork Grid — A 3-column grid with 3px gaps showing the text colour through; cells 1 and 7 span two columns; 3px bottom borderContent:Heading: 'Work' and a short opinionated phraseSeven projects with real-sounding clients, formats, techniques and yearsComponents:Section heading: Archivo Black uppercase at headline size with an accent serif-italic phrase, 24px 16px 20px padding, 3px bottom borderCell: 16px padding, crosshair cursor; a poster with a 3px current-colour border (1:1, 2:1 on wide cells); meta below: a 2.6rem Archivo Black numeral spanning three lines, the title in Archivo Black uppercase 1.35rem, the client in 1.3rem serif italic, tags in uppercase monoStamps on two cells: accent boxes with a 3px border, uppercase bold, rotated -7° and 5°, hanging over the cell edgeWork foot: an uppercase bar with the archive count and a dry linkStates:Hover and focus invert a cell instantly: text-colour fill, background-colour text, posters inverted; focus adds a 4px accent outline inset 8pxMobile: 2 columns under 1100px (cell 7 spans both), 1 column under 760pxManifesto — At least 100vh, text-colour fill with background-colour text; tab bar, the lines filling the space with 24px 0 32px padding, status bar; 4px bottom borderContent:10–14 manifesto lines in the studio's voice: rules about clients, type, printing, lunch, with two comment linesComponents:Tab bar: under a 3px rule in the background colour; the active tab inverted with 'Manifesto' in 30px serif italic and '.txt' in Archivo Black; two other tabs with file names; the file path on the right at 75%Lines: an ordered list with CSS counters; a 4ch right-aligned number column at 45% with a 2px rule, 2.5ch gap; text in the mono at clamp(13px, 1.55vw, 21px), line-height 1.6, pre-wrap; comments at 60%; one phrase inverted, one on an accent fill, one line in Archivo BlackA blinking block cursor after the last line; an accent status bar at the bottom (line count, encoding, 'saved')Mobile: Number column 3ch; the path hidesMotion: Hovering a line gives it an accent fill; the cursor blinks every 1s with stepsTeam — The heading, then a full-width table, 15px mono, scrolling sideways when narrow; 4px bottom borderContent:Heading 'Team' with '(six)' or the countSix people with roles, what each is known for and an emailComponents:Header row: text-colour fill, Archivo Black uppercase 13px, background-coloured textBody rows: the name as a row header in Archivo Black uppercase 20px, role in mono, one cell in 20px serif italic ('known for'), an underlined emailCells: 14px 16px padding, 3px bottom and right borders; a 20px serif-italic caption below the tableStates:Row hover fills every cell with the accent and background-coloured textMobile: Row headers 16px; the 'known for' column hidesContact — The heading, then two columns 1fr / 1.3fr: side and form (24px 16px 32px, 22px gaps); 4px bottom borderContent:Heading 'Say something.'A lede on what to sendAddress, email, phone and hours with one dry remarkFields: name, email, organisation, budget, messageComponents:Side: 24px 16px padding, 3px right border; a lede in serif at clamp(26px, 3vw, 40px) with an accent italic phrase; an uppercase definition list (Visit, Mail, Call, Hours)Fields: bold uppercase labels; inputs, select and textarea (220px) with 4px borders, 16px padding, mono at clamp(18px, 2vw, 24px); name and email side by side; a 4px-bordered fieldset of budget radios (24px, accent-color); a consent checkboxSubmit: Archivo Black uppercase at clamp(1.6rem, 3.4vw, 2.6rem), accent fill, 4px border, padding 18px 34px 14pxStates:Focus: 4px accent outline and accent border; invalid fields switch to a dashed borderSubmit hovers to the text colour and presses translate(3px, 3px); on success a text-colour bar confirmsMobile: Stacks under 760px; field pairs stack; the submit stretchesFooter — Data grid, the giant word, then the end barContent:Eight raw facts: ©, address, email, coordinates, company number, VAT number, time zone, last build dateComponents:Data grid: 4 columns of 3px-ruled cells, each an uppercase bold label over raw dataThe studio name in Archivo Black at 17.4vw, line-height 0.78, cropped by the bottom barEnd bar: text-colour fill, uppercase, © and a last remarkMobile: Two columns under 1100px, one under 760pxImagery & Icons
Project posters are inline SVG compositions in the background, text and accent colours only: big Archivo Black words, serif italics, mono captions, rules and blocks, each poster a different ideaOne project uses a picsum photo with ?grayscale, its title laid over it in Archivo Black with mix-blend-mode: difference; hover inverts it with filter: invert(1)No icons: arrows are the → and ← charactersImplementation Notes
The header clock and the form validation are the only scriptsDon'ts
No gradients, shadows, rounded corners or transparency effectsNo eased transitions: hovers and inversions are instantNo overlap or rotation over body copy, navigation or form fieldsNo fourth font, no icon set and no stock imagery beyond the one grayscale photoNo accent fills except the sticker, stamps, highlighted code lines, row and line hovers, the status bar and the submit buttonNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
Three families only: Archivo Black for headlines, the mono for everything else, Instrument Serif italic for emphasis wordsEvery block is bounded by 3px or 4px solid lines in the text colour; no radius, shadow or gradient anywhereThe hero headline overlaps itself: an accent serif word rotated -9°, an outlined word rotated 2.5°, a vertical black bandDashed column guides show the 6-column grid behind the heroWork cells invert instantly on hover and focus with a crosshair cursor; there is no easing anywhere except the cursor blinkThe manifesto reads as a code editor: tabs, numbered lines, highlights, a blinking block cursor and an accent status barThe team is a plain bordered table whose rows turn accent on hoverForm fields have 4px borders and 18–24px mono text; the submit button presses 3px down-rightNothing rotated or overlapping covers body copy, links or form fieldsUnder 760px rotations reduce, the vertical text hides and every grid becomes one column
