Neo-Brutalism-UI

Neo-Brutalismus-UI

Eine Schnittstelle gewinnt Vertrauen, indem sie ihre Struktur offen zeigt und laut darüber ist, denn jede Kante und jeder Schatten ist eine feststehende Tatsache.

Flache, laute Farbflächen mit dicken schwarzen Rändern und harten, unverschwommenen Offset-Schatten. Er entstand auf Produktseiten wie Gumroad und aus Figma-Community-Kits als bewusste Antwort auf die Weichheit von Unternehmensdesigns.

Zeitraum: 2020–heute · Ära: Zeitgenössisch & Räumlich · Bereich: Grafik- & UI-Design · Auch genannt: Neubrutalismus, Neobrutalismus, Brutalist Web UI

Wann dieser Skill geladen werden soll

Lade ihn, wenn der Benutzer nach Folgendem fragt: „Neo-Brutalismus”, „Neubrutalismus”, „Neobrutalist”, „Brutalist UI”, „dicke schwarze Ränder”, „harter Schatten”, „Offset-Schatten”, „Gumroad-Stil”, „laute flache Farben”, „Sticker-Stil”.

Geeignet für: Produkte der Creator Economy, Indie-SaaS-Landingpages, Entwicklertool-Seiten, Portfolios, Veranstaltungs- und Festivalseiten.

Nicht verwenden, wenn:

• Die Marke leise Luxus, medizinische Versorgung oder Banksicherheit signalisieren muss.
• Die Schnittstelle ein dichtes Unternehmenswerkzeug ist, da 3px-Ränder und 4px-Schatten in jeder Zeile Platz verbrauchen.
• Das Publikum ein natives Plattform-Look erwartet, z. B. einen OS-Einstellungsbildschirm.

Systemdirektiven

Beim Generieren von UI- oder Grafiklayouts im Neo-Brutalismus-UI MUSST du:

1. Einen durchgehenden schwarzen Rand von 2px bis 4px um jede Karte, jeden Button, jedes Eingabefeld und jedes Bild zeichnen.
2. Auf jedem erhöhten Element einen harten Schatten mit null Unschärfe, Offset 4px 4px, z. B. 4px 4px 0 0 #000000, werfen.
3. Oberflächen mit flacher, gesättigter Farbe bei 100 % Deckkraft füllen und zwei bis vier laute Farbtöne auf einer Seite verwenden.
4. Bei Hover das Element um den Schatten-Offset verschieben und den Schatten auf 0 setzen, sodass es aussieht, als würde es in die Seite gedrückt.
5. Radien von nur 0px bis 8px verwenden und auf allen Elementen einer Seite denselben Wert anwenden.
6. Überschriften in einer schweren Grotesk- oder Monospace-Schrift mit Gewicht 700 oder höher in Größen von 48px bis 96px setzen.
7. Text in Schwarz auf Farbflächen halten und auf jeder Füllung mindestens 7:1 Kontrast erreichen.

Schutzmaßnahmen

Jede der folgenden Zeilen bricht den Stil. Überprüfe deine Ausgabe anhand der Liste, bevor du sie zurückgibst.

• NIEMALS: Unscharfe Schlagschatten mit einem Unschärferadius über 0px.
• NIEMALS: Dezente graue Verläufe oder glänzende Glanzlichter auf Oberflächen.
• NIEMALS: Pastellfarbene, entsättigte Füllungen mit grauem Text.
• NIEMALS: Hauchdünne 1px-Ränder oder Ränder in einer anderen Farbe als Schwarz.
• NIEMALS: Gemischte Eckenradien auf einer Seite, z. B. 4px auf Karten und 24px auf Buttons.
• NIEMALS: Transparente oder hintergrundunschärfe Paneele.
• NIEMALS: Dünne Schriftgewichte unter 500 für Überschriften.

Vektorprofil

Achse	Punktzahl	1 bedeutet	5 bedeutet
Ornamentik	■■■□□ 3/5	rein minimal	maximalistisch
Dimensionalität	■■□□□ 2/5	streng 2D	voll 3D / räumlich
Rasterstarrheit	■■■□□ 3/5	chaotisch / organisch	strenges mathematisches Raster
Skeuomorpher Realismus	■□□□□ 1/5	abstrakt digital	fotorealistisches Material
Typografische Ausdruckskraft	■■■■□ 4/5	neutral / unsichtbar	experimentell / illustrativ

Halte diese Punktzahlen ein. Wenn eine Anfrage eine Achse um 2 Punkte oder mehr verschiebt, hast du den Stil verlassen: Gehe zu „Abstammungs-Fallbacks”.

Räumliche & Rasterlogik

• Rastermechanik: Ein 12-Spalten-Raster mit 24px bis 32px Zwischenräumen und Karten, die in Blöcken von 2, 3 oder 4 Spalten sitzen; der Offset-Schatten fügt 4px bis 8px visuelle Breite hinzu.
• Weißraumverhältnis: 25–40 % der Oberfläche sind offen; die Abstandsskala ist 8, 16, 24, 32, 48 und 64px, und eine Karte hat 24px Innenabstand.
• Ausrichtungsregeln: Linksbündiger Text; Blöcke sitzen auf Rasterkanten, eine leichte Neigung von 1 bis 2 Grad ist nur für Aufkleber und Abzeichen erlaubt; Abschnitte werden durch vollbreite 3px schwarze Linien getrennt.
• Behältergeometrie: Rechtecke mit einem Radius von 0px bis 8px, einem 3px schwarzen Rand und einem 4px 4px 0 0 #000000 Schatten; Pillen verwenden einen Radius von 999px nur für Tags.

Typografie

• Klassifikationen: Grotesk serifenlos · Monospace · Slab Serif
• Laufweite: Auszeichnungsgrößen nehmen -0.03em; Fließtext bleibt bei 0; Großbuchstaben-Labels nehmen +0.05em.
• Durchschuss: Auszeichnung 1.0 bis 1.1; Fließtext 1.5; Labels 1.2.
• Hierarchieregeln:
  • Gewicht 700 oder 800 für Überschriften und 400 oder 500 für Fließtext verwenden; die leichten Gewichte überspringen.
  • Überschriften mit 48px bis 96px und Fließtext mit 16px bis 18px setzen, ein Verhältnis von etwa 3:1 oder höher.
  • Buttons und Labels in fettem Großbuchstaben mit 14px und +0.05em Laufweite setzen.
  • Das Schlüsselwort einer Schlagzeile auf einen farbigen Highlight-Block mit einem 3px schwarzen Rand setzen.

Schriftpaarungen

Auszeichnung	Fließtext	Hinweis
Space Grotesk	DM Sans	Verspielte groteske Schlagzeilen über einer schlichten Textschrift.
Archivo Black	Work Sans	Schweres Poster-Gewicht für große Überschriften.
Bricolage Grotesque	Inter	Kondensierte, kontrastreiche Auszeichnungsschrift mit einer neutralen Grundschrift.
Space Mono	Space Grotesk	Monospace-Labels für eine rohe, technische Stimme.

Farbe & Beleuchtung

• Palettenstruktur: Schwarze Konturen, ein warmer gebrochener Weiß- oder Gelbton und zwei bis vier laute, flache Farbtöne wie Pink, Blau und Grün, jeweils bei 100 % Deckkraft, verwendet in großen Blöcken.
• Kontrastregeln: Schwarzer Text auf jeder lauten Füllung erreicht mindestens 7:1, z. B. 15:1 auf Lemon und 7:1 auf Electric Blue; weißer Text ist nur auf schwarzen Füllungen erlaubt; der 3px schwarze Rand gibt jedem Steuerelement eine 21:1-Kante.
• Oberflächenbehandlung: Flache, deckende Felder bei 100 % Deckkraft ohne Verlauf, ohne Textur und ohne Transparenz; ein optionales Punkt- oder Rastermuster mit 8 % Schwarz auf dem Seitenhintergrund.
• Licht und Schatten: Es wird keine Lichtquelle simuliert; ein harter Offset-Schatten von 4px 4px 0 0 #000000 fällt nach rechts unten mit null Unschärfe und fungiert als Kantenerweiterung.

Palette

Name	Hex	Rolle
Ink	#000000	Ränder, Schatten und Text
Cream	#FFF8E7	Seitenhintergrund
Lemon	#FFE14D	Highlight und primäre Füllung
Hot Pink	#FF5DA2	Akzentfüllung
Electric Blue	#4D7CFF	sekundäre Akzentfarbe
Mint	#6EE7B7	Erfolgs- und Tag-Füllung
White	#FFFFFF	Kartenoberfläche

Materialität & Textur

• Oberflächensimulation: Keine; die Oberfläche ist flaches, geschnittenes Papier oder Aufklebermaterial mit schwarzem Rand und hartem Schatten, das kein echtes Material imitiert.
• Randregeln: Durchgehende #000000 Ränder von 2px bei kleinen Steuerelementen, 3px bei Karten und 4px bei Hero-Blöcken; die Randfarbe ändert sich nie zwischen Zuständen.
• Unschärfe und Höhe: Unschärfe ist überall 0px; Höhe ist der Schatten-Offset: 2px 2px bei Tags, 4px 4px bei Karten und Buttons, 8px 8px bei Modalen, alle in #000000.

Ornamentik & Ikonografie

• Ikonografie: Fette Icons mit einem 2.5px bis 3px Strich und quadratischen oder runden Enden bei 24px, in Schwarz, oft innerhalb eines farbigen Kreises mit einem 2px-Rand.
• Illustration: Flache Illustration in der lauten Palette mit dicken schwarzen Konturen, plus Aufkleber, Sterne und Pfeile; handgezeichnete Markierungen sind willkommen.
• Dekorative Elemente: Aufkleber und Abzeichen · Lauftextbänder · Sternexplosionen · Punkt-Raster-Hintergründe · Pfeile und Unterstreichungsgekritzel

Bewegung & Interaktivität

• Für Bildschirm geboren: ja
• Übergangsphysik: Elemente verschieben sich bei Hover und Druck exakt um den Schatten-Offset, sodass der Schatten zu kollabieren scheint; die Bewegung ist kurz, linear im Gefühl und ohne Überschwingen.
• Easing: cubic-bezier(0.2, 0, 0, 1)
• Dauer (ms): 120
• Hover und aktiv: Hover verschiebt das Element 4px nach rechts und 4px nach unten und setzt den Schatten auf 0 0 0 0; aktiv behält diese Position; Fokus fügt einen 3px durchgehenden #4D7CFF Umriss mit 2px Abstand hinzu.

Code & Token-Vorlage

Setze data-style="neo-brutalism-ui" auf das Wurzelelement und füge die Tokens ein. Die Datei tokens.css enthält dieselben Tokens und eine Reihe von Referenzregeln.

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Tailwind-Muster:

Element	Klassen
Seite	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
Karte	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
Button	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
Eingabe	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
Überschrift	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
Tag	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

Visuelles Paket

Die Bilder und Icons dieses Stils sind Dateien. Verwende sie so, wie sie sind, oder lies sie als Spezifikation und zeichne deine eigenen in derselben Sprache.

Datei	Inhalt
pack/hero.svg	Hero-Platte, 800 x 600. Ein abstraktes Bild in der visuellen Sprache des Stils.
pack/pattern.svg	Musterkachel, 80 x 80. Sie wiederholt sich in beide Richtungen.
pack/icons.svg	Icon-Sprite: Startseite, Suche, Herz, Stern, Glocke, Benutzer, Mail, Kalender, Bild, Blitz, Abspielen, Check, Schließen, Schieberegler.

• Icons: Umriss, Strich 2.5 auf einem 24px-Feld, quadratische Enden, Gehrungsecken, Behälter: quadratisch. Verwendung: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Ein Icon verwendet currentColor.
• Icon-Familie: Der Sprite stammt von Phosphor (Bold) von Phosphor Icons, Lizenz MIT. Grund: Eine schwere Linie mit einem stumpfen Gewicht, das zu den dicken Rändern passt. Es handelt sich um einen Open-Source-Platzhalter für eine Demo. Für ein Produkt verwende die Icon-Bibliothek der Marke und wähle die Familie nach den folgenden Regeln aus.
• Auszeichnungstyp: Gewicht 700, Laufweite -0.03em, Durchschuss 0.95, Großschreibung: keine.
• Gewichte: Auszeichnung 700, Untertitel 700, Fließtext 500, Fett im Text 700, Labels und Buttons 700. Der Stil verwendet 2 Gewichte (500, 700) und keine anderen. Die Auszeichnung ist 200 schwerer als der Fließtext. Der Akzent ist das Gewicht: Ein schwereres Wort ist der Akzent, sodass die Schritte zwischen den Gewichten klar sind.
• Fließtext: 17px, Durchschuss 1.5.
• Seite: Hero-Split, linksbündig, kompakte Dichte, Akzentneigung -1°.
• Textfarbe: --color-text ist nur für den Hauptlesebereich. Auf jedem Feld verwende seinen Token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

So wählst du ein Icon-Paket aus

Ein Icon-Paket ist eine Schriftart für Bilder. Wähle es mit derselben Sorgfalt wie die Textschriftart. Diese Regeln gelten sowohl für Open-Source-Sets als auch für lizenzierte Bibliotheken.

1. Der Strich passt zum Stamm. Setze ein Icon neben den Fließtext in Textgröße. Die Linie des Icons und der Stamm eines Buchstabens haben dasselbe Gewicht.
2. Enden und Ecken folgen dem Radius-Token. Stumpfe Enden und Gehrungsecken passen zu einem Radius von Null. Runde Enden und runde Verbindungen passen zu einem weichen Radius.
3. Der Füllmodus folgt der Technologie der Ära. Druck-Ären schneiden solide Formen. Bildschirm-Ären mit Tiefe füllen und schattieren die Form. Aktuelle Produktschnittstellen zeichnen einen Umriss.
4. Die Metaphern sind nicht jünger als der Stil. Jedes Bild ist ein Objekt, das die Ära kannte. Ein Icon mit einer späteren Metapher bricht den Zeitraum.
5. Eine Familie, ein Raster. Alle Icons stammen aus einer Familie und einer Variante, gezeichnet auf einem Feld. Mische keine Familien auf einer Oberfläche.
6. Die Familie deckt das Produkt ab. Liste jedes Konzept auf, das das Produkt benötigt, bevor du dich festlegst. Eine Familie, die kein Icon für eines davon hat, ist die falsche Familie.
7. Die Farbe ist ein Token. Ein Icon verwendet currentColor. Ein zweiter Ton kommt von einem Token, nicht aus der Datei.
8. Die Lizenz erlaubt die Nutzung. Lies die Lizenz des Sets. Gib die Quellenangabe, wo die Lizenz danach verlangt. Ein Produkt mit einer Marke verwendet deren lizenzierte Bibliothek und wendet dieselben Regeln zur Auswahl der Familie an.

Abstammungs-Fallbacks

Wenn der Benutzer nach einer Variation fragt, improvisiere nicht. Bewege dich in Richtung des hier genannten Nachbarn und lade dessen Skill.

• Wenn der Benutzer nach ruhiger fragt: Bewege dich in Richtung flat-design (Flat Design). Reduziere den Rand auf 1px, entferne den Offset-Schatten und dämpfe die Füllungen auf 60 % Sättigung; behalte die flachen Felder und das Raster bei.

• Wenn der Benutzer nach ordentlicher fragt: Bewege dich in Richtung swiss-international (Schweizer Typografie). Reduziere die Palette auf Schwarz, Weiß und ein Rot, setze einen Radius von 0px und linksbündigen Text auf einem 12-Spalten-Raster; behalte die 2px-Linien bei.

• Wenn der Benutzer nach app-ähnlicher fragt: Bewege dich in Richtung bento-grid-ui (Bento-Grid-UI). Packe den Inhalt in ein rechteckiges Raster aus Zellen gemischter Größe mit einem 16px-Abstand; behalte den 3px-Rand und den harten Schatten bei.

• Wenn der Benutzer nach polierter fragt: Bewege dich in Richtung material-design (Material Design). Wechsle zu einem 8px-Radius, einem 1px-Rand und einem weichen Schatten von 0 2px 4px rgba(0, 0, 0, 0.2); behalte einen lauten Akzent bei.

• Gekommen von (gehe hierhin für eine orthodoxere Version): flat-design

• Lehnt ab (der entgegengesetzte Pol; nicht mischen): corporate-memphis