HYPERBLOK — Maximalist Vibrant Agency Website

Summary

A maximalist, neo-brutalist agency / design-studio homepage built from loud color blocks, oversized condensed display type, and hard 3-5px black borders with offset 'pop' shadows. A sticky white nav (a 3-bar magenta/cyan/yellow logo glyph + a black pill 'Start a project' CTA) sits above a grain-textured hero: a tiny uppercase eyebrow row, a giant Archivo Black headline ('WEBSITES THAT REFUSE TO BE IGNORED') where words are accented in magenta and inside a tilted cyan highlight box, a lead paragraph + two bordered pill CTAs, and a 3-up bordered stat block, capped by a full-bleed 4-cell color strip (magenta/cyan/yellow/black). Below: a black scrolling marquee of slogans, a 'Selected Work' section of oversized bordered project tiles (each a color panel + an abstract icon-on-color-grid 'image' half, with index/category, big title, blurb, and pill tags), a magenta 'What we do' services grid of white bordered cards with color icon chips, a yellow client-name marquee, a white 'studio' about split (clipped-highlight statement + 4 bordered stat tiles), a cyan closing CTA with floating geometric shapes and an email pill, and a black 4-column footer with newsletter input. The signature is the brutalist kit: thick black edges, 8-12px hard offset shadows, full-saturation magenta+cyan+yellow on white/black, dot-grain texture, and two infinite marquees.

Style

Loud, playful neo-brutalist maximalism. Everything is built from a tight high-saturation palette on stark white and near-black: magenta #ff2db7, cyan #00d4ff, yellow #ffd000, ink #0a0a0a, and white #ffffff, used as flat full-bleed color blocks (no gradients, no soft shadows). Structure comes from hard black borders: 3px (edge), 5px (edge-thick), plus 4px section borders (border-y-4 border-ink), and depth comes exclusively from hard OFFSET shadows (8px 8px 0 ink, and 12px 12px 0 ink on big tiles) rather than blur. Type is the loudest element: a heavy Archivo Black 'display' face with negative tracking (-0.03em) and crushed line-height (0.86), set HUGE via clamp() and almost always UPPERCASE, with single words accented by color or wrapped in a slightly rotated (-1deg) solid color highlight box that itself carries a pop-shadow. Supporting copy + UI is Space Grotesk (medium/bold, often uppercase micro-labels with wide 0.18-0.2em tracking); body is Archivo. Texture is a faint dot 'grain' (radial-gradient dots at 4px). Motion is two CSS marquees (one forward, one reverse) with a soft edge mask, plus tiny hover transforms (translate, scale, rotate) on tiles/cards. Icons are Iconify Lucide line glyphs (lucide:*), often oversized with a hard drop-shadow.

Layout & Structure

A single-column, vertically stacked, fully responsive marketing page. Every section centers its content in mx-auto max-w-[1400px] with px-5 -> sm:px-8 padding; most sections are separated by full-bleed 4px black borders (border-y-4 border-ink). Order top to bottom: (1) a sticky white nav with a 4px bottom border; (2) a grain hero (eyebrow row, giant headline, lead + 2 CTAs + 3-up stat blocks) ending in a full-bleed 4-cell color strip; (3) a black scrolling slogan marquee; (4) a white 'Selected Work' section of oversized bordered project tiles (two full-width alternating tiles + a 2-up row of smaller tiles); (5) a magenta 'What we do' services section (3-col bordered card grid); (6) a yellow reverse-direction client-name marquee; (7) a white 'studio' about split (statement + 2x2 stat tiles); (8) a cyan closing CTA with floating absolute shapes; (9) a black 4-column footer with newsletter signup and a bottom legal row. Reflow: nav links hide below lg (compact logo + CTA remain); hero stat blocks stay 3-up but the headline scales via clamp; the hero color strip is grid-cols-2 -> sm:grid-cols-4; work tiles are grid lg:grid-cols-2 that stack on mobile (with order swaps so the color/icon 'image' half leads), and the 2-up small-tile row collapses to 1; services grid sm:grid-cols-2 -> lg:grid-cols-3 -> 1; about split is lg:grid-cols-12 (7/5) that stacks, its stat tiles grid-cols-2; the closing-CTA decorative shapes are hidden below sm/lg; footer is md:grid-cols-12 (5/2/2/3) that stacks. Both marquees animate horizontally with an edge mask.

Sticky nav

Hero

Hero color strip

Slogan marquee

Selected Work tiles

Services grid

Client marquee

About / studio split

Closing CTA

Footer

Components

Bordered pop-shadow block (.edge / .edge-thick + .shadow-pop)

The core brutalist primitive used everywhere: a flat color (or white) rectangle with a hard 3-5px solid black border and a HARD offset drop shadow (8px or 12px, zero blur), giving a printed/sticker depth. Used for stat blocks, service cards, work tiles, CTA buttons, and the highlight boxes.

Giant Archivo Black headline with color-highlight words

The loudest element on the page: massive uppercase condensed display type with crushed line-height, where a single word is either colored (text-magenta) or wrapped in a solid color highlight box that is slightly rotated and carries its own pop-shadow.

Abstract icon-on-color-grid project 'image'

Project tiles avoid real photos: the image half is a black panel with an absolutely-positioned grid of saturated color cells, overlaid by a single oversized line icon with a hard offset drop-shadow, which scales or rotates on hover.

Dual infinite marquees (forward + reverse, edge-masked)

Two horizontally scrolling strips: a black slogan marquee under the hero (forward) and a yellow client-name marquee (reverse), each with duplicated content for a seamless loop and a soft gradient edge mask.

Special Notes

Frameless, fully responsive neo-brutalist agency / design-studio marketing homepage (no browser chrome / device frame). Built with Tailwind via CDN plus a small tailwind.config registering EXACT custom colors (magenta #ff2db7, cyan #00d4ff, yellow #ffd000, ink #0a0a0a) and font families (grotesk='Space Grotesk', archivo='Archivo', black='"Archivo Black"'); Google Fonts loads Archivo (400-900), Archivo Black, and Space Grotesk (400-700); icons are Iconify Lucide (lucide:*) via the iconify-icon web component. The transferable value is the MAXIMALIST NEO-BRUTALIST KIT, not the specific agency content: a tight full-saturation magenta+cyan+yellow palette on white/black, flat color blocks with hard 3-5px black borders (.edge/.edge-thick) and HARD offset pop-shadows (.shadow-pop 8px / .shadow-pop-lg 12px, zero blur, no gradients), giant uppercase Archivo Black display type (tracking -0.03em, line-height 0.86, clamp() up to 170px) with single words colored or set in slightly-rotated solid highlight boxes, Space Grotesk for UI/eyebrows and Archivo for body, a faint dot 'grain' texture, abstract icon-on-color-grid panels instead of photos, and two edge-masked CSS marquees (one forward, one reverse) with tiny hover transforms throughout. Layout = sticky white nav -> grain hero (eyebrow + giant headline + lead/CTAs + 3-up stats) + full-bleed 4-cell color strip -> black slogan marquee -> Selected Work oversized bordered tiles -> magenta services card grid -> yellow client marquee -> white about split with stat tiles -> cyan CTA with floating shapes -> black 4-column footer. Reflow: nav links hide below lg; the hero color strip is 2-up -> 4-up; work tiles are lg:grid-cols-2 that stack (with order swaps so the abstract 'image' leads on mobile); the small-tile row and services grid collapse to 1; the about split is 12-col (7/5); the CTA decorative shapes hide on small screens; the footer is md:grid-cols-12 (5/2/2/3); everything is centered in mx-auto max-w-[1400px] with px-5 -> sm:px-8. All copy and the 'HYPERBLOK' brand are placeholders meant to be swapped. Keep the palette full-saturation; the whole point is loud.