Proof of Work: Archetype #02

Loud, Tactile & Unapologetic.

This entire page is generated directly using Taste Engine’s Neo-Brutalism design DNA. Experience authentic 2.5px solid strokes, 0-blur mechanical offset shadows, and zero AI-slop firsthand.

$ npx skills add kennedys0/taste-engine --skill taste-style-neo-brutalism

Installation Guide ↓ Test Studio Lab →

2.5px

Solid Ink Stroke

0px Blur

Hard Offset Shadow

130ms

Mechanical Press

WCAG AA

Contrast Gated

Live Interactive PoW

Neo-Brutalism Studio Lab

Test physical 130ms press feedback, live shadow calibrators, card-in-card hierarchy, and WCAG AA contrast blocking in real time.

1. Mechanical Press & Physics 5PX CANONICAL

Select an elevation tier and click the buttons below. Notice how the button physically depresses along the shadow vector (`translate(2px, 2px)`) without bouncy wobbles.

ACTIVE VECTOR: translate(2px, 2px)

TIMING & EASING: 130ms cubic-bezier(0,0,0.2,1)

TOTAL CLICKS: 0 clicks

[READY] Click any specimen button to record tactile telemetry...

2. Live Shadow & Stroke Calibrator REAL-TIME CSS

Border Stroke Width 2.5px

Hard Shadow Offset 5px

Corner Radius Geometry

NEO COMPONENT

border: 2.5px solid #121212; box-shadow: 5px 5px 0 #121212; border-radius: 4px;

3. Card-in-Card & Form Controls HIERARCHY

Outer Parent Container SEMANTIC BOUNDARY

Nested Elevated Action Well

Repository Target 22 chars

Mechanical Haptic Sound

-2° TILT +2° TILT 0° FLAT

4. Pop Palette & Contrast Matrix CANARY (#FFE600)

Click any swatch to dynamically switch the active theme accent. Notice the strict contrast discipline: bright fills always take dark ink `#121212`.

Canary 16.2:1 (AAA)

Cyan 14.8:1 (AAA)

Coral 6.1:1 (AA)

Lime 15.1:1 (AAA)

Violet 8.4:1 (AAA)

Slate 12.3:1 (AAA)

Dark Mode Anti-Collision Rule In Dark Mode, borders and offset shadows invert from `#121212` to stark white `#FAFAFA` (or bright accent). This eliminates black-on-black collision and guarantees high-contrast tactile depth.

How to Install

Install Neo-Brutalism or Full Engine

Choose whether you want this single standalone Neo-Brutalism skill or the full 10-style automated Taste Engine suite for your AI coding agents.

Option A: Install Dedicated Neo-Brutalism Skill

Installs only the Neo-Brutalism style pack. Perfect if your project has already committed to this exact aesthetic and does not need a 10-style selector.

# Install standalone Neo-Brutalism pack via Agent Skills CLI

$ npx skills add kennedys0/taste-engine --skill taste-style-neo-brutalism

# Or install directly for Antigravity IDE global config

$ git clone https://github.com/kennedys0/taste-engine.git && cp -r taste-engine/optional-standalone-skills/taste-style-neo-brutalism ~/.gemini/config/skills/

Option B: Install Full Taste Engine (All 10 Styles + SEO + Anti-Slop)

Equips your AI agent with the autonomous style router, preflight interviews, 10 aesthetic packs, full-screen hero gating, and automatic SEO audit.

# 1. Universal 1-click Agent Skills install

$ npx skills add kennedys0/taste-engine

# 2. Or install globally for Google Antigravity IDE / CLI (agy)

$ node bin/taste-engine.mjs install --agent antigravity --global

# 3. Or install for Claude Code or OpenAI Codex

$ node bin/taste-engine.mjs install --agent claude --global

$ node bin/taste-engine.mjs install --agent codex --global

Option C: Tailwind CSS & shadcn/ui Preset

Scaffold Neo-Brutalism utility tokens directly into your React, Next.js, or Vite frontend stack.

// Add to your Tailwind config or copy presets/tailwind/

module.exports = {

presets: [require('./presets/tailwind/tailwind.preset.js')],

theme: {

extend: {

boxShadow: { 'neo': '5px 5px 0 #121212', 'neo-active': '1px 1px 0 #121212' },

borderWidth: { 'neo': '2.5px' }

}

};

Tokens & Math

Neo-Brutalism Design Tokens

Standardized CSS custom properties for instant copy-pasting into any stylesheet.

Token Name	Light Mode	Dark Mode	Description
--taste-neo-bg	#FFFDF7	#18181B	Canvas backdrop base
--taste-neo-card-bg	#FFFFFF	#222227	Card surface background
--taste-neo-card-elevated	#FFF9E6	#2B2B32	Nested card well surface
--taste-neo-ink	#121212	#FAFAFA	Primary text & icon color
--taste-neo-ink-muted	#4B4B4B	#A1A1AA	Secondary metadata text
--taste-neo-border	2.5px solid #121212	2.5px solid #FAFAFA	Crisp high-contrast structural stroke
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #FAFAFA	Compact 0-blur directional shadow
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #FAFAFA	Standard control offset shadow
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #FAFAFA	Deep card surface offset shadow
--taste-neo-accent-primary	#FFE600	#FFE600	Electric canary primary action

FAQ & Verification

Frequently Asked Questions

Why is this Proof of Work built in Neo-Brutalism?

Taste Engine operates on the principle that aesthetic fidelity must be recognizable from the rendered interface. By building this entire installation guide in Neo-Brutalism, you can directly verify the physics, contrast pairing, and lack of AI-slop before adopting the skill into your agents.

Why are hard offset shadows permitted by the anti-slop rules?

Taste Engine’s anti-slop rules contain an explicit material exception for Neo-Brutalism: 0-blur directional offset drop shadows and solid black outlines are material-enabling properties essential to neo-brutalist tactile physics. Removing them to satisfy a generic minimal heuristic is classified as an aesthetic regression.

How does Dark Mode prevent black-on-black shadow collision?

In dark mode, Neo-Brutalism flips both borders and 0-blur offset shadows from black to stark white (#FAFAFA) or vivid yellow. This ensures zero black-on-black collision and preserves tactile depth on dark surfaces.

Is Card-in-Card permissible in Neo-Brutalism?

Yes! A nested surface is fully permitted when it encapsulates a distinct semantic boundary, elevated parameter well, or code container (e.g. --taste-neo-card-elevated with 2px solid border and 4px offset shadow). Mindless decorative card stacking without semantic distinction remains disallowed.

How does Neo-Brutalism maintain mobile responsiveness down to 320px?

All typography scales down using fluid CSS clamp() formulas, all command pills feature scrollable single-line wrappers, top navigation collapses into an accessible mobile hamburger drawer, and circular elements enforce aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; to eliminate oval squishing.