the neo-brutal family

Neo-Brutal

Brutalist web manifesto — three-pixel outlines, rationed color.

Neo-Brutal is a brutalist web manifesto. Web-as-poster. The indie-crypto, hacker-founder, portfolio-as-middle-finger aesthetic. It treats every interactive element as an object with weight — cards cast hard six-pixel ink shadows, buttons leap off the page on hover, and pressing them is tactile: they physically submit two pixels toward the click.

Where Kinetic is loud and colorful — its ink shadows often lime, its CTAs often vibrant-filled — Neo-Brutal is louder but quieter. It cranks the structural severity (three-pixel outlines, pure monochrome discipline) while rationing color. The vibrant slot is earned, not spent; black-on-white and white-on-black do most of the work, with the brand hue reserved for one or two deliberate moments per page.

Think Gumroad's brutalist redesign, Figma's portfolio era, Hacker News commenters who became founders, indie tools that refuse to pretend they're enterprise. Use Neo-Brutal when the aesthetic itself is part of the pitch.

Default palette · Amber · 5 recommended palettes below

Best for

Indie SaaS landing pages
Developer-tool marketing
Founder and designer portfolios
Manifestos and launch posts
Conversion-heavy pricing pages

Character

raw
aggressive
monochrome
tactile
indie

TypeSystem Sans · System Sans · System Mono

How it differs

Neo-Brutal is Kinetic with exactly three diffs: three-pixel outlines instead of two, system display sans instead of Archivo Black, and ink-black CTAs by default with vibrant earned rather than spent.

Try a paletteDark mode →

Yellow Lime Orange Amber Red

01 - Typography

The voice of neo-brutal.

Hero title - Archivo Black

Made with intention.

Hero subtitle - Inter

A supporting lead carries the second voice without competing.

Section title - Archivo Black

Section heading at the second tier

Section subtitle - Inter

Supporting copy holds context next to the title without competing for attention.

Card title - Archivo Black

Card title at the third tier

Body - Inter

The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.

Caption

Smaller supporting copy, used for metadata and inline notes.

Meta - JetBrains Mono

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 - Palette

Resolved palette.

The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.

Backgroundcolor-mix(in srgb, rgb(245 158 11) 10%, white)

Surfacecolor-mix(in srgb, rgb(245 158 11) 4%, white)

Bordercolor-mix(in srgb, rgb(234 88 12) 12%, white)

Ink#0f172a

Brandrgb(245 158 11)

Brand · strongrgb(251 191 36)

Accentrgb(234 88 12)

On brandrgb(17 24 39)

03 · Primitives

The building blocks.

Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.

Buttons

Badges

DefaultAccentOutlineInk

How content sits.

Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.

Feature

Generated families, real engineering

Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.

ManifestTokens

Pricing

Recommended

Studio

$29/ month

Unlimited generations
Custom domains
Priority models

Profile

Mara ChenProduct design lead

Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.

AvailableFractional

Stat

99.9%

Uptime across all rendered sites this quarterLast 90 days

Testimonial

"The shared semantic tokens made the new family feel consistent from the first pass."

Jules ParkStaff designer, Patagonia Digital

05 - Motion

How it moves.

Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.

Card - hover

Lift on hover, hairline tightens

Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.

Button - focus

Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.

06 · Recommended palettes

Try a different chord.

Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.

06 · Compositions

A few of the section topologies.

Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.

banner

Banner

Content stacks above a wide image rail.

breakout

Breakout

A featured module breaks the grid edge.

bands

Bands

Alternating horizontal bands of copy and media.

grid

Grid

Uniform card grid for collections.

See all compositions →

07 · See it live

See a full page.

A complete site rendered in Neo-Brutal. Open the example to walk through every section in the family's voice.

Open example →Open demo