Carousel Design — Brutalist Slider

Summary

A raw neo-brutalist slider carousel built as a complete one-screen 'Carousel/Design' landing on an off-white paper palette (#f4f1ea) with pure-black ink and a single acid-yellow accent (#e8ff00). Hard 3px black borders, blocky offset drop shadows (8px 8px 0 #000), heavy Archivo Black uppercase headlines and Space Mono labels. A sticky paper nav with a square 'C' logo sits over a grid-paper hero (a 'CAROUSELS that don't blink' headline with an acid highlight + a 2x2 brutalist stat-slab grid). The centerpiece is a no-JS radio-driven BRUTALIST SLIDER: a bordered slide panel with a hard acid+ink offset shadow, chunky square prev/next arrow buttons, an oversized blocky numeral index in an inverted ink/acid slab, and a row of 3 square index buttons; three slide layouts (acid 'Stacked panel', paper 'Split feature', inverted-ink 'Invert hero') snap with zero fade. Below: a scrolling ink marquee strip, a 6-up bordered feature 'Kit' grid, a 'prompt.txt' code slab with acid-highlighted tokens, a 3-tier brutalist pricing grid, an acid CTA band and a paper footer. Archivo / Archivo Black / Space Mono, Iconify Phosphor icons, tactile press (buttons travel on click), fully responsive.

Style

A raw, confident NEO-BRUTALIST aesthetic where hard black borders, blocky offset shadows and a single acid-yellow highlight make every block feel like a stamped slab. The page sits on an off-white paper ground (paper #f4f1ea) with pure-black ink (ink #000000) and a single electric acid-yellow accent (acid #e8ff00) reserved for highlights, inverted slabs, index numerals, the logo glyph and arrow markers. There is ZERO border-radius anywhere: every surface (nav logo, stat slabs, slide panel, arrow buttons, index buttons, feature cards, code slab, pricing cards, CTA button) is a hard-edged rectangle with a 3px solid black border (border-[3px] border-ink), and most carry a hard, un-blurred bottom-right OFFSET DROP SHADOW. Custom shadow tokens (no blur, pure offset): .shadow-brutal '8px 8px 0 0 #000', .shadow-brutal-lg '14px 14px 0 0 #000', .shadow-brutal-sm '5px 5px 0 0 #000', .shadow-brutal-acid '8px 8px 0 0 #e8ff00, 8px 8px 0 4px #000' (an acid fill behind an ink keyline), and the large-panel .shadow-panel '14px 14px 0 0 #e8ff00, 14px 14px 0 3px #000' (an acid offset + an ink keyline so the single shadow stays visible against BOTH acid and black inner cells). Buttons are TACTILE: .btn-brutal transitions transform/box-shadow .08s, on hover translates(2px,2px) + shrinks shadow to '4px 4px 0 0 #000', on active translates(8px,8px) + collapses the shadow to nothing, so it physically presses into the page. Typography is heavy and industrial: Archivo (grotesk, weights 400..900) for body/UI, Archivo Black for the giant uppercase headlines (leading ~0.92, tight negative tracking, box-decoration-clone acid highlight spans), and Space Mono (monospace) for all eyebrows, labels, tags, code and meta in UPPERCASE with wide tracking. Two faint grid textures: a .grid-bg dual linear-gradient grid (rgba(0,0,0,0.06) 1px lines on a 44px x 44px cell) behind the hero / kit / pricing sections and inside the carousel rig, plus an acid ::selection (background acid, ink text). A scrolling .marquee-track keyframe (translateX 0 -> -50% over 22s linear, infinite) drives the ink marquee band. The reusable signature is the BRUTALIST SLIDER: a bordered slide panel with a hard acid+ink .shadow-panel offset, a 2-cell grid (a colored copy cell beside an inverted ink/acid index cell holding an oversized blocky numeral), flanked by chunky square arrow buttons (a paper PREV + an inverted ink/acid NEXT), with a row of 3 square index buttons below; it is no-JS, radio-driven (hidden peer radios + label arrows + the :checked ~ * sibling combinator toggling .slide-N display), so it snaps with ZERO FADE and is keyboard navigable. Industrial, blocky, high-contrast, tactile; warm human copy with zero em-dashes.

Layout & Structure

A sticky paper nav (a square 'C' logo + a 'Carousel/Design' wordmark, a 4-link center menu, an inverted 'Start Building ->' button), then a grid-paper hero (a mono tag-pill row, a giant 'CAROUSELS that don't blink' headline with an acid highlight + a copy line + a two-button row + a 3-item mono check row, beside a 2x2 brutalist stat-slab grid), then 'The slider' section whose centerpiece is the no-JS radio-driven BRUTALIST SLIDER inside a grid-paper rig (a square PREV arrow + the slide stage + a square NEXT arrow, over a row of 3 square index buttons), then a scrolling ink marquee strip, then a 'Kit' 6-up bordered feature grid, then a 'Prompt it' two-column section (a copy column beside a 'prompt.txt' code slab), then a 'Pricing' 3-tier brutalist card grid, then an acid CTA band, then a paper footer. Most containers center in mx-auto max-w-[1240px] px-5 sm:px-8, and every section is divided by a border-b-[3px] border-ink rule.

Sticky paper nav

Hero (headline + stat-slab grid)

The brutalist slider (no-JS radio carousel)

Marquee strip

Kit feature grid (6-up bordered)

Prompt block (copy + code slab)

Pricing (3-tier brutalist cards)

Acid CTA band + footer

Special Notes

Tokens read directly from the build HTML. Palette = exactly three: paper #f4f1ea (off-white ground), ink #000000 (pure black borders/text), acid #e8ff00 (single electric-yellow highlight); border-[3px] border-ink and zero border-radius everywhere. Fonts = Archivo (grotesk 400..900), Archivo Black (giant uppercase headlines), Space Mono (all eyebrows/labels/tags/code, uppercase + wide tracking), all from Google Fonts. Shadow tokens (no blur): shadow-brutal 8/8, shadow-brutal-lg 14/14, shadow-brutal-sm 5/5, shadow-brutal-acid (acid+ink keyline), shadow-panel (14/14 acid + 3px ink keyline). Icons = Iconify Phosphor 'ph:*-bold'. The slider is no-JS (radio + label + the :checked ~ * sibling combinator), keyboard navigable, zero fade. Custom Tailwind screens add an xs '430px' breakpoint (used to hide/show nav label fragments). Responsive: the hero grid lg:grid-cols-[1.15fr_0.85fr] stacks to one column with the stat grid below; the stat slabs stay a 2x2 grid-cols-2; the slide panels' inner grid goes md:grid-cols-[1fr_auto] -> one column (the index cell drops below the copy with its divider switching border-l -> border-t); the arrows shrink w-16 -> w-12 below sm; the kit grid lg:grid-cols-3 -> sm:grid-cols-2 -> one column; the prompt block lg:grid-cols-[0.9fr_1.1fr] -> one column; the pricing md:grid-cols-3 -> one column (the highlight card's -mt-4 lift only applies at md); section headers go sm:flex-row -> flex-col; the footer sm:flex-row -> flex-col. Copy is warm and human with zero em-dashes ('Carousels that don't blink', 'Everything snaps, nothing fades', 'Stop fading. Start snapping.').