OVERLAY — Modal Design, Built Loud (brutalist / acid)
A loud neo-brutalist / acid-yellow modal landing page anchored by a confirmation dialog: thick black borders, hard offset shadows, no rounded corners, Archivo black + Space Mono on a paper grid backdrop.
Summary
A neo-brutalist / acid-yellow modal-design landing page for an overlay-generation product, anchored by a hero-stage confirmation dialog. Everything is built loud: 4-5px solid black borders, hard offset drop-shadows (no blur), zero rounded corners, a flat off-white paper backdrop with a faint engineering grid, black-and-acid color blocking, and Archivo black uppercase display type paired with Space Mono labels. Sections (sticky nav, marquee ticker, hero+modal, dark anatomy band, modal-type library gallery, stats band, pricing, acid CTA, dark footer) all sit inside a 1240px column and reflow to a single stack on mobile.
Style
Neo-brutalist editorial system: flat paper backdrop (#f4f1ea) with a faint 40px engineering grid, pure-black ink (#000000) for all borders/text, acid-yellow (#e8ff00) as the single loud accent, and a quiet ash (#d9d4c6) for inset swatches. No gradients, no blur, no rounded corners. Hard offset shadows (e.g. 10px/10px and 6px/6px black, plus an 8px acid+black layered shadow) give every surface a physical, stamped feel. Buttons physically press: hover nudges -2px/-2px and deepens the shadow, active slams to +3px/+3px with a tiny shadow. Type: Archivo (900/800 black, UPPERCASE, tight tracking, leading ~0.92) for all display/headlines; Space Mono (400/700) for every label, body caption, eyebrow, and footer link, set in uppercase with wide letter-spacing (0.18em-0.25em). Acid is used as a text-highlight box behind single words (box-decoration-clone) and as the primary action fill.
Layout & Structure
A single centered max-w-1240px column with px-5 (mobile) / px-8 (desktop) gutters, stacked into full-bleed horizontal bands each separated by a 4px black bottom border. Order top to bottom: sticky nav, scrolling marquee ticker, hero (2-col: blunt headline left, the brutalist modal right on a grid backdrop), dark trust/logo strip, system feature grid (3 cols), full-bleed dark anatomy band (copy + annotated mini-modal), library gallery (tab strip + 3-col card grid of modal types), dark 4-up stats band, 3-col pricing with a featured middle tier, a full-bleed acid CTA, and a dark footer. Desktop multi-column grids collapse to a single stacked column on mobile; the hero modal stacks below the headline.
Sticky nav + marquee ticker
Hero (headline + the stage modal)
Trust strip + system feature grid
Anatomy dark band (annotated mini-modal)
Library gallery (tabs + modal-type cards)
Stats band + pricing + acid CTA + footer
Special Notes
Everything is square: there are NO rounded corners anywhere on the page. The accent acid-yellow (#e8ff00) is the ONLY color besides black, paper, and ash, so use it sparingly and loudly (one highlighted hero word, primary buttons, the lone color in dark bands). Shadows must be solid offset blocks, never soft/blurred. Display type is Archivo at 800-900 weight, always UPPERCASE with tight tracking; every label, caption, eyebrow, and link is Space Mono uppercase with wide letter-spacing. Note the 'paper' swatch dot uses a white fill + inset 2px ash ring (#d9d4c6) so it doesn't vanish against the #f4f1ea page. Section bands are separated by 4px solid black borders and most are full-bleed while content stays inside a centered max-w-1240px column. Icons are exclusively Iconify Phosphor 'bold' weight. Built with Tailwind (CDN) using custom theme tokens paper/ink/acid/ash and font families grotesk(Archivo)/mono(Space Mono).