SPEED OF A PROMPT — Acid-Brutalist Hero

Summary

A neo-brutalist landing hero for an AI UI-generation tool, built on a warm paper canvas (#f4f1ea) with a faint ink grid texture, pure-black (#0a0a0a) 3px borders and offset hard drop shadows, and one electric acid-yellow accent (#e8ff00). The page reads as a confident print-poster: a sticky bordered nav, an oversized blocky display headline ('DESIGN AT THE SPEED OF A PROMPT') trapped inside a bordered paper block with a hard 12px shadow and the word 'speed' highlighted in an acid box, a blunt two-line subhead, mono supporting copy, two hard-shadow CTAs that physically press on hover/active, a mono trust strip, and a desktop-only cluster of three rotated 'spec cards' (prompt -> output -> canvas).

Style

Neo-brutalist / acid-brutalist print aesthetic. Canvas is warm off-white paper (#f4f1ea) overlaid with a subtle 56px ink grid (linear-gradients at rgba(10,10,10,0.05)). Everything is built from three colors only: paper #f4f1ea, ink #0a0a0a (text + every border), and a single electric acid-yellow #e8ff00 accent used for the eyebrow pill, the 'speed' highlight box, the primary CTA, the period dot, and the middle spec card. There are NO soft shadows, gradients on surfaces, or rounded corners (except tiny pill dots): structure comes from crisp 3px solid ink borders and hard offset box-shadows (8px 8px 0 ink standard, 5px for small, 12px for the headline block). Type is a two-family system: Archivo (grotesk) in its heaviest weights (800/900) for the wordmark, headline and CTA labels, set tight (letter-spacing -0.04em, line-height 0.82 on the display), all uppercase; and JetBrains Mono for nav links, eyebrow, supporting body and trust strip, uppercase with wide tracking. The interaction signature is a tactile button press: hover translates the button up-left and grows the shadow, active slams it down-right and shrinks the shadow.

Layout & Structure

Single full-bleed web hero, no device/browser frame. A sticky top nav (bordered, paper bg) sits above a grid-textured main. Content is centered to a max-w-[1180px] column with px-5/px-8 gutters. The hero is a two-column desktop grid: a flexible left content column and a fixed 300px right rail (minmax(0,1fr) 300px, gap-12, items-start). Left column flows top-to-bottom: acid eyebrow pill -> oversized headline inside a bordered paper block -> bold subhead -> mono supporting paragraph -> two stacked/inline CTAs -> mono trust strip. The right rail is a desktop-only (hidden below lg) decorative cluster of three rotated 'spec cards'. Below lg the right rail disappears and the headline scales fluidly (text-[16vw] -> 12.5vw -> fixed 102px), CTAs stack vertical-first.

Sticky nav

Eyebrow pill

Headline block

Subhead + supporting copy

CTAs

Trust strip

Spec-card rail (desktop only)

Components

Hard-offset shadow system

Depth is conveyed by solid, blur-less black drop shadows offset down-right, not soft blur. Three tiers: 5px (small chips/pills), 8px (cards/CTAs), 12px (the headline block). This is the defining brutalist device of the whole layout.

Tactile press button

Buttons feel like physical stamps: hovering lifts them up-left and grows the shadow; pressing slams them down-right and collapses the shadow, so the offset distance animates.

Boxed display headline with acid highlight

The oversized uppercase headline lives inside its own bordered, hard-shadowed paper block, and a single word ('speed') is wrapped in an inline acid-yellow box to spike attention; a small acid square acts as the closing period.

Rotated spec-card cluster

A purely decorative desktop-only rail of three slightly rotated mono 'spec cards' (prompt -> output -> canvas) that narrate the product flow and add brutalist asymmetry; it disappears on tablet/mobile.

Special Notes

FRAMELESS, responsive full-bleed web hero, not a screenshot inside device/browser chrome. Strictly three colors only: paper #f4f1ea, ink #0a0a0a (every text + every border), acid #e8ff00 (sparing accent); no other hues, no surface gradients, no rounded corners beyond tiny dots. Depth = 3px solid ink borders + hard zero-blur offset shadows (5/8/12px), never soft blur. Two fonts only: Archivo (weights 800/900, the display/wordmark/CTA labels, tight -0.04em tracking, line-height 0.82 on the H1) and JetBrains Mono (nav, eyebrow, body, trust strip, uppercase, wide tracking 0.12-0.14em). Background carries a faint 56px ink grid. Layout is a max-w-[1180px] centered column; the hero is a desktop two-column grid minmax(0,1fr) 300px with a desktop-only right spec-card rail (hidden below lg). The headline scales fluidly 16vw -> 12.5vw -> 102px; CTAs stack on mobile, inline on sm+. Buttons must keep the tactile press interaction. Icons via Iconify: material-symbols:arrow-right-alt-rounded, mdi:terminal, mdi:check-bold, mdi:vector-arrange-below.