SIGN IN · BLOCKWORK — Brutalist Acid login

Summary

A neobrutalist marketing-plus-login landing page on a warm off-white paper canvas. A sticky black-bordered nav sits over a full-bleed acid-yellow scrolling marquee, then a two-column hero: a left pitch column (oversized Archivo 'DESIGN THE LOGIN / SHIP THE PRODUCT.' headline with an acid highlight box, a bordered intro card, a 2x2 feature grid, and a black inline stats bar) against a right brutalist sign-in card with a '/ login' corner tab, email + password fields, a chunky acid 'Sign in' button, a keep-signed-in checkbox, and Google + GitHub SSO. Below the fold: a black trust bar, a three-step 'how it works' block, a full-bleed acid CTA with a faux code-canvas mock, and a four-column footer with a newsletter input and social icons. Every surface uses thick black borders and hard offset drop shadows.

Style

Hard neobrutalism: a warm paper off-white background (#f4f1ea), pure-black ink (#000000) for all text, borders and shadows, and a single electric acid-yellow accent (#e8ff00). Surfaces are flat white (#ffffff) or paper cards wrapped in heavy 2-3px solid black borders with hard, un-blurred offset box-shadows (5px/8px/12px black, no blur, no spread softening). No gradients, no rounded corners (everything is square), no soft elevation. Typography is loud and structural: Archivo for display/headlines (weights up to 900, uppercase, tight tracking, leading near 0.92), Space Grotesk for body/UI, and Space Mono for labels, eyebrows and code (uppercase, wide 0.16-0.18em letter-spacing). Decorative texture comes from a radial-dot grid background, a 45-degree repeating-stripe 'tick' pattern, and an infinite CSS marquee. Buttons and cards have a tactile 'press' interaction: on hover they translate down-right and the shadow shrinks; on active they slam flush and the shadow disappears. Inputs focus to a faint cream (#fffef2) with a stacked acid+black hard shadow.

Layout & Structure

A vertically stacked single-page composition, full-bleed sections capped to a centered max-width of 1180px with px-5/sm:px-8 gutters. Order top to bottom: (1) sticky black-bottom-bordered nav (68px), (2) a full-bleed acid marquee strip, (3) the hero + sign-in section on a dot-grid background as a two-column lg grid (gap 12-16) that reflows to one column on mobile and reorders the sign-in card above the pitch, (4) a full-bleed black trust/logo bar, (5) a 'how it works' three-card grid, (6) a full-bleed acid CTA section split 1.1fr/0.9fr between a headline+buttons block and a faux code-canvas mock, (7) a four-column footer with a newsletter capture and social icons over a top-bordered copyright row.

Sticky nav

Acid marquee strip

Hero pitch column (left)

Brutalist sign-in card (right)

Black trust bar

How it works (3 steps)

Acid CTA + canvas mock

Footer

Special Notes

Fonts loaded from Google Fonts: Archivo (weights 400-900) for display/headlines, Space Grotesk (400-700) for body/UI, Space Mono (400/700) for labels, eyebrows and code. Icons via Iconify (ph:squares-four-bold, ph:lightning-fill, ph:infinity-bold, ph:plugs-connected-fill, ph:export-bold, ph:check-bold, logos:google-icon, ph:github-logo-fill, ph:chat-text-bold, ph:cursor-click-bold, ph:code-bold) plus inline SVGs for the X/GitHub/Discord footer icons. Built on the Tailwind CDN with custom theme tokens: paper #f4f1ea, ink #000000, acid #e8ff00, and font families display/sans/mono. Everything is square (no border-radius) with thick 2-3px black borders and hard no-blur offset shadows. Sticky nav (68px) stays on top; the hero is a two-column lg grid that collapses to one column on mobile and reorders the sign-in card above the pitch (order-1). No em-dashes in copy. The anchor reference is a neobrutalism.dev login card, rebuilt and expanded into a full BLOCKWORK landing-plus-login page on the paper/ink/acid palette.