Questions, Answered Loudly — A Brutalist FAQ
Loud neo-brutalist FAQ landing page on warm paper with one acid-yellow accent: a sticky 3px-bordered nav, a graph-paper hero ('Questions, answered loudly.' with an acid underline highlight), a scrolling ink marquee, and a stack of hard-offset-shadow accordion cards (one pre-opened with an acid bar + a plus-to-minus toggle), closed by a black 'Still stuck?' CTA card and an acid pricing band.
Summary
A loud neo-brutalist FAQ landing page. A sticky paper nav with a heavy 3px ink border sits over a full-bleed graph-paper hero ('Questions, answered loudly.' with an acid-yellow underline highlight on the last word) and a scrolling ink marquee strip of product proof points. The FAQ itself is a stack of thick-bordered cards, each carrying a hard 6px offset drop-shadow; one row ships pre-opened with an acid-yellow summary bar and a minus toggle while closed rows show a paper bar and an acid-yellow plus box. A black 'Still stuck on something?' CTA card with an acid offset shadow and a full-bleed acid pricing teaser band close the page above a paper footer.
Style
Aggressive neo-brutalist / Swiss-poster aesthetic. The whole page sits on a warm paper #f4f1ea base; near-black ink #0a0a0a carries every border (a consistent 3px stroke), all text, and the inverted marquee / CTA / footer-mark fills; a single high-voltage acid #e8ff00 yellow is the only accent and it does the loud work: the hero word highlight, summary bars on the open row, plus/minus toggle boxes, button fills, the marquee proof chips and the full-bleed pricing band. The brutalist signature is the HARD OFFSET SHADOW, a solid (non-blurred) 6px 6px 0 ink shadow on cards (4px on small chips, 10px on the open row, and a 6px acid shadow on the black CTA card), never a soft blur. A faint ink graph-paper grid (38px cells at 6% opacity) backs the hero, echoing engineering paper. Type is all-caps and brutal: Archivo (a grotesk, used at weight 800/900 for headlines, nav and buttons) paired with Space Mono (monospace, used for eyebrows, body copy and the marquee), with tight tracking on display type and wide tracking on the mono eyebrows. Interactions are physical: buttons translate up/left on hover and snap back on active, the marquee scrolls infinitely, and the CSS-only accordion expands via a grid-template-rows 0fr->1fr transition.
Layout & Structure
A sticky paper nav with a 3px ink bottom border, then a full-bleed graph-paper hero, an ink marquee strip, the FAQ section (an intro split-header + a stack of hard-shadow accordion cards + a black CTA card), a full-bleed acid pricing teaser band, and a paper footer. The page is centered in a max-w-[1180px] container with px-5 / sm:px-8 gutters, divided by full-bleed 3px ink section borders.
Sticky nav
Graph-paper hero
Marquee strip
FAQ intro header
Accordion card (closed)
Accordion card (open / active)
CTA card + pricing band + footer
Special Notes
Centered max-w-[1180px] container with px-5 / sm:px-8 gutters throughout, sections divided by full-bleed 3px ink bottom borders. Palette is fixed and minimal: paper #f4f1ea base, ink #0a0a0a for ALL borders (3px) + text + inverted fills, and exactly one acid #e8ff00 accent. Fonts are Archivo (grotesk, weights 400-900, uppercase display/nav/buttons) + Space Mono (monospace, eyebrows/body/marquee), via Google Fonts; icons are Phosphor (ph:*) via Iconify. Exactly one accordion row ships pre-opened. Every shadow is a HARD solid offset (no blur), and nothing is rounded. Responsive: the nav center links collapse to a hamburger below md, the hero/headlines scale via clamp, the FAQ split-header and the CTA card stack to a single column on small screens, and there is no horizontal overflow at 390px. Copy is human and reassuring with zero em-dashes (warm proactive-friend voice: 'No fluff, no support bot', 'ping us and we'll sort it together', 'Real reply from a real person, usually same day').