Brutalist Mono

Overview

Brutalist Mono is the interface with its structure showing. It rejects polish as a signal of quality and replaces it with honesty, contrast and conviction: black on white, hard edges, visible grids, thick rules, and type that looks like it came out of a terminal or a photocopier. It should feel raw, confident and a little confrontational — a manifesto, a zine, a dev tool that does one thing and says so in capital letters.

There is exactly one colour: Acid Yellow (#E4FF1A). Everything else is black, white and a few greys. Dark mode simply inverts the world — near-black page, white rules — and the acid yellow gets even louder.

Density is medium; scale contrast is extreme. Massive Space Grotesk headlines sit next to small mono body text. Nothing is rounded, nothing is blurred, nothing fades.

Colors

• Background (#FFFFFF) — "Paper White" and Foreground (#000000) — "Toner Black": pure values, 21:1. This is the one system where pure black and pure white are correct.
• Primary (#E4FF1A) — "Acid": primary buttons, highlights, the selected tab, text selection, marker-style highlights behind key words. Always carries black text (18.6:1). Never use acid as text or as a thin line on white — it disappears. On dark it may be used as text.
• Secondary (#000000): the inverse slab — black buttons and badges with white text.
• Accent (#000000 with #E4FF1A text): hover and selected rows in menus and lists invert to black with acid text. In dark mode this flips to an acid fill with black text.
• Muted (#F2F2F2) / Muted foreground (#555555): the only greys for text — captions, metadata, disabled. 6.7:1 on muted, 7.5:1 on white.
• Border / Input / Ring (#000000): every border is black (white in dark mode) and at least 2px. Focus is a 3px solid ring offset 2px; in dark mode the ring turns acid.
• Destructive (#E00000): pure alarm red, used as text and 2px borders.
• Charts: black, acid, and three greys. Distinguish series with hatching and patterns, and outline every bar or slice in 2px black.

Typography

Two families from the same foundry family — Space Grotesk shouts, Space Mono talks.

• Display (Space Grotesk 80px/700, 0.95, -0.04em): hero statements, often uppercase, allowed to run edge-to-edge and break mid-word on mobile.
• Headline-lg (48px/700) / Headline-md (28px/700): page and section titles. Tight leading, tight tracking.
• Body-lg / body-md / body-sm (Space Mono 17 / 14 / 12px, 400): all running text is monospace. Keep paragraphs short — mono is slower to read, so cap the measure at ~64ch.
• Label-md / label-sm (Space Mono 700, +0.04em / +0.08em): buttons, tabs, badges, table headers — always UPPERCASE.
• Mono (Space Mono 13px): code, data, numbers.

Space Mono ships only 400 and 700; use exactly those. Prefix things with typographic devices: →, //, [01], *, #. Numbered sections (01 / FEATURES) are encouraged.

Layout

An exposed 12-column grid with 2px black gutters drawn as rules — the grid lines are part of the design. 8px base, with big jumps: 24px inside components, 48px between blocks, 96px between sections. Max width 1280px, but full-bleed bands (an acid-yellow marquee, a black footer) are welcome. Align everything hard-left; asymmetric layouts and oversized numbers in the margin are on-brand. Tables are first-class: full 2px borders on every cell.

Elevation & Depth

No blur, no soft shadows, no gradients. Depth is a hard offset shadow: 4px 4px 0 0 #000000 (white in dark mode) on cards, buttons and popovers. Interactive elements "press" by translating 4px down-right and dropping the shadow to 0 — a physical, mechanical click. Overlays use a solid 2px-bordered panel over a flat 60% black scrim, never a blurred backdrop.

Shapes

Zero radius, everywhere, always. --radius is 0 and every rounded.* token is 0 — including full; avatars are square, status dots are squares, checkboxes and radio buttons are squares (the radio's checked state is a filled inner square). Borders are 2px by default, 4px for emphasis (hero frames, active tabs). Icons are 2px-stroke, square line caps, 20–24px.

Components

• Primary button: acid fill, black UPPERCASE label-md, 2px black border, 48px tall, 4px hard shadow; press = translate(4px, 4px) and shadow 0.
• Secondary button: black slab with white text (inverts to white/black in dark mode).
• Outline button: white with 2px black border and black text; hover fills acid.
• Card: white, 2px black border, 4px hard shadow, 24px padding, 0 radius. Card headers can be a full-width black bar with white label-md text.
• Input: 48px tall, 2px black border, 0 radius, mono body text; focus = 3px ring offset 2px. Labels are UPPERCASE label-sm above the field.
• Badge: black slab, white label-sm, square. Use acid badges only for "NEW"/"LIVE".
• Menu / list hover: full-row inversion to black with acid text.
• Tabs: square segments separated by 2px rules; active tab is acid fill.
• Marquee / ticker: acid band with black uppercase mono, scrolling linearly.

Do's and Don'ts

• Do use 0 radius on every element, including avatars, dots and checkboxes.
• Do draw 2px solid borders (4px for emphasis) and use the 4px hard offset shadow for depth.
• Do set UI labels in UPPERCASE Space Mono bold and headlines in tight Space Grotesk 700.
• Do keep the palette to black, white, greys and a single acid yellow.
• Do invert (black ↔ white/acid) for hover, selection and active states.
• Don't use acid yellow as text or thin lines on a white background.
• Don't add blur, gradients, soft shadows, glassmorphism or rounded corners.
• Don't use font weights other than 400 and 700, or any typeface outside the Space family.
• Don't ease motion softly — use instant state changes or linear/steps() animations under 150ms.
• Don't center everything; hard-left alignment and visible grid lines are the point.

Motion

Motion language: quiet (MOTION.md) — but hard-edged: instant, mechanical, no easing curves that feel soft.

• Durations: 80–120ms; state changes may be instant (0ms) for a raw feel.
• Easing: steps(2, end) or linear for mechanical toggles; cubic-bezier(0.2, 0, 0, 1) when something must travel.
• What animates: hard offset-shadow press (shadow collapses to 0 on press), hover invert (black ↔ acid), marquee ticker of text, typewriter/encrypted text once in the hero.
• What doesn't: blur, glow, gradients, springs, parallax.
• Respect prefers-reduced-motion: stop marquees and typewriters; keep instant state changes.

Agent Prompt

You are designing in the Brutalist Mono system: stark black-and-white brutalism with zero border radius, 2px black borders, 4px hard offset shadows and one acid-yellow accent (#E4FF1A) that always carries black text. Set headlines in Space Grotesk 700 with tight tracking and huge scale, and set all body copy, labels and data in Space Mono (400/700), with UPPERCASE labels and devices like →, // and [01]. Hover and selection states invert colours rather than tint them; buttons press by translating into their shadow. Dark mode is a near-black page with white rules and an acid focus ring. Motion is instant or linear — terminals, encrypted-text reveals, tickers and number pops are on-brand; blur, glass, gradients and soft easing are forbidden. Use shadcn/ui primitives with every radius forced to 0 and borders thickened to 2px.

Pairs well with

• aceternity/terminal
• aceternity/encrypted-text
• aceternity/infinite-moving-cards
• aceternity/noise-background
• aceternity/bento-grid
• beautifui/diff-table
• transitions/number-pop-in
• transitions/tabs-sliding
• oc/pricing-simple
• oc/feature-bento