PROMPTSMITH // People Who Stopped Staring at Blank Canvas

Summary

A loud neo-brutalist testimonial 'wall of proof' section for a prompt-to-UI design product, set on a warm paper ground (#f4f1ea) with near-black ink (#0a0a0a) and a single electric acid-lime accent (#e8ff00). Top-down: a sticky paper nav with a 3px ink bottom border (an ink tile + acid lightning logo, a JetBrains-Mono PROMPTSMITH wordmark, uppercase mono links, and an acid 'Start free' pill with a hard offset shadow); an ink->acid scrolling marquee strip of star-rating boasts; then the section itself over a dotted-grain texture: a header that pairs a huge four-line Archivo-black headline ('PEOPLE / WHO STOPPED / STARING AT / BLANK CANVAS.' with the last line knocked out as acid-on-ink) with a bordered two-cell stat block (4.9 avg rating | acid 2.1k reviews), a row of filter pills (one solid ink 'All proof' + outlined hover-acid pills), and a responsive 1/2/3-column grid of six testimonial cards. The cards are neo-brutalist panels with 3px ink borders and 6px hard offset shadows: a paper card, an acid feature card, an inverted ink card (acid text + acid hard-shadow), an acid pull-quote card with a giant quote glyph, plus 'via X' and verified-seal trust accents and ink/acid initials avatar tiles. It closes with an inverted ink CTA strip ('GOT A WIN TO SHARE?' + an acid 'Leave a testimonial' pill) carrying an acid hard-shadow. Archivo + JetBrains Mono, Iconify Phosphor icons, a CSS marquee animation.

Style

A confident neo-brutalist / 'acid editorial' style: warm off-white paper (#f4f1ea) ground, near-black ink (#0a0a0a) text and borders, and exactly ONE hyper-saturated accent, electric acid-lime #e8ff00, used for the feature card, the knocked-out headline tail, the stat highlight, hover states, avatars and the CTA pill. The whole system is built from heavy 3px ink borders (border-[3px] border-ink) and HARD, un-blurred offset box-shadows (6px 6px 0 ink for cards, 4px 4px 0 ink for small pills, 6px 6px 0 acid for the inverted/feature beats), never a soft blur, so everything reads as flat stacked paper. Type is a deliberate two-face pairing: Archivo (the 'grotesk', up to weight 900 / black) for headlines and quote bodies set tight (leading 0.9-1.1, tracking-tight), and JetBrains Mono (the 'mono') for everything utilitarian: nav links, byline names/roles, eyebrows, badges, the marquee and the stat numbers, all small, bold, UPPERCASE and wide-tracked (tracking-[0.12em]-[0.2em]). The page is textured with a faint dotted '.grain' (0.6px ink radial dots on a 14px grid) for a risograph feel. Interaction is physical: cards translate -2px,-2px and deepen their hard shadow to 9px on hover; pills/links nudge +1px,+1px and drop their shadow as if pressed. Mood: bold, punchy, a little zine/poster, high craft, anti-corporate; never soft, never gradient-y. Color discipline: only acid-lime as a hue over the paper/ink neutrals, strictly no second accent color.

Layout & Structure

A single full-bleed neo-brutalist testimonial section, content capped at max-w-[1240px] mx-auto with px-6/md:px-10, top-down: (1) a STICKY paper nav (h-68px, 3px ink bottom border) = an ink logo tile with an acid lightning bolt + a mono 'PROMPTSMITH' wordmark, center mono uppercase links (Library / Pricing / Proof / Docs, hidden below md), and an acid 'Start free' pill with a hard-sm shadow; (2) an ink->acid horizontal MARQUEE strip of star-rating boasts scrolling left forever; (3) the .grain-textured proof section with py-16/md:py-24 holding: a header row (flex-col -> lg:flex-row, items-end justify-between) pairing a max-w-[680px] left block (an acid eyebrow chip 'THE WALL OF PROOF', then a four-line Archivo-black headline 'PEOPLE / WHO STOPPED / STARING AT / BLANK CANVAS.' whose last line is knocked out acid-on-ink) with a right two-cell bordered STAT block (a paper '4.9 / avg rating' cell + an acid '2.1k / reviews & counting' cell); a row of FILTER PILLS (one solid ink 'All proof' + four outlined pills that go acid on hover); a responsive testimonial GRID (grid-cols-1 -> md:2 -> lg:3, gap-6) of six cards; and (4) an inverted ink CTA strip (flex-col -> md:row) with a 'GOT A WIN TO SHARE?' Archivo-black headline + mono subline on the left and an acid 'Leave a testimonial' pill on the right, carrying an acid hard-shadow. Responsive: the grid reflows 3 -> 2 -> 1 columns; the nav center links hide below md (only logo + Start-free pill remain); the header stacks the stat block under the headline below lg; the headline scales text-[40px] -> sm:[52px] -> md:[68px]; the CTA strip stacks below md.

Sticky paper nav

Marquee rating strip

Section header + stat block

Filter pills

Testimonial grid + card variants

Inverted CTA strip

Special Notes

Fonts via Google Fonts: Archivo (weights 400/500/600/700/800/900, mapped to fontFamily.grotesk, used for headlines + quote bodies) and JetBrains Mono (weights 400/500/700/800, mapped to fontFamily.mono, used for all nav/byline/eyebrow/badge/marquee/stat text). Styled with Tailwind via CDN using a custom theme with exactly three colors: paper #f4f1ea, ink #0a0a0a, acid #e8ff00. Body background #f4f1ea. Custom CSS: html scroll-behavior smooth; the hard-shadow utilities .shadow-hard (6px 6px 0 0 #0a0a0a), .shadow-hard-sm (4px 4px 0 0 #0a0a0a), .shadow-hard-acid (6px 6px 0 0 #e8ff00); .card transition transform .14s + box-shadow .14s with .card:hover translate(-2px,-2px) + box-shadow 9px 9px 0 0 #0a0a0a, and .card-acid:hover box-shadow 9px 9px 0 0 #e8ff00; .grain background-image radial-gradient(#0a0a0a 0.6px, transparent 0.6px) at background-size 14px 14px; and a .marquee keyframe (from translateX(0) to translateX(-50%)) running 22s linear infinite. Icons are the Iconify runtime (code.iconify.design) rendering Phosphor (ph:) icons: lightning-fill, chat-circle-text-fill, star-fill, star-half-fill, quotes-fill, x-logo-bold, seal-check-fill, arrow-right-bold. There is effectively no JS beyond the CSS marquee animation; nav links and pills are static anchors. The signature moves are the single electric acid-lime accent over warm paper + near-black ink, the heavy 3px borders with hard un-blurred offset shadows (including acid shadows on the inverted/feature beats), the physical translate-on-hover interaction, the acid-on-ink knocked-out headline tail, the four distinct neo-brutalist card variants in one grid, and the scrolling ink->acid rating marquee. Keep the palette strictly acid over paper/ink, never add a second hue; keep every shadow hard and offset, never blurred; keep avatars square, never round; keep the voice bold, zine-like and anti-corporate.