Neo-Brutal Event page
A complete example page built from the kit's blocks, with every section and its content.
Neo-Brutal
A printed poster that behaves like software: warm paper, ink outlines and hard shadows that press.
The look
A printed poster that behaves like software: warm paper (#F3EFE6), white card stock and one ink (#121212), four flat inks of colour (volt #D7F34B, cobalt #3652FF, lilac, tomato), and one 2 px ink stroke for every outline, rule and control border. Depth means something: flat things you read, a hatched offset under things that float, and a solid ink shadow under everything you can press, which sinks when you click it. Headlines are Bricolage Grotesque at 800, set narrow and tight; every label is JetBrains Mono in caps; one keyword per page is stamped into a tilted volt slab.
Neo-Brutal Landing page
A complete example page built from the kit's blocks, with every section and its content.
Neo-Brutal Hero
The page opener and its only h1, on the page grid. split puts the copy on columns 1–7 and the media on 8–12 (stacked under lg, media below); centered is copy only; stacked centres the copy with the media below at full width.
Neo-Brutal Navbar
The site header: logo, links and actions. bar is the kit's header: a full-bleed paper bar ruled with 2 px at the bottom, solid from the start, links centred (the current one on paper-2), actions at the end. floating is an inset outlined bar over a paper fade, so nothing shows around it.
Neo-Brutal Announcement Bar
A short announcement. pill is the hero's outlined card-white pill with a cobalt mono tag; with href it presses and its arrow nudges. bar is an ink strip above the navbar with a volt tag and a volt-underlined link.
Neo-Brutal Footer
The site footer, always on the ink set (in both themes): brand, text and actions on columns 1–5, link columns on 6–12 (mono caps h2 titles, ink links whose underline turns volt), then a ruled legal row with the copyright, legal links, labelled social keys and a live status with a pulsing volt dot.
Neo-Brutal Pricing
Plans as one ruled sheet with the featured plan on the cobalt cell (data-surface="accent": white text, its accent CTA turns volt), and an ink-thumb Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Neo-Brutal Comparison Table
Plans side by side in an ink-outlined card: plan names in the title voice, big type-figure prices and sm CTAs in the header (the featured column's head is the cobalt cell and its body cells cobalt-100), group rows on paper-2 in mono caps, volt ticks and ink-3 dashes with screen-reader text.
Neo-Brutal Price List
A services or menu list on rules: names in the display face at lead size, a note under each, a dotted leader, and big type-figure prices aligned at the end; one or two columns.
Neo-Brutal Bento Grid
Feature tiles on one ruled sheet of 12 columns (cells 2 px apart over ink, one outline, one outer radius).
Neo-Brutal Feature Grid
Icon, title (h3) and text items in 2 to 4 columns. cards is a ruled sheet of card-white cells, each with an ink-outlined icon chip; plain sets them free on the page; rules separates them with 2 px rules and a mono index.
Neo-Brutal Frame
Device chrome around a screenshot or mock, floating on a 10 px hatched offset (the page's one floating object): a browser (outlined dots and a mono address bar), a window (a title bar in the display face), a phone (keeps its 9:19 shape) or a flat plain panel.
Neo-Brutal Product Mock
A data-driven app dashboard, the hero's one floating object: a window bar with the kit mark, the title and the subtitle as a neutral badge, folder tabs, the first metric's big figure that rolls in with the entrance (from a value near the final one), its delta pill and note (a "Month end · €61k–67k" string splits into label and value), the chart (solid cobalt area, hatched volt band, volt marker), ruled KPI cells for the next three metrics, an ink status chip with a pulsing volt dot over the top edge, and in wide containers a sidebar and share bars.
Neo-Brutal Breadcrumb
Trail of links to the current page: ink-2 links whose underline turns volt on hover, "/" separators hidden from screen readers, the current page in bold ink.
Neo-Brutal Pagination
Page keys in mono that press (the current page is an ink key, sunk), previous and next chevron keys, an ellipsis for skipped pages and an optional mono summary.
Neo-Brutal Button
Keys in seven variants and three sizes, each with an ink outline and a solid ink offset that presses: hover lifts 2 px onto 2 px more shadow, a click sinks it into the shadow. primary is the volt key, secondary the card-white key, outline the clear key that takes the fill it sits on (use it on volt, lilac and cobalt), accent the cobalt key (it turns volt with ink text on the cobalt band), destructive the tomato key, ghost no outline and no shadow, link ink text with a 2 px underline.
Neo-Brutal Icon Button
Square, icon-only key. label is the accessible name and the native tooltip.
Neo-Brutal Button Group
Related buttons in a row or column (role="group"). attached joins them into one strip of keys on a 2 px shadow, with the borders merged and only the outer corners rounded.
Neo-Brutal Metric
A KPI: a mono label, a narrow 800 figure (tabular-nums, never wraps), a square delta pill (volt for good news, tomato for bad, paper-2 for flat) with screen-reader text ("up 12.4%"), and a hint.
Neo-Brutal Chart
A line, area or bar chart in SVG with HTML labels, so text never stretches with the fluid width.
Everything in Neo-Brutal
All 92 pieces, category by category.
Keep the pieces you like
Save a favorite or a whole style, and find them in your workspace on any device.