TechnicalCollectible prompt
Neo-brutalist design system for your website
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete neo-brutalist design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Space Grotesk 500 and 700 for headings and text; Space Mono 400 and 700 for labels, buttons and prices. Scale 1.333 from 16px: 16, 21, 28, 38, 50, 67, and 88px. Headings at -0.02em, line height 1.0.
Palette: background #FFFDF5, surface #FFFFFF, text and borders #000000, fills yellow #FFE14D, pink #FF90E8 and blue #4D7CFF, always with black text. Links black and underlined.
Shape: 2px solid black borders on every card, input and button; radius 0, or 6px for a friendlier brand; hard 4px by 4px black shadows with no blur. On press, the element moves 4px down and right and the shadow drops to 0.
Grid: visible structure. 4, 8 and 12 columns at 360, 768 and 1280px with 16px gutters; cards butt together and share borders; section padding 48px mobile, 96px desktop.
Imagery: flatly lit or flash photos in thick black frames; illustrations as flat shapes with black outlines.
Motion: snappy, 100 to 150ms. The press effect is the motion that matters.
Signature details: the logo in a filled yellow box in a bold header bar; tags as bordered pills in the fill colors; one sticker rotated -3 degrees; prices and key facts in mono.
Do: be loud with structure and color while keeping reading order and hierarchy clear.
Avoid: broken layouts excused as style, unreadable color pairs, more than three fill colors, soft shadows, gradients.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.
Technicalnvoka.com/library/nvoka-neo-brutalist-design-system-for-your-websiteScan to open
Technical
Neo-brutalist design system for your website
Thick black borders, hard offset shadows and loud flat color, kept readable and accessible.
Curated by Nvoka
Lovablev0BoltClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 3 filledYour prompt
Act as a senior brand designer. Restyle the existing site for {{business_name}}, a {{business_type}}, as a complete neo-brutalist design system. Keep every page, route, component and line of content; change only the visual layer, through shared tokens in the current styling system. Read the existing styles first and tell me what you'll replace. Our brand colors are {{brand_colors}}: map them onto the roles below where they fit, and if they fight the style, keep one as the accent and use the pack's neutrals.
Type: Space Grotesk 500 and 700 for headings and text; Space Mono 400 and 700 for labels, buttons and prices. Scale 1.333 from 16px: 16, 21, 28, 38, 50, 67, and 88px. Headings at -0.02em, line height 1.0.
Palette: background #FFFDF5, surface #FFFFFF, text and borders #000000, fills yellow #FFE14D, pink #FF90E8 and blue #4D7CFF, always with black text. Links black and underlined.
Shape: 2px solid black borders on every card, input and button; radius 0, or 6px for a friendlier brand; hard 4px by 4px black shadows with no blur. On press, the element moves 4px down and right and the shadow drops to 0.
Grid: visible structure. 4, 8 and 12 columns at 360, 768 and 1280px with 16px gutters; cards butt together and share borders; section padding 48px mobile, 96px desktop.
Imagery: flatly lit or flash photos in thick black frames; illustrations as flat shapes with black outlines.
Motion: snappy, 100 to 150ms. The press effect is the motion that matters.
Signature details: the logo in a filled yellow box in a bold header bar; tags as bordered pills in the fill colors; one sticker rotated -3 degrees; prices and key facts in mono.
Do: be loud with structure and color while keeping reading order and hierarchy clear.
Avoid: broken layouts excused as style, unreadable color pairs, more than three fill colors, soft shadows, gradients.
Check: text contrast of at least 4.5:1, visible focus, 44px touch targets, no horizontal scroll at 360px, reduced motion respected. Finish with a short change list and the reason for each decision.