FORMCAST: Forms That Don't Mumble

Summary

A neo-brutalist 'FORMCAST' landing page built around THE form: an acid-yellow on warm-paper system (paper #f4f1ea page, acid #e8ff00 accent, near-black ink #0a0a0a) where everything is bounded by 3px ink borders and hard offset drop-shadows. The hero is a two-column split: a left pitch (eyebrow pill, a huge Archivo-900 headline with an acid highlight on 'DON'T MUMBLE.', sub-paragraph, two chunky CTAs, and a row of checkbox trust items) beside the right 'live preview' form card, a thick-bordered profile form showing the full range of field states (a plain text field with helper, a valid email field with an acid check chip, a 3-way segmented Plan control, a prefix workspace-slug field in an error state, an acid checkbox, and a chunky acid Submit). Below: a scrolling ink marquee ticker, a 6-card patterns grid, an acid library strip of category cards, a 3-step 'how it works' bordered band, a 2-card pricing block (free paper card + dark ink 'most cast' card), an acid CTA band, and a footer with a newsletter capture. Brutalist by default, themeable via a single accent variable; reflows to one column on mobile.

Style

Neo-brutalism / brutalist web. Every surface is a hard rectangle bounded by a 3px solid ink border (#0a0a0a) with a hard, un-blurred offset drop-shadow (e.g. 6px 6px 0 ink). No rounded corners, no soft gradients, no blur. A warm off-white paper (#f4f1ea) ground, near-black ink for text and borders, and one electric acid-yellow (#e8ff00) accent used for highlights, active states, CTAs and icon tiles. A faint 44px ink dot/line grid sits behind hero/library/pricing strips. Typography is a deliberate triple: Archivo (up to 900 weight) for display/headlines/labels, Space Grotesk for body, Space Mono for eyebrows/meta/tickers. Interactions are physical: fields and buttons translate up-left on hover (shadow grows to 8px) and press down-right on active (shadow shrinks to 1px). Loud, blunt, high-contrast, confident, zero ambiguity.

Layout & Structure

A full vertical landing page on a max-w-6xl (1152px) centered column, every section separated by a 3px ink bottom border: a sticky brutalist nav, a two-column hero (pitch + live form card), a scrolling ink marquee ticker, a 'what it gives you' 6-card patterns grid, an acid 'library' strip of 4 category cards, a 3-step bordered 'how it works' band, a centered 2-card pricing block, an acid CTA band, and a 4-column footer. The hero is grid-cols-[1.05fr_0.95fr] on lg and stacks on mobile; all multi-column grids collapse to one column on small screens.

Sticky nav

Hero (pitch + live form)

Live-preview form card (the hero component)

Marquee ticker

Patterns grid

Library strip

How-it-works band

Pricing

CTA band

Footer

Components

Brutalist input field with focus-lift

Valid field with acid check chip

Error field with prefix + warning line

Three-way segmented control

Acid checkbox

Chunky brutalist button (.btn-press)

Hard-shadow icon tile

Infinite marquee ticker (.ticker-track)

Special Notes

Built on the Tailwind CDN with tailwind.config custom named colors paper #f4f1ea, ink #0a0a0a, acid #e8ff00, custom fontFamily display=Archivo / grotesk='Space Grotesk' / mono='Space Mono', and named boxShadow hard=6px 6px 0 0 #0a0a0a, hardlg=10px 10px 0 0 #0a0a0a, hardsm=4px 4px 0 0 #0a0a0a. Fonts load from Google Fonts (Archivo 400-900, Space Grotesk 400-700, Space Mono 400/700); icons are Iconify Phosphor (ph:*) via the iconify-icon CDN; inline SVGs are used for the check and warning marks so state is shape-based not color-only. The 44px background grid is a CSS .grid-bg utility (two rgba(10,10,10,0.07) 1px linear-gradients). All micro-interactions (.btn-press, .field-focus, .lift, the ticker) are CSS transitions/keyframes, so on a single static frame the hover-lift, focus-lift and ticker scroll only fully animate live; the form is shown with illustrative values ('ekmas', 'hey@formcast.dev', a pre-acid 'Free' segment, an error 'my space' slug, a pre-checked checkbox) to demonstrate the field-state range. 'FORMCAST' is an illustrative product/brand placeholder for a generic brutalist form-builder landing.