Brutalist
brutalistRaw grids, thick ink strokes, hard shadows, loud primaries.
Neo-brutalist web: paper background, 3px black strokes, zero radius, offset shadows that never blur, heavy grotesk headlines and mono labels. Interactions are mechanical — elements press into their shadow.
- Fonts
- Archivo Black · displaySpace Grotesk · bodySpace Mono · mono
- Demo product
- Shipyard — Changelogs, release notes and in-app announcements generated from your Git history.
- Palette
Use Brutalist in your project
Installing any Brutalist module brings its tokens. Then follow the one-time setup.
Setup guideSections 32
Navbar4 variants
Navbar Bold
Sticky top bar with square logo mark, mono uppercase links, underlined login and a pressable yellow CTA. Collapses into a full-width stacked menu on mobile.
Navbar Centered
Boxed navbar card with a hard shadow: links split left and right around a tilted yellow wordmark sticker in the center, ink CTA pressing into its shadow. Mobile opens a two-column ruled menu grid.
Navbar Overlay
Minimal bar (wordmark + ink MENU button with animated burger) that opens a full-screen yellow overlay with giant numbered links sliding on hover, a contact line and CTA. Same menu on every screen size.
Navbar Ticker
Two-tier sticky header: a scrolling ink announcement ticker on top, then a ruled bar where every link is a full-height cell that floods yellow on hover and a blue CTA block on the right.
Hero4 variants
Hero Poster
Poster-style centered hero: gigantic stacked headline alternating solid and outlined words, colored feature stickers scattered around it, two pressable CTAs and a ruled wordmark strip of customer logos.
Hero Signup
Conversion hero with the signup form in the fold: headline with a blue highlighted phrase, boxed email capture with pending/success states, checkmark reassurance list and three staggered colored step cards.
Hero Stacked
Split hero with a huge stacked uppercase headline (one line boxed in yellow), two pressable CTAs, a stats strip and a changelog window mock with a rotated sticker.
Hero Terminal
Developer-first hero: full-width uppercase headline, copyable install command button, and an ink terminal window that replays a git merge → publish session line by line with a blinking yellow cursor.
Features4 variants
Features Grid
Six features in a single ruled box (1/2/3 columns) with numbered tiles, color-cycling icon blocks that press on hover, and a two-column section header.
Features Numbered
Full-width ruled rows with giant faded step numbers, uppercase titles, descriptions and a stat chip; each row floods with a different primary color on hover and the number turns solid.
Features Tabs
Tabbed feature explorer: ruled mono tab bar (ink active tab), then a big split panel with title, description and square-bullet list on the left and a stacked mock preview of the channel on the right.
Features Versus
Before/after comparison: two slightly tilted cards side by side — the old way in paper with red crosses, the new way in solid yellow with ink checks — row by row on the same topics.
Pricing4 variants
Pricing Comparison
Full feature matrix: ruled table with plan headers (price + CTA, highlighted plan in yellow), ink group separator rows and check / dash / text values, horizontally scrollable on mobile.
Pricing Single
Single-plan pricing card: giant price on a yellow panel, numbered feature grid on paper, full-width ink CTA, guarantee line and a rotated pink discount sticker.
Pricing Slider
Usage-based pricing calculator: chunky range slider with a square yellow thumb, live per-unit and total price (volume tiers), included-features list and an ink CTA bar.
Pricing Tiers
Three plans glued together in one ruled strip, the highlighted plan pops out in solid yellow with a rotated badge. Monthly/yearly toggle with discount chip, custom-price plan support.
Testimonials4 variants
Testimonials Big Quote
Full-bleed blue section showing one giant uppercase quote at a time with a tilted yellow metric card, author row, pressable prev/next buttons and bar-shaped pagination.
Testimonials Logos
Case-study strip: four ruled cells, each with a company wordmark, a giant result number, its label and a one-line quote, alternating solid and paper tones.
Testimonials Posts
Social-post wall: ruled cards styled like timeline posts (square colored avatar, handle, date, casual copy, reply/repost/like counts) in a 3-column grid with a 'see more' CTA.
Testimonials Wall
Wall of quote cards in alternating solid colors with hard shadows, initials avatars and optional rotated metric stickers ("2× adoption").
FAQ4 variants
FAQ Accordion
Two-column FAQ: sticky title + support CTA on the left, numbered accordion cards on the right with a yellow plus that rotates into an ink cross when open. Built on Radix Accordion.
FAQ Categories
Help-center style FAQ: topic buttons with counts on the left (stacked on desktop, wrapped on mobile), and a ruled accordion on the right whose open question floods yellow.
FAQ Grid
Always-open FAQ grid: ruled cells (1/2/3 columns) with a yellow question-mark square, uppercase question and answer, closed by a full-width ink contact row. No interaction needed.
FAQ Search
Searchable FAQ: a huge ruled search field that presses in on focus, live result count, and native <details> cards with tags; a pink empty state points to support.
CTA4 variants
CTA Banner
Full-bleed yellow slab with a giant uppercase headline and an inline email capture form (pending + success states), ruled pattern in the corner.
CTA Countdown
Limited-offer CTA in an ink slab: uppercase offer headline, yellow claim button, dashed promo code, and a four-cell live countdown (days/hours/min/sec) with the first cell in yellow.
CTA Split
Two-audience CTA: a big headline over two fully clickable cards (yellow for engineers, blue for product teams) with audience label, title, pitch and a button chip; cards slam into their shadow on hover.
CTA Sticker
Full-bleed pink CTA with a giant centered uppercase headline, an oversized ink button that slams into its shadow on hover, and a yellow circular text-path sticker ticking around in steps.
Footer4 variants
Footer Bar
Single-row ruled footer for apps and docs: wordmark, link cells that flood yellow on hover, green status square and copyright, each separated by vertical strokes; stacks on mobile.
Footer CTA
Footer that opens with a full-bleed yellow call-to-action band (huge headline + ink button), then brand with social chips, three link columns and a copyright line on paper.
Footer Mega
Inverted ink footer with brand + status pill, three link columns, a viewport-wide wordmark and a legal bar. Link hover paints a yellow highlight.
Footer Sitemap
Dense sitemap footer: boxed newsletter strip with success state, five ruled link columns with pink badges (New, hiring count), then brand, legal links and a language select.
UI components 24
Button4 variants
Button
Pressable button with 6 variants (primary, secondary, ink, outline, ghost, danger), 4 sizes, icons, loading state and link mode (href). Hard shadow collapses on hover/press.
Copy Button
Code field with an attached yellow copy button that flips to green 'Copied' with a check; optional secret masking for API keys and custom display text for commands.
Segmented Control
Ruled segmented control for mutually exclusive options: mono uppercase segments split by strokes, ink selected segment, yellow hover. Controlled or uncontrolled, typed values.
Split Button
Yellow primary action glued to a chevron trigger that opens a ruled dropdown of secondary actions with descriptions (Radix DropdownMenu). Both halves flip to ink on hover.
Card4 variants
Card
Composable card (Card, CardHeader, CardKicker, CardTitle, CardDescription, CardContent, CardFooter) with 5 solid tones, 3 hard-shadow depths and an interactive press-on-hover mode.
Profile Card
User/team member card: striped blue banner with status chip, overlapping yellow initials square, uppercase name and mono role, bio, ruled stat strip and a split action bar.
Release Card
Changelog entry card: yellow version/date column (top bar on mobile), uppercase title (optional link), summary and a list of changes tagged new / improved / fixed / breaking with fixed-width colored labels.
Stat Card
KPI card: mono label, icon square, giant value, green/red delta chip with arrow, and an outlined mini bar chart whose last bar is filled. Four solid tones.
Input4 variants
Input
Labelled text field with hint, error state, leading icon, suffix slot and two sizes. The field presses into its shadow on focus; errors switch to a red stroke with an explicit message.
Number Stepper
Numeric input flanked by chunky yellow − / + buttons (disabled at bounds), big display-font value, optional unit suffix; clamps typed values to min/max.
OTP Input
One-time-code input: ruled digit squares (split 3+3 for six digits) that turn yellow and press in on focus; auto-advance, backspace and arrow navigation, paste of the full code, completion callback and error state.
Textarea
Labelled multi-line field with a live character counter chip that turns orange near the limit, hint and error states; presses into its shadow on focus.
Modal4 variants
Confirm Dialog
Destructive confirmation (Radix AlertDialog) over a hazard-striped overlay: red 'Danger zone' band, consequences list, and a type-the-name field that arms the delete button; async pending state.
Drawer
Side sheet (Radix Dialog) sliding in from the right or left in stepped motion: yellow title band with close square, scrollable body for forms, ruled footer actions.
Modal
Accessible dialog on Radix Dialog: colored title band (primary or danger), close button, scrollable body, footer action bar. Re-applies the DA scope inside the portal. Stepped drop-in entrance.
Onboarding Modal
Multi-step onboarding dialog: a colored visual panel (giant step number by default) next to title, description, segmented progress bar and Back/Next buttons; resets on open.
Badge4 variants
Badge
Mono uppercase label with ink stroke in 8 solid variants (status + brand colors), two sizes, optional square status dot and a tilted sticker mode.
Counter Badge
Notification counter that wraps any element (icon button, avatar) and pins a ruled square count to its corner; caps at max+, dot mode, three tones, hidden at zero.
Sticker Badge
Round SVG sticker badge: dashed scalloped edge, text running around a circular path, big center label, hard offset drop shadow and a slight tilt. Four solid tones, any size.
Tag List
Editable tag field: color-cycling ruled chips with remove buttons inside a boxed input, Enter/comma to add, Backspace to remove last, quick-add suggestion chips and a max limit.
Table4 variants
Data Table
Typed generic table with a yellow caption bar + toolbar slot, ruled rows, sortable columns (asc → desc → none), custom cell renderers, mobile column hiding, empty state and optional row click.
Expandable Table
Table with expandable rows: a ruled chevron square per row reveals a detail row underneath; the open row floods yellow. Single or multiple open rows.
Leaderboard Table
Ranked list with ink header, colored podium squares for the top 3, proportional background bars behind each row, rank-change chips (▲/▼) and big tabular values. Sorts by value automatically.
Simple Table
Server-safe static table: uppercase caption, ink header row with column rules, zebra rows, right-aligned mono numeric columns and an optional yellow totals footer.
App layouts 12
Sidebar4 variants
App Sidebar
App shell with a sticky left sidebar: workspace header, grouped nav with yellow active state and counters, usage meter, user footer. Becomes a top bar + slide-over drawer below lg.
Icon Rail
Compact 80px icon rail: ink brand square, square icon links with yellow active state, red counters and ink tooltips on hover/focus, settings pinned at the bottom. Server-safe, CSS-only tooltips.
Sidebar Collapsible
App sidebar that collapses from 256px to a 76px icon column with a stepped width animation; ink active item, labels become sr-only when collapsed, collapse toggle pinned at the bottom.
Sidebar Dual
Two-level navigation: an ink icon rail switches sections, and a paper second panel lists that section's links with counts and a yellow active link. Second panel hides on very small screens.
App header4 variants
App Header
Two-tier app header: top bar with breadcrumbs, ⌘K search field, notification bell with counter and avatar; page band with big title, meta line, primary action and folder-style tabs.
Header Compact
Dense 56px app header built from ruled cells: title with count chip, view tabs (yellow active cell), filter search, ink 'New' cell, and an optional strip of active filter chips.
Header Editor
Document/editor header: back cell, version chip, inline-editable uppercase title, save-status chip (saved/saving/unsaved), Preview cell and a yellow Publish cell; actions wrap to a full-width bar on mobile.
Header Stats
Dashboard welcome header: yellow band with eyebrow, big greeting, status sentence and two pressable actions, over a ruled KPI strip (2×2 on mobile, 4 across on desktop) with green delta chips.
Auth screen4 variants
Auth Card
Centered login card on a dotted paper background: tilted wordmark sticker, ink title band, GitHub button, email + password with forgot link, error slot and a big pressable yellow submit.
Auth Magic Link
Passwordless login split screen: blue product panel with staggered pipeline cards (desktop), huge uppercase headline, single email field and yellow send button, then a 'Check your inbox' state with open-mail and retry actions.
Auth Screen
Split sign-in / sign-up page: form column with GitHub & Google buttons, email + password (show/hide), remember-me, error slot and pending state; yellow grid panel with a big customer quote on desktop.
Auth Signup Steps
Three-step signup wizard: ruled step tabs (done in ink, current in yellow) fused to a card with account fields, team size and use-case tile choices, Back/Continue and a success state.
Effects 16
Background4 variants
Hover to playAnimatedDots Background
Halftone dot field in the DA ink color that pans slowly on a diagonal, radially masked so dots fade toward the edges. Pure CSS, configurable gap, dot size and speed.
Hover to playAnimatedGrid Background
Section background: a ruled grid drawn with the DA stroke color that drifts diagonally, solid color blocks that blink in hard steps, and an optional SVG grain layer. Wraps any content.
Hover to playAnimatedShapes Background
Scattered geometric SVG shapes (squares, circles, triangle, plus) in DA colors with ink outlines and hard shadows, bobbing and tilting in stepped (6-frame) motion behind content.
Hover to playAnimatedStripes Background
Diagonal hazard stripes (DA color + ink) marching sideways, either as a full background or as two ruled 'hazard tape' bands at top and bottom. Pure CSS, seamless loop.
Transition4 variants
Hover to playAnimatedFlip Reveal
Scroll-triggered 3D flip: the element swings in on its top or left hinge like a hanging sign board and lands in four hard steps. Stagger siblings with delay.
Hover to playAnimatedSlam List
Staggered list entrance: every child slams in from the side or bottom with a tilt and a stiff spring jolt, one after another, when the list scrolls into view. Wraps each child in an li (or div).
Hover to playAnimatedStamp Reveal
Scroll-triggered entrance that stamps content onto the page: drops from above at 125% scale with a tilt and snaps into place in three hard steps. Stagger with delay, optional final tilt.
Hover to playAnimatedWipe Reveal
Scroll-triggered block wipe: a solid DA color slab with ink edges sweeps across the element, the content appears underneath at mid-sweep, then the slab exits the other side. Left, right or up.
Micro interaction4 variants
Hover to playAnimatedClick Burst
Micro-interaction wrapper that fires a burst of outlined square shards in DA colors from the click point (or from the center on Enter/Space), spinning outward in stepped motion.
Hover to playAnimatedCursor Follower
Region where a tilted, outlined sticker label trails the mouse pointer with a springy lag and pops in/out on enter/leave. Mouse only; add cursor-none on the region to replace the cursor.
Hover to playAnimatedShake Feedback
Error micro-interaction wrapper: shakes its content horizontally in hard steps and flashes a thick danger outline each time shakeKey changes (wrong password, invalid code). Children keep their state.
Hover to playAnimatedStack Hover
Micro-interaction wrapper: colored slabs hidden behind a card or button fan out diagonally on hover and keyboard focus, in stepped motion, like a stack of printed sheets. Pure CSS.
Text4 variants
Hover to playAnimatedGlitch Text
Print-misregistration glitch: two offset copies of the text in accent and secondary colors jitter in horizontal slices, constantly or only on hover/focus. Pure CSS, blend mode adapts to dark.
Hover to playAnimatedMarquee Band
Tilted full-bleed ticker band with giant uppercase words scrolling infinitely between ruled strokes. Seamless loop, direction and speed props, three color tones.
Hover to playAnimatedScramble Text
Decoder-style mono text: random glyphs resolve left to right into the final string when it scrolls into view, and again on hover or focus. Great for version numbers, stats and labels.
Hover to playAnimatedTypewriter Text
Headline with a static prefix and a rotating last word that is typed character by character, held, deleted and replaced, followed by a blinking block cursor.
Set up Brutalist in your project
Once per project. Installing any Brutalist module copies its tokens for you — or install them alone first. New to Artmode? Start with the getting started guide.
npx shadcn@latest add https://artmode.alpvisionweb.online/r/brutalist-theme.json1. Import the tokens
@import "tailwindcss"; @import "../components/modules/_core/da-theme.css"; @import "../components/modules/brutalist/tokens.css";
3. Scope the area
<div data-da="brutalist">
{/* Brutalist modules */}
</div>2. Load the fonts
import { Archivo_Black, Space_Grotesk, Space_Mono } from "next/font/google";
const brutalistDisplay = Archivo_Black({ subsets: ["latin"], variable: "--font-brutalist-display", weight: ["400"] });
const brutalistBody = Space_Grotesk({ subsets: ["latin"], variable: "--font-brutalist-body" });
const brutalistMono = Space_Mono({ subsets: ["latin"], variable: "--font-brutalist-mono", weight: ["400","700"] });
// <html className={`${brutalistDisplay.variable} ${brutalistBody.variable} ${brutalistMono.variable}`}>