Design at the Speed of Prompt — Brutalist Acid Navbar
A full-bleed neo-brutalist 'acid' sticky navbar: an electric acid-yellow band with a hard 3px ink-black border holding a boxed-monogram PROMPTS/LAB wordmark, wipe-in underline center links, and a cluster of square paper-white hard-shadowed buttons (a ⌘K search field, an 8.4k star count, an X-social icon) ending in a black-on-acid START FREE CTA, with a black Space-Mono ticker marquee scrolling beneath. Archivo Black + Space Mono, Lucide icons, chunky offset box-shadows, every control presses on hover/active, and it collapses to a burger + stacked acid drawer on mobile.
Summary
A full-bleed neo-brutalist 'acid' sticky navbar: an electric acid-yellow (#e8ff00) band with a hard 3px ink-black bottom border, pinning a boxed-monogram wordmark (a black 'P' tile + 'PROMPTS/LAB'), a row of underline-on-hover center links (Library, Components, Canvas, Pricing, Docs), and a right cluster of hard-shadowed paper-white control buttons (a 'Search prompts' field with a ⌘K key, an 8.4k star count, an X-social icon) ending in a black-on-acid 'START FREE' CTA. A black ink ticker marquee scrolls beneath the bar. Built on Archivo / Archivo Black / Space Mono with Lucide icons and chunky 'hard' offset box-shadows, every control presses 2px on hover and 5px on active. It reflows to a search + black burger pair that toggles a stacked acid drawer on mobile.
Style
An aggressive neo-brutalist / 'acid' aesthetic: a single electric acid-yellow (#e8ff00) carries the whole brand, set against near-black ink (#0a0a0a) and a warm off-white paper (#f4f4ec). Everything is squared-off (no rounded corners), framed in heavy 3px (or 2px) ink borders, and lifted on hard, un-blurred offset box-shadows (solid black at 3/5/7px offset) so controls look like physical stickers you can press. Typography does the shouting: ultra-heavy Archivo Black for the wordmark and uppercase headings with tight negative tracking, bold Archivo for nav labels, and Space Mono for monospaced metadata (counts, the ticker, the ⌘K key). Hover presses a control 2px into its shadow, active slams it 5px flat. No gradients, no soft shadows, maximum contrast.
Layout & Structure
A `sticky top-0 z-50` `<header>` of two stacked full-bleed tiers: (1) a `w-full bg-acid` nav band with a 3px ink bottom border whose inner content centers in a `mx-auto max-w-[1240px] px-5 lg:px-8` column at a 76px (lg 84px) row height, laying out three zones - a boxed-monogram wordmark on the left, an `mx-auto` row of five center links (desktop only), and a right cluster of hard-shadowed paper buttons ending in the black 'START FREE' CTA; (2) a black `bg-ink text-acid` ticker strip with an infinite monospace marquee. A mobile cluster (search icon + black burger) replaces the links + right cluster below lg and toggles a stacked acid drawer (`#drawer`, hidden by default, links + CTA as full-width hard-shadowed bars) rendered between the bar and the ticker.
Sticky two-tier header shell
Acid nav band + centered column
Boxed-monogram wordmark (left)
Center nav links (desktop)
Right control cluster (desktop)
Mobile cluster + drawer
Black ticker marquee (tier 2)
Responsive reflow
Special Notes
Exact color tokens (Tailwind config): acid #e8ff00 (the single electric accent: the nav band, the highlight chip, the CTA's text-on-black, selection text, deco blocks), ink #0a0a0a (every border, all text, the hard shadows, and the black CTA + ticker + monogram fills), paper #f4f4ec (warm off-white page + button fills), band #1a1a1a (defined, used sparingly). Fonts (Google Fonts): grotesk = Archivo (400/600/700/800/900), black = 'Archivo Black', mono = 'Space Mono' (400/700) - the wordmark + uppercase headings use font-black with a custom .tracker letter-spacing -0.03em; counts, the ⌘K key, and the ticker are Space Mono. Custom hard (un-blurred, solid-black) box-shadows: hardsm '3px 3px 0 0 #0a0a0a', hard '5px 5px 0 0 #0a0a0a', hardlg '7px 7px 0 0 #0a0a0a', hard-acid '5px 5px 0 0 #e8ff00'. Borders are square + heavy: .ink-border 3px solid #0a0a0a, .ink-border-2 2px solid #0a0a0a, no border-radius anywhere. The .press interaction (transform/box-shadow .08s) presses every .has-hard control 2px on hover (shadow to 3px) and 5px on active (shadow to 0). Icons: Iconify Lucide (search, star, arrow-up-right, menu, arrow-right, play, check) + ri:twitter-x-fill. The header is `sticky top-0 z-50` with two full-bleed tiers (acid band + black marquee) sharing the centered `max-w-[1240px] px-5 lg:px-8` column; bar height 76px -> 84px at lg. Built with the Tailwind CDN + Iconify. The page beneath (a grid-paper brutalist hero with an uppercase 'DESIGN AT THE [SPEED] OF PROMPT' H1, deco blocks, two CTA buttons, mono trust line, and an acid 'Trusted across the stack' proof band) is demo context so the sticky bar has something to scroll over; the prompt-library value is the navbar pattern itself.