CSS Brutalist Playground

Raw e-commerce product cards built for a furniture/object brand. Heavy black borders, Bebas Neue headlines at aggressive sizes, a construction-tape stripe motif, a cement-grey material palette, and a red-on-black "New Drop" tag system. Cards use industrial geometry (crosshairs, diamonds, rotated stamps) as stand-ins for product imagery. The bottom row breaks the grid with a full-bleed red feature banner and a compact dark quick-add panel — the contrast between the three card treatments (black, yellow, cement) is intentional. Bebas Neue + Space Mono + DM Serif Display. Best for furniture brands, industrial-design retailers, statement product pages.

A bureaucratic form UI inspired by government documents and industrial inspection sheets. Ruled paper lines and a red margin run behind everything. Fields live inside a rigid cell-bordered grid with hand-stamp section numbers. Checkboxes use a ✗ mark instead of a checkmark. Radio options are full-width blocks that invert to dark when selected. The textarea header is a black bar with a character counter. A ranged budget slider and a final submit zone with fine-print legalese complete the system — every interaction has weight and friction by design. IBM Plex Mono + Barlow Condensed + Courier Prime. Best for inspection portals, compliance forms, government UIs, brutalist contact pages.

A dark-mode ops/infrastructure dashboard in Soviet constructivism meets broken-terminal aesthetic. Acid green #c8f000 as the primary signal color against near-black surfaces. Left column carries live system metrics, four resource progress meters, and a scrolling event log. Center panel has a bar chart with highlighted current period and a four-cell KPI strip with colored accent bars. Right panel has a donut ring chart for resource distribution. The bottom splits between an events severity table and active target progress cards — the whole thing reads like a real monitoring terminal. Archivo Black + Azeret Mono + Unbounded. Best for DevOps dashboards, status pages, monitoring tools, NOC interfaces.

A 2×3 work grid for a graphic designer, built entirely around collision and contrast. Two giant Anton-font words — "SELECTED" and "WORK" — bleed off-canvas behind the grid at 22vw and 19vw, functioning as both typographic architecture and background texture. Each cell has its own background (black, cream, hot pink, electric blue, lime) and its own visual motif: a circle with a lime core, a diagonal line, a ghost ✕, a data bar stack, oversized ghost letterforms, a dot grid. A custom split cursor (dot + lagged ring, both in difference blend mode) swells to 60px with a "VIEW" label on hover. The ticker tape at the bottom scrolls availability info in acid green on black. Anton + Syne + Syne Mono. Best for designer portfolios, agency case-study indexes, art-school project grids.

A no-BS hero + pricing split for an indie-hacker SaaS. Left side leads with a giant italic Instrument Serif headline punctuated by a yellow monospace .accent span — "seriously." — that signals "I built this myself and I’m not sorry." A live badge counts signups in real time, three KPI cells (users, latency, uptime) sit in a bordered grid with delta arrows, and the CTA pair is blunt: black primary button and a plain underline "see the code on GitHub." Right side is a raw pricing column: billing toggle with a -20% savings tag, three plan cards where the Pro tier inverts to full black with a yellow CTA. Footer reads the MRR, start date, and "BUILT IN PUBLIC" in 9px caps — the whole thing smells like Hacker News. Instrument Serif + JetBrains Mono. Best for indie SaaS landing pages, dev tools, build-in-public products.

A fully realized Windows 95 desktop with four draggable windows on a checker-tile teal background. The main window is a Netscape Navigator frame hosting Kira’s GeoCities homepage — complete with a scrolling green-on-black marquee, a real visitor counter in red VT323 digits, a fan poll with radio buttons, and a Win95-themed song table. A Properties panel sidebar shows a loading progress bar animated with classic blue block stripes. An alert dialog ("press OK or the page will EXPLODE") has the authentic three-button layout. A black Winamp 2.9 player renders with a fake frequency visualizer, scrolling track marquee, and working transport controls. All four windows are mouse-draggable. The taskbar clock updates live, and the teal desktop uses the authentic 4px checker tile. VT323 + Press Start 2P + MS Sans Serif fallbacks. Best for nostalgia sites, retro brand campaigns, 90s-revival product pages.

A full editorial layout built to make writing the only thing that matters. Three-column architecture: a fixed table of contents on the left (with the active article highlighted in yellow), a scrollable center article column, and a subscriber sidebar on the right — all separated by single-pixel ink rules, no decoration. The masthead is a rigid three-cell grid with the publication name center-framed between hairline borders. The article itself uses Libre Baskerville for body and display, a large drop cap, a yellow pull-quote block with a 6px left border, and an exposed byline strip with four data cells. The subscribe panel tracks 14,200 readers at 94% open rate with a focus-to-yellow input. Libre Baskerville + Schibsted Grotesk. Best for newsletter homepages, literary magazines, longform blogs, paid-subscription publications.

A stark product catalog for a fictional high-concept fashion label — the kind that charges $1,240 for a coat and means it. Identity bar anchors with the brand name in tracked Syncopate caps, a season/collection label, and a righthand bag counter with a red notification dot. The filter bar is a raw horizontal strip of categories separated by hairlines; active state inverts to full black. The 4×2 product grid uses exposed 1px borders as the only structural language. Each card carries a CSS-sculpted garment silhouette (jacket lapels, trouser legs, hood bump, bag clasp) built entirely from geometric divs — no images. Hover reveals a size strip across the top and a quick-add bar sliding up from the bottom. Label tape uses three states: black for NEW, grey for LTD, red for SALE. The featured coat spans two columns with a giant ghost brand mark at 4% opacity. Familjen Grotesk + Syncopate. Best for fashion e-commerce, design-led product catalogs, lookbook-style stores.