HARDSTOP — Buttons With a Spine: A Brutalist Button System

=== ARCHITECTURE & VISION ===
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 & DIRECTION ARTISTIQUE ===
• description: 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.
• prompt: Build a neo-brutalist design system. Palette: paper background #f4f1ea, ink black #0a0a0a for all text/borders/shadows, acid yellow #e8ff00 as the only accent, smoke #e7e2d6 for alternating section backgrounds; destructive pink #ffd0d0; focus uses ink bg with acid text. Typography: Archivo (weights 400/600/700/800/900) as the grotesk display/body font, JetBrains Mono (400/500/700/800) for labels, nav, ticker and code. Headings are font-black, uppercase, tight tracking, leading ~0.92. Every surface gets a 3px solid #0a0a0a border. Depth is expressed only as a hard offset box-shadow (e.g. 5px 5px 0 0 #0a0a0a or 8px 8px 0 0 #0a0a0a) with no blur. No gradients, no rounded corners (border-radius 0), no soft shadows. Background uses a graph-paper grid: linear-gradient lines at rgba(10,10,10,0.07) on a 26px x 26px cell. Labels and meta text are uppercase JetBrains Mono with 0.08em-0.2em letter-spacing. Accent highlights wrap key words in an acid-yellow box with a 1-2px ink border.

=== STRUCTURE & SECTIONS ===
• description: 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.
• prompts: [{"part":"Sticky nav","prompt":"A sticky top header on paper bg with a 3px ink bottom border, h-16, content capped at 1240px. Left: a 36px square ink logo tile with acid letter 'B' and a wordmark 'HARD' + 'STOP' where STOP sits in an acid box with a 2px ink border. Center (desktop only): mono uppercase nav links (Anatomy, Variants, Sizes, States, Matrix) that get an acid background and an ink underline on hover. Right: a small acid brutalist button 'Copy Prompt' with a sparkle icon."},{"part":"Ticker bar","prompt":"A full-width ink-black bar under the nav with a 3px ink border, containing a horizontally scrolling marquee of mono uppercase phrases at 0.2em tracking, alternating paper and acid color: 'THICK BORDERS / HARD OFFSET SHADOW / NO GRADIENTS / PRESS = COMPRESS / ACID HIGHLIGHT / MONO + GROTESK', each separated by a star, looping seamlessly."},{"part":"Hero","prompt":"A graph-paper hero, 12-col grid. Left (7 cols): an acid tab pill 'Component / Button', then a giant font-black uppercase headline 'BUTTONS / WITH A / SPINE.' where SPINE sits in an acid box with a 3px ink border, leading 0.92; a mono support paragraph with an inline acid-highlighted phrase 'compresses on press'; and two large brutalist buttons 'Generate a button' (acid) and 'View prompt' (paper). Right (5 cols): a bordered card with an 8px offset shadow styled like a code window: ink title bar reading 'live_preview.tsx' in acid mono plus three tiny bordered window dots, and a graph-paper body stacking Primary (acid), Secondary (paper), Inverse (ink) medium buttons plus a pressed small acid button with a mono caption 'compresses'."},{"part":"Labelled section pattern","prompt":"Each content section is full-bleed with a 3px ink bottom border and alternates paper / smoke / ink backgrounds. It opens with a baseline-aligned row: a mono numbered tab (e.g. '01 / Anatomy', alternating ink tab and acid tab) next to a font-black uppercase H2 (e.g. 'THE SHADOW IS THE WHOLE POINT.'). Below sits the section content in a 3px-ink-bordered container, usually a graph-paper grid of equal cells divided by 3px ink lines, each cell centering a button plus a mono uppercase cell label."},{"part":"Anatomy / Sizes / Variants / Icon / States sections","prompt":"Anatomy: 3 equal cells showing Rest (offset 5px), Hover (lifts -1px, shadow grows to 6px), Active (drops +5px into shadow, shadow to 0) with mono captions. Variants: a 5-cell row (Primary acid, Secondary paper, Inverse ink, Ghost dashed-border, No-shadow flat). Sizes: sm / md / lg acid buttons aligned to baseline with mono spec captions (12/15/19px, 2/3/4px borders). Icon: 4 cells (leading icon, trailing icon, icon-only square, acid icon-only). States: a 2-row x 4-col grid of default, hover, pressed, disabled (40% opacity), loading (spinning circle-notch), success (check), focused (ink bg + acid text), destructive (pink bg + warning icon)."},{"part":"Matrix + CTA + footer","prompt":"Matrix: on an ink-black section, a paper table with 3px ink cell borders, header row 'Variant / Size' with Small/Medium/Large columns and rows Primary, Secondary, Inverse, Icon, each cell on graph-paper holding the corresponding button. CTA: a full acid-yellow band, left a font-black uppercase 'SHIP THIS / BUTTON SYSTEM.' + mono copy, right an ink code-card with an 8px offset shadow showing the prompt text (acid keywords) and a full-width acid 'Copy prompt' button. Footer: paper, logo tile + mono 'Hardstop / Button System / v1.0' and two small paper breadcrumb/calendar buttons with arrow icons."}]

=== COMPOSANTS CLÉS ===
• Brutalist button core (.bb): 3px solid #0a0a0a border, flat fill, 5px 5px 0 0 #0a0a0a hard offset shadow, no radius, Archivo 700; hover lifts translate(-1px,-1px) and shadow grows to 6px; active/pressed translates +5px into the shadow so the shadow collapses to 0 (the button visually compresses); 90ms ease transition.
• Button variants: acid (#e8ff00 fill), paper (#f4f1ea fill), ink (#0a0a0a fill with paper text), ghost (transparent, dashed border, no shadow; on hover fills ink with paper text and switches to solid border), no-shadow (flat, no offset; hover fills acid).
• Button sizes: sm (12px, 7x14 padding, 2px border, 3px shadow), md (15px, 12x22 padding, 3px border, 5px shadow), lg (19px, 16x30 padding, 4px border, 7px shadow); icon-only square uses equal 12px (or 16px lg) padding.
• Disabled state: 40% opacity, 4px static shadow, not-allowed cursor, no hover transform.
• Mono numbered section tabs (.tab): ink bg + paper text (or acid bg + ink text) pill with a 3px ink border, uppercase JetBrains Mono at 0.12em tracking.
• Graph-paper backdrop (.grid-paper): 26px x 26px grid of rgba(10,10,10,0.07) 1px lines used inside cards and section containers.
• Live-preview / prompt code card: bordered card with an ink title bar (acid mono filename + three tiny bordered window squares) and a graph-paper or ink body.
• Scrolling ticker marquee: ink bar with looping mono uppercase phrases alternating paper/acid color.
• Loading spinner: Phosphor circle-notch icon with a 0.7s linear infinite spin.

Superdesign UI · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.