FORMHAUS — Agency Website (Brutalist Red)

Summary

A neo-brutalist agency homepage in a warm paper-and-ink palette with one hot red signal accent. A thin red top accent tape sits above a sticky paper nav (a red boxed 'F' monogram + 'FORMHAUS®' wordmark, mono uppercase links, an ink 'Start a build' pill). The hero is dominated by a giant black uppercase Archivo wordmark 'Websites that refuse to blend in.' (the word 'refuse' in red), wrapped above a mono meta row, then split by a 2px ink rule into a left blurb + dual CTA and a right column holding a red-hard-shadowed striped 'canvas' image block over a bordered 38 / 6yr stat pair. Below: a black marquee client strip, a 'Selected work' grid (one wide featured card + two 4:3 cards, all 2px-bordered with hard offset shadows and CSS-gradient artwork), a 4-up bordered stats strip, a hairline-divided numbered 'What we do' services list whose rows invert to black-on-paper on hover, a black 'Method' section of four bordered phase cards (red hard shadow on the first), a full-red 'Let's build something loud' contact section with a giant headline + email link + a bordered 2x2 paper info grid, and a black footer with a huge 'Formhaus®' wordmark + mono nav. The signature is the brutalist system: a single 2px ink border language everywhere, hard offset box-shadows (8px/5px in ink and red), tight-tracked black Archivo display type beside JetBrains Mono uppercase labels, an SVG grain overlay, and exactly one red accent (#e5341f) on a paper (#f4f1ea) and ink (#0a0a0a) field.

Style

Warm neo-brutalist / editorial: a paper-cream page (#f4f1ea) with near-black ink (#0a0a0a) structure and a single hot red 'signal' accent (#e5341f), no other colors. The whole system is built from a consistent 2px solid ink border drawn on almost every block (nav, hero rule, image frames, work cards, stats cells, services rows, method cards, contact info grid) plus hard, un-blurred offset box-shadows: 8px 8px 0 ink (.hardshadow), 5px 5px 0 ink (.hardshadow-sm), and 8px 8px 0 red (.hardshadow-red / 6px 6px 0 red on the first method card). Type is the hierarchy: enormous black (900) Archivo uppercase display set in tight negative letter-spacing (-0.04em .tighten, -0.055em .tighten-xl) at viewport sizes (up to ~12.5vw), against JetBrains Mono used for every small uppercase label, eyebrow, nav link, stat caption, and meta line (wide tracking 0.14em-0.22em). Red is rationed: the 'refuse' word, the monogram fill, the ® marks, eyebrow brackets, the live-status dots (animate-pulse), one stat figure, an inverted accent inside cards, the whole contact section background, and the hover state of the primary button. Texture and motion are subtle: a fractal-noise SVG grain ::before overlay at 0.04 opacity (.grain) over hero/work-card/method sections, an infinite horizontal marquee of client names (26s linear), a 0%->100% background-size link underline on hover, and full block-invert hovers on the services rows. ::selection is red-on-paper. The mood is loud, confident, hand-built, anti-template.

Layout & Structure

A single-column, vertically stacked, frameless responsive marketing page where every section is full-bleed but its content centers in mx-auto max-w-[1400px] with px-5 -> md:px-8. Hard 2px ink rules (border-b-2 border-ink) separate sections. Order top to bottom: (1) a thin red top accent tape (h-7) with two mono micro-lines; (2) a sticky paper nav (top-0 z-50, border-b-2) with monogram+wordmark, centered mono links, and an ink CTA pill; (3) the hero, a .grain section with a mono meta row, the giant wordmark headline, then a 12-col lower band split by border-t-2 into a left 7-col blurb+CTAs (with a right border on lg) and a right 5-col column holding a red-shadowed striped canvas block and a 2-cell stat box; (4) a black full-bleed client marquee strip; (5) 'Selected work', a md:grid-cols-2 grid = one md:col-span-2 wide 16:7 featured card + two 4:3 cards, each 2px-bordered with hard shadows and CSS-gradient 'artwork' plus absolutely-positioned mono index/label and a black display title; (6) a 4-up stats strip (grid-cols-2 -> md:grid-cols-4 with internal 2px dividers); (7) 'What we do' services, a borderless H2/eyebrow header over a border-t-2 divided <ul> of four 12-col rows (index / title / description) that invert to bg-ink text-paper on group-hover; (8) 'Method', a black .grain section with a 4-up grid of bordered phase cards (paper/30 border that turns red on hover, the first carrying a red hard shadow); (9) 'Contact', a full bg-signal (red) section with a 12-col split = a 7-col giant headline + mailto link and a 5-col bordered 2x2 paper info grid; (10) a black footer with a giant wordmark + mono nav + a hairline-divided bottom legal row. Reflow: the hero lower band is grid-cols-1 -> lg:grid-cols-12 (the dividing right border only on lg); the work grid is 1-col -> md:2-col (featured card spans both); stats are 2-col -> md:4-col (with a border-t-2 appearing on the bottom row at the 2-col breakpoint); each services row is a 12-col grid that stacks its index/title/desc on mobile (col-span-12) and splits 1/6/5 on md; method is 1-col -> md:4-col; contact is 1-col -> lg:12-col (7+5); footer flips flex-col -> md:flex-row. Nav links and several mono meta spans hide below md/sm. Everything collapses to one column on mobile.

Top accent tape + sticky nav

Hero

Hero canvas block + stat pair

Client marquee strip

Selected work grid

Stats strip

Services list (numbered, invert-on-hover)

Method (dark phase cards)

Contact (full-red)

Footer (dark)

Components

2px ink border + hard offset shadow system

The defining brutalist device: a single 2px solid ink border drawn on nearly every block, paired with hard, un-blurred offset box-shadows in ink (8px / 5px) and red (8px / 6px), so blocks read as crisp stacked paper tiles rather than soft cards.

Giant tight-tracked Archivo display headline

Each major section is anchored by an enormous black (900) uppercase Archivo headline set in tight negative letter-spacing and viewport-relative sizes, with the single red accent used sparingly inside one word.

CSS-only artwork tiles (no images)

The hero 'canvas' block and the three work cards stand in for real imagery using layered CSS gradients (radial + diagonal repeating stripes, a cross-hatch grid, and a conic gradient) plus a grain overlay, framed by the border+shadow system and labelled with absolutely-positioned mono captions.

Invert-on-hover services rows

The services list is a borderless hairline-divided <ul> whose rows are normally ink-on-paper and flip entirely to paper-on-ink on hover, a single bold brutalist interaction instead of buttons or icons.

Seamless client marquee + animated link underline

Two small motion accents: an infinite horizontal marquee of client names on the black strip, and a left-to-right growing 2px underline on text links.

Special Notes

Frameless, fully responsive neo-brutalist agency marketing page (no browser chrome / no device frame): every section is full-bleed but its content centers in mx-auto max-w-[1400px] with px-5 -> md:px-8, and hard 2px ink rules (border-b-2 border-ink) separate sections. Reflow: the hero lower band is grid-cols-1 -> lg:grid-cols-12 (7+5, the dividing right border only on lg); the work grid is grid-cols-1 -> md:grid-cols-2 with the featured card md:col-span-2; the stats strip is grid-cols-2 -> md:grid-cols-4 (a border-t-2 appears on the bottom pair only at the 2-col breakpoint); each services row is a grid-cols-12 that stacks (col-span-12) on mobile and splits 1/6/5 on md; method is grid-cols-1 -> md:grid-cols-4; contact is grid-cols-1 -> lg:grid-cols-12 (7+5); the footer flips flex-col -> md:flex-row; nav links and several mono meta spans hide below md/sm; everything collapses to one column on mobile. Built with Tailwind via CDN plus a tailwind.config registering custom colors paper #f4f1ea, ink #0a0a0a, signal #e5341f, smoke #e7e3d8 and font families font-mono (JetBrains Mono) + font-grotesk (Archivo); Google Fonts loads Archivo 400-900 and JetBrains Mono 400/500/700/800; icons are Iconify lucide (lucide:zap, lucide:arrow-up-right). All copy and the 'FORMHAUS / Formhaus Studio' brand are placeholders meant to be swapped: the transferable value is the warm neo-brutalist system, a paper field #f4f1ea with near-black ink #0a0a0a structure and EXACTLY ONE red signal accent #e5341f, built from a universal 2px ink border language plus hard un-blurred offset box-shadows (8px/5px ink, 8px/6px red), enormous tight-tracked black Archivo display type beside JetBrains Mono uppercase labels, an SVG fractal-noise grain overlay, a seamless client marquee, invert-on-hover services rows, and CSS-only gradient artwork tiles, NOT the specific agency. Strictly no second hue: the only accent is red #e5341f on paper + ink.