HARDSTOP — Buttons With a Spine: A Brutalist Button System
Neo-brutalist button system: thick 3px ink borders, hard acid-yellow offset shadow that compresses to zero on press, JetBrains Mono + Archivo, every variant, size and state on one graph-paper canvas.
Summary
A complete neo-brutalist button system rendered as a single component showcase page: thick 3px black borders, a hard offset shadow that compresses to zero on press, acid-yellow as the only accent, JetBrains Mono + Archivo, and a graph-paper grid backdrop. Includes a sticky nav, scrolling ticker, hero with a live-preview card, and labelled sections for anatomy, variants, sizes, icon buttons, states, a variant x size matrix, and a prompt CTA.
Style
Raw neo-brutalist: flat fills only (no gradients), thick solid black borders, hard offset drop shadows used as the primary depth cue, a single acid-yellow accent on a warm paper background, monospace + heavy grotesk type, uppercase labels with wide letter-spacing, and a faint graph-paper grid.
Layout & Structure
Single long-scroll component showcase, max content width 1240px, centered, with 3px ink dividers between every full-bleed section. Top to bottom: sticky header nav, a scrolling ticker bar, a 12-col hero (7/5 split: headline + copy + CTAs on the left, a bordered live-preview card on the right), then a series of labelled sections each introduced by a mono numbered tab + a black uppercase H2, ending in an acid CTA band and a footer.
Sticky nav
Ticker bar
Hero
Labelled section pattern
Anatomy / Sizes / Variants / Icon / States sections
Matrix + CTA + footer
Special Notes
Strict rules: border-radius is always 0; never use gradients or blurred shadows; depth is conveyed ONLY by the hard offset shadow, and the signature interaction is press-to-compress (the active button translates by exactly the shadow offset so the shadow disappears). Acid yellow #e8ff00 is the single accent, used sparingly for the primary variant, highlights, and tab accents. All borders, text, and shadows are ink #0a0a0a. Icons are Phosphor (iconify ph:*-bold). Fully responsive: nav links and multi-column grids collapse on mobile (variant/state/matrix grids reflow to 2 columns; the matrix table scrolls horizontally with a 640px min-width).