Design for AIStil Neo-Brutalismus: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für neo-brutalismus. Auch bekannt als Neubrutalismus, neo-brutalistisches Web, Gumroad-Stil, Dickrand-UI. 2021-2024 (das Gumroad-Redesign 2021 hat ihn populär gemacht).
Merkmale
- dicke schwarze Ränder (2-4px) auf allem, harte versetzte Schatten (kein Blur)
- flache, gesättigte Farben: Gelb, Pink, Limette, Himmelblau auf Creme oder Weiß
- Radius null oder winzige 4-6px; Elemente sehen aus wie Sticker
- große fette Grotesk, manchmal gemischt mit einer Mono für Labels
- absichtliche Fehlausrichtung, gedrehte Sticker, Marquee-Streifen
- Interaktionen sind physisch: der Button rutscht beim Drücken in seinen Schatten
- hoher Kontrast, laut, eher verspielt als roh
Palette
#fffdf5 Seite, #000000 Ränder und Text, #ffde59 Primär, #ff6b9d Sekundär, #9ef01a Tertiär, #4d9fff Info
Schrift
Space Grotesk oder Archivo Black für Überschriften, Work Sans oder IBM Plex Sans für Fließtext, Space Mono für Tags; Überschriften 800 bei 40-72px, Fließtext 400-500 bei 16-18px
Do
- nutze überall eine Schattenregel: 4px 4px 0 #000, 6px bei Hover, 0 bei aktiv mit passendem translate
- halte mindestens drei laute Farben und nutze sie in voller Sättigung
- mach Ränder und Text im selben Schwarz, damit die Seite wie eine einzige Zeichnung wirkt
Don't
- nutze keine Verläufe, Blur oder weichen Schatten; nur harte Kanten
- geh nicht ins Pastell; der Stil braucht Wumms
- füge keine dezenten 1px-Ränder hinzu; entweder dick oder gar nicht
Bekannt dafür: Gumroad, Figma-Community-Dateien, Poolsuite, Mschf-Drops
CSS-Seed
:root {
--bg: #fffdf5;
--fg: #000000;
--accent: #ffde59;
--accent2: #ff6b9d;
--radius: 4px;
--border: 3px solid #000;
--shadow: 4px 4px 0 #000;
--font: 'Space Grotesk',sans-serif
}
Prompt
Baue die Seite im neo-brutalistischen Stil. Seitenhintergrund #fffdf5, aller Text und alle Ränder #000000. Jede Karte, jeder Button, jedes Eingabefeld und jedes Nav-Element bekommt border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Farbblöcke: Primär #ffde59, Sekundär #ff6b9d, Tertiär #9ef01a, Info #4d9fff, als solide Füllungen auf Buttons, Tags und Abschnittshintergründen. Schriften: Space Grotesk 800 für Überschriften bei 72/48/32px mit enger line-height 1.05, Work Sans 500 für Fließtext bei 18px, Space Mono für Labels in Versalien. Keine Verläufe, kein Blur, keine Opacity-Effekte. Drehe ein paar dekorative Tags um -3deg und 2deg. Hover: Schatten wird 6px 6px 0 #000 und das Element bewegt sich -2px/-2px; aktiv: Schatten 0 und das Element bewegt sich +4px/+4px, 100ms linear. Klobige Abstände: 24px Lücken, 32px Kartenpadding, 120px Abschnittsabstand.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im neo-brutalistischen Stil. Seitenhintergrund #fffdf5, aller Text und alle Ränder #000000. Jede Karte, jeder Button, jedes Eingabefeld und jedes Nav-Element bekommt border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Farbblöcke: Primär #ffde59, Sekundär #ff6b9d, Tertiär #9ef01a, Info #4d9fff, als solide Füllungen auf Buttons, Tags und Abschnittshintergründen. Schriften: Space Grotesk 800 für Überschriften bei 72/48/32px mit enger line-height 1.05, Work Sans 500 für Fließtext bei 18px, Space Mono für Labels in Versalien. Keine Verläufe, kein Blur, keine Opacity-Effekte. Drehe ein paar dekorative Tags um -3deg und 2deg. Hover: Schatten wird 6px 6px 0 #000 und das Element bewegt sich -2px/-2px; aktiv: Schatten 0 und das Element bewegt sich +4px/+4px, 100ms linear. Klobige Abstände: 24px Lücken, 32px Kartenpadding, 120px Abschnittsabstand.
## Tokens
:root { --bg:#fffdf5; --fg:#000000; --accent:#ffde59; --accent2:#ff6b9d; --radius:4px; --border:3px solid #000; --shadow:4px 4px 0 #000; --font:'Space Grotesk',sans-serif }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.