neobrutalist-web-designer

Neobrutalist Web Designer

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "neobrutalist-web-designer" with this command: npx skills add curiositech/some_claude_skills/curiositech-some-claude-skills-neobrutalist-web-designer

Neobrutalist Web Designer

Creates modern 2026 web applications with authentic neobrutalist aesthetic. Not recreating brutalist architecture—extrapolating neobrutalism to modern digital contexts: SaaS products, e-commerce, indie creator platforms, and startup MVPs that need to stand out.

When to Use

Use for:

  • SaaS dashboards that need bold differentiation (Gumroad, Figma style)

  • E-commerce with memorable, raw aesthetic (Tony's Chocolonely style)

  • Indie creator platforms and portfolios

  • Startup landing pages and MVPs

  • Educational platforms seeking approachable boldness

  • Music, art, and social media apps

  • Any UI that needs to "shout" rather than whisper

Do NOT use for:

  • Glassmorphism/blur effects → use vaporwave-glassomorphic-ui-designer

  • Windows 3.1 retro → use windows-3-1-web-designer

  • Windows 95 retro → use windows-95-web-designer

  • Soft shadows/neumorphism → use native-app-designer

  • Subtle corporate design → use web-design-expert

  • Gradient-heavy aesthetics → NOT neobrutalism

Neobrutalism vs Similar Styles

Feature Neobrutalism Glassmorphism Neumorphism Win31/95

Shadows Hard (no blur) Soft glow Subtle inset Beveled

Borders Thick black strokes Subtle/none None Beveled

Colors Bold primaries Frosted/pastel Muted System gray

Background Solid flat Blur/transparent Soft gradient Solid

Philosophy Raw, exposed Ethereal, hidden Realistic Functional

Core Design System

The Three Pillars of Neobrutalism

  • Hard Shadows - Offset, no blur, usually black

  • Bold Borders - Thick (2-4px) black strokes

  • High Contrast - Primary colors against neutral backgrounds

Color Palette

Color Hex CSS Variable Usage

Black #000000 --neo-black

Borders, shadows, text

White #FFFFFF --neo-white

Backgrounds, contrast

Cream/Beige #F5F0E6 --neo-cream

Soft background alternative

Red #FF5252 --neo-red

Danger, emphasis

Yellow #FFEB3B --neo-yellow

Highlights, warnings

Blue #2196F3 --neo-blue

Links, primary actions

Pink #FF4081 --neo-pink

Accent, playful

Green #4CAF50 --neo-green

Success states

Orange #FF9800 --neo-orange

CTAs, attention

Purple #9C27B0 --neo-purple

Creative, premium

Color Rules:

  • ✅ Bold primaries with high saturation

  • ✅ Black and white for maximum contrast

  • ✅ Beige/cream for warmth without softness

  • ❌ NO gradients (use flat colors only)

  • ❌ NO transparency/opacity (stay opaque)

The Signature Hard Shadow

THE defining neobrutalist element - offset shadow with zero blur:

.neo-shadow { /* THE neobrutalist shadow formula */ box-shadow: 4px 4px 0 #000000; }

.neo-shadow--deep { box-shadow: 8px 8px 0 #000000; }

.neo-shadow--subtle { box-shadow: 2px 2px 0 #000000; }

/* Hover: shadow grows */ .neo-shadow:hover { box-shadow: 6px 6px 0 #000000; transform: translate(-2px, -2px); }

/* Active: shadow shrinks (pressed) */ .neo-shadow:active { box-shadow: 2px 2px 0 #000000; transform: translate(2px, 2px); }

Bold Border System

.neo-border { border: 3px solid #000000; }

.neo-border--thick { border: 4px solid #000000; }

.neo-border--thin { border: 2px solid #000000; }

/* Colored borders for emphasis */ .neo-border--accent { border: 3px solid var(--neo-pink); }

Typography

Use Font Suggestion Fallback Style

Headlines Archivo Black Impact, sans-serif Bold, condensed

Body Space Grotesk Arial, sans-serif Clean, geometric

Accent Lexend Mega Trebuchet, sans-serif Wide, bold

Mono JetBrains Mono Courier New Code, retro

Display Bebas Neue Impact All-caps impact

Typography Rules:

:root { --font-neo-display: 'Archivo Black', 'Impact', sans-serif; --font-neo-body: 'Space Grotesk', 'Arial', sans-serif; --font-neo-accent: 'Lexend Mega', sans-serif; --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace; }

/* Headlines are BOLD and often oversized */ h1 { font-family: var(--font-neo-display); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }

/* Body maintains readability */ body { font-family: var(--font-neo-body); font-size: 1.125rem; line-height: 1.6; }

Modern Extrapolations

SaaS Dashboard: The Gumroad Paradigm

Neobrutalism for SaaS emphasizes function over flourish:

┌────────────────────────────────────────────────────────┐ │ ██████████████████████████████████████████████████████ │ │ █ DASHBOARD [?] [⚙] [👤] █│ │ ██████████████████████████████████████████████████████ │ ├────────────────────────────────────────────────────────┤ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ ████████████ │ │ ████████████ │ │ ████████████ │ │ │ │ REVENUE │ │ CUSTOMERS │ │ PRODUCTS │ │ │ │ ════════════ │ │ ════════════ │ │ ════════════ │ │ │ │ $12,450 │ │ 1,234 │ │ 12 │ │ │ │ ↑ 23% │ │ ↑ 15% │ │ → 0% │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────┐│ │ │ RECENT SALES [View All]││ │ │ ════════════════════════════════════════════════════││ │ │ ▓ Product A $49.00 Jan 31, 10:23 ││ │ │ ▓ Product B $29.00 Jan 31, 09:45 ││ │ │ ▓ Product A $49.00 Jan 31, 08:12 ││ │ └────────────────────────────────────────────────────┘│ └────────────────────────────────────────────────────────┘

Key patterns:

  • Cards with hard shadows

  • Bold section headers

  • High-contrast data display

  • Black borders on everything

  • Flat, solid background colors

E-Commerce: The Raw Shopping Experience

.neo-product-card { background: var(--neo-white); border: 3px solid var(--neo-black); box-shadow: 6px 6px 0 var(--neo-black); padding: 0; overflow: hidden; }

.neo-product-card:hover { box-shadow: 8px 8px 0 var(--neo-black); transform: translate(-2px, -2px); }

.neo-product-card__image { border-bottom: 3px solid var(--neo-black); width: 100%; aspect-ratio: 1; object-fit: cover; }

.neo-product-card__content { padding: 1rem; }

.neo-product-card__price { font-family: var(--font-neo-display); font-size: 1.5rem; background: var(--neo-yellow); display: inline-block; padding: 0.25rem 0.5rem; border: 2px solid var(--neo-black); }

.neo-add-to-cart { width: 100%; background: var(--neo-black); color: var(--neo-white); border: 3px solid var(--neo-black); padding: 0.75rem; font-family: var(--font-neo-display); text-transform: uppercase; cursor: pointer; }

.neo-add-to-cart:hover { background: var(--neo-pink); color: var(--neo-black); }

Landing Page: Bold First Impressions

╔══════════════════════════════════════════════════════════════╗ ║ ║ ║ ████████ WE BUILD ║ ║ ████████ BOLD ║ ║ ████████ PRODUCTS ║ ║ ║ ║ ┌─────────────────────────────────────────────────────────┐║ ║ │ │║ ║ │ No more boring SaaS. We create tools that │║ ║ │ stand out, work hard, and make you money. │║ ║ │ │║ ║ └─────────────────────────────────────────────────────────┘║ ║ ║ ║ ╔═══════════════════════════════════════╗ ║ ║ ║ → START FREE TRIAL ║ ║ ║ ╚═══════════════════════════════════════╝ ║ ║ ║ ╚══════════════════════════════════════════════════════════════╝

Responsive: Bold at Every Size

Breakpoint Adjustments

Mobile (<640px) Shadow: 3px 3px, Border: 2px, Font scale down

Tablet (640-1024px) Shadow: 4px 4px, Border: 3px, Standard fonts

Desktop (>1024px) Shadow: 6px 6px, Border: 4px, Oversized headlines

/* Mobile-first approach */ :root { --neo-shadow-size: 3px; --neo-border-width: 2px; }

@media (min-width: 640px) { :root { --neo-shadow-size: 4px; --neo-border-width: 3px; } }

@media (min-width: 1024px) { :root { --neo-shadow-size: 6px; --neo-border-width: 4px; } }

.neo-card { border: var(--neo-border-width) solid var(--neo-black); box-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black); }

Component Patterns

Buttons

.neo-button { background: var(--neo-white); color: var(--neo-black); border: 3px solid var(--neo-black); box-shadow: 4px 4px 0 var(--neo-black); padding: 0.75rem 1.5rem; font-family: var(--font-neo-display); font-size: 1rem; text-transform: uppercase; cursor: pointer; transition: all 0.1s ease; }

.neo-button:hover { box-shadow: 6px 6px 0 var(--neo-black); transform: translate(-2px, -2px); }

.neo-button:active { box-shadow: 2px 2px 0 var(--neo-black); transform: translate(2px, 2px); }

/* Primary variant */ .neo-button--primary { background: var(--neo-yellow); }

/* Danger variant */ .neo-button--danger { background: var(--neo-red); color: var(--neo-white); }

/* Ghost variant */ .neo-button--ghost { background: transparent; box-shadow: none; }

.neo-button--ghost:hover { background: var(--neo-black); color: var(--neo-white); box-shadow: none; transform: none; }

Cards

.neo-card { background: var(--neo-white); border: 3px solid var(--neo-black); box-shadow: 6px 6px 0 var(--neo-black); padding: 1.5rem; }

.neo-card__header { border-bottom: 2px solid var(--neo-black); padding-bottom: 1rem; margin-bottom: 1rem; }

.neo-card__title { font-family: var(--font-neo-display); font-size: 1.25rem; text-transform: uppercase; }

/* Feature card with accent color */ .neo-card--featured { background: var(--neo-yellow); }

/* Highlighted state */ .neo-card--highlight { border-color: var(--neo-pink); box-shadow: 6px 6px 0 var(--neo-pink); }

Form Elements

.neo-input { background: var(--neo-white); border: 3px solid var(--neo-black); padding: 0.75rem 1rem; font-family: var(--font-neo-body); font-size: 1rem; width: 100%; }

.neo-input:focus { outline: none; box-shadow: 4px 4px 0 var(--neo-black); }

.neo-input::placeholder { color: #888; }

/* Labels are bold and uppercase */ .neo-label { font-family: var(--font-neo-display); text-transform: uppercase; font-size: 0.875rem; margin-bottom: 0.5rem; display: block; }

/* Checkbox/Radio */ .neo-checkbox { appearance: none; width: 24px; height: 24px; border: 3px solid var(--neo-black); background: var(--neo-white); cursor: pointer; }

.neo-checkbox:checked { background: var(--neo-black); }

.neo-checkbox:checked::after { content: '✓'; color: var(--neo-white); font-size: 16px; display: flex; align-items: center; justify-content: center; }

Navigation

.neo-nav { background: var(--neo-black); border-bottom: 4px solid var(--neo-black); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }

.neo-nav__logo { font-family: var(--font-neo-display); font-size: 1.5rem; color: var(--neo-white); text-transform: uppercase; }

.neo-nav__links { display: flex; gap: 1.5rem; }

.neo-nav__link { color: var(--neo-white); text-decoration: none; font-family: var(--font-neo-body); font-weight: 600; padding: 0.5rem 0; border-bottom: 3px solid transparent; }

.neo-nav__link:hover { border-bottom-color: var(--neo-yellow); }

.neo-nav__link--active { border-bottom-color: var(--neo-pink); }

Anti-Patterns

Anti-Pattern: Soft Shadows

Novice thinking: box-shadow: 0 4px 6px rgba(0,0,0,0.1)

Reality: Neobrutalism uses HARD shadows with zero blur Instead: box-shadow: 4px 4px 0 #000000

Anti-Pattern: Gradients

Novice thinking: background: linear-gradient(to right, #ff5252, #ffeb3b)

Reality: Neobrutalism is FLAT. No gradients, no blending. Instead: Pick ONE solid color. Embrace the flatness.

Anti-Pattern: Rounded Corners Everywhere

Novice thinking: border-radius: 16px on everything Reality: Neobrutalism prefers sharp corners or minimal rounding (4px max) Instead: border-radius: 0 or border-radius: 4px for subtle softening

Anti-Pattern: Thin Borders

Novice thinking: border: 1px solid #ddd

Reality: Neobrutalist borders are BOLD (3-4px) and BLACK Instead: border: 3px solid #000000

Anti-Pattern: Low Contrast Colors

Novice thinking: Subtle pastels on white background Reality: Neobrutalism demands HIGH contrast Instead: Bold primaries (#FF5252, #FFEB3B) on white/black

Anti-Pattern: Transparency/Opacity

Novice thinking: background: rgba(255,255,255,0.8)

Reality: Neobrutalism is OPAQUE. No see-through elements. Instead: background: #FFFFFF (solid, no alpha)

Anti-Pattern: Hover Blur Effects

Novice thinking: filter: blur(2px) on hover Reality: Hover states in neobrutalism are physical (translate + shadow change) Instead: transform: translate(-2px, -2px)

  • increased shadow

Quick Decision Tree

Is it a container element? ├── Card/Panel? → 3px black border + hard shadow ├── Section? → Full-width, solid background color ├── Modal? → Heavy shadow (8px+), thick border └── Nav? → Black background or thick bottom border

Is it interactive? ├── Button? → Hard shadow that responds to hover/active ├── Link? → Underline or bottom border, color change on hover ├── Input? → Thick border, shadow on focus └── Checkbox? → Thick border, solid fill when checked

Is it typography? ├── Headline? → Oversized, bold display font, uppercase optional ├── Body? → Clean geometric sans, good line height ├── Label? → Bold, uppercase, smaller size └── Code? → Monospace, possibly with background

Is it a status indicator? ├── Success? → Green background or border ├── Error? → Red background or border ├── Warning? → Yellow background or border └── Info? → Blue background or border

CSS Variables Template

:root { /* Core palette */ --neo-black: #000000; --neo-white: #FFFFFF; --neo-cream: #F5F0E6;

/* Primary colors */ --neo-red: #FF5252; --neo-yellow: #FFEB3B; --neo-blue: #2196F3; --neo-pink: #FF4081; --neo-green: #4CAF50; --neo-orange: #FF9800; --neo-purple: #9C27B0;

/* Typography */ --font-neo-display: 'Archivo Black', 'Impact', sans-serif; --font-neo-body: 'Space Grotesk', 'Arial', sans-serif; --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;

/* Spacing */ --neo-spacing-xs: 0.25rem; --neo-spacing-sm: 0.5rem; --neo-spacing-md: 1rem; --neo-spacing-lg: 1.5rem; --neo-spacing-xl: 2rem;

/* Shadows & Borders */ --neo-shadow-size: 4px; --neo-border-width: 3px; --neo-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black); }

The Quick Test

If your component has:

  • ❌ Any blur in shadows → NOT neobrutalism

  • ❌ Any gradients → NOT neobrutalism

  • ❌ Transparency/opacity → NOT neobrutalism

  • ❌ Thin (1px) borders → NOT neobrutalism

  • ❌ Soft/muted colors → NOT neobrutalism

  • ❌ Heavy border-radius (16px+) → NOT neobrutalism

It should have:

  • ✅ Hard shadows (Xpx Ypx 0 #000)

  • ✅ Bold borders (3-4px solid black)

  • ✅ High contrast color combinations

  • ✅ Flat, solid colors

  • ✅ Bold typography

  • ✅ Sharp or minimal corners

  • ✅ Physical hover/active feedback

Accessibility Considerations

Despite its boldness, neobrutalism can be highly accessible:

  • High contrast - Black borders on white/colored backgrounds pass WCAG

  • Clear focus states - Shadow/border changes are obvious

  • Readable typography - Large, bold text is easy to scan

  • No motion dependency - Transforms are enhancers, not requirements

/* Ensure focus is visible */ .neo-button:focus-visible { outline: 3px solid var(--neo-blue); outline-offset: 2px; }

/* Reduce motion if preferred */ @media (prefers-reduced-motion: reduce) { .neo-button { transition: none; }

.neo-button:hover { transform: none; box-shadow: var(--neo-shadow); /* Keep shadow, skip animation */ } }

References

  • /references/component-library.md

  • Full CSS for all neobrutalist components

  • /references/color-combinations.md

  • Tested color pairings with contrast ratios

  • /references/typography-pairings.md

  • Font combinations for different contexts

  • /references/real-world-examples.md

  • Analysis of Gumroad, Figma, and other implementations

Pairs With

  • web-design-expert - For brand direction alongside bold style

  • color-contrast-auditor - Ensure accessibility with bold colors

  • design-system-creator - For generating full design token systems

  • typography-expert - For advanced type pairing

Sources

Design research based on:

  • NN/G: Neobrutalism Definition and Best Practices

  • Bejamas: Neubrutalism Web Design Trend

  • Onething Design: Neo Brutalism UI Trend

  • Nestify: Principles of Neo Brutalism

  • CC Creative: Brutalism vs Neubrutalism

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

neobrutalist-web-designer

No summary provided by upstream source.

Repository SourceNeeds Review
48-erichowens
General

video-processing-editing

No summary provided by upstream source.

Repository SourceNeeds Review
15-curiositech
General

interior-design-expert

No summary provided by upstream source.

Repository SourceNeeds Review
14-curiositech
General

native-app-designer

No summary provided by upstream source.

Repository SourceNeeds Review
13-curiositech