kennedys0/taste-style-neo-brutalism

Verwende diese Skill nur, nachdem ein Benutzer sie explizit ausgewählt hat oder eine bestätigte Projektkonfiguration sie vorgibt. Bei unerklärten neuen UI-Anfragen verwende stattdessen einen Stilauswähler wie z. B. eine Stilauswahl, anstatt hier über den Geschmack des Benutzers zu entscheiden. Bestehende Marken-, Barrierefreiheits- und Benutzerüberschreibungen haben Vorrang vor allen untenstehenden Beispielen. Die folgende Stilrichtlinie ist keine Genehmigung, vor der Stilauswahl mit UI-Codierung zu beginnen.

Style-Pack: Neo-Brutalismus

ID: neo-brutalism
Signatur: Verspielte kräftige Farben, hochkontrastreiche schwarze Ränder, harte unverschwommene Offset-Schatten und taktiles mechanisches Druck-Feedback.

Dies ist ein Style-Pack, kein verbindlicher Standard. Lade es nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben. Beachte Barrierefreiheit, Nutzbarkeit und Markenvorgaben. Schriftarten sind Vorschläge, keine zwingenden Abhängigkeiten. Eine flache Karte mit abgerundeten Ecken und einem weichen, verschwommenen Schlagschatten qualifiziert sich nicht als Neo-Brutalismus.

Gute Passung / Abwägungen

• Funktioniert gut für: Creator-Tools, verspielte B2B-SaaS, moderne Entwicklerportale, Hackathon-/Event-Plattformen, Indie-Produktwebsites und Marketingseiten, die eine unverwechselbare Persönlichkeit erfordern.
• Vorsichtig sein bei: Formeller Finanzberichterstattung oder juristischen Enterprise-Workflows, es sei denn, sie sind gezielt für ein energiegeladenes, nicht-traditionelles Publikum gebrandet.
• Referenzrichtungen:
  • Heller Pop-Canvas: Knackiger Creme- oder warmer Papierton (#FFFDF7 / #F4F0EA) mit hochkontrastreichen schwarzen Strichen (#121212), elektrischen Akzentfüllungen (leuchtendes Gelb #FFDE59, knalliges Cyan #4DEEEA, Koralle #FF5E5B) und knackigen, unverschwommenen Schlagschatten (5px 5px 0 #121212).
  • Dunkler Pop-Kontrast: Tiefer Tinten-Canvas (#18181B) mit hellweißen Rändern (2.5px solid #FAFAFA), lebhaften Limetten-/Violett-Akzenten und weißen/Akzent-Offset-Schatten (4px 4px 0 #FAFAFA).

Neo-brutalistische Materialtreue-Prüfung – verbindlich

Bevor eine neo-brutalistische Seite als vollständig bezeichnet wird, muss der sichtbare Viewport eindeutig als authentische neo-brutalistische Komposition erkennbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist eine generische Karte mit leichtem Randradius und Standard-Weichzeichnungsschatten ein FEHLER, selbst wenn die CSS-Klassen neo enthalten.

Eine erfolgreiche neo-brutalistische Implementierung zeigt alle der folgenden Merkmale:

1. Hochkontrastreiche durchgehende Umrisse: Kerncontainer, klickbare Schaltflächen, Eingabefelder und Abzeichen haben knackige durchgehende Ränder (2px–3px solid #121212). Keine schwachen grauen Haarstrich-Umrisse.
2. Harte, unverschwommene Offset-Schatten: Oberflächen werfen scharfe, 0-Unschärfe-Richtungsschatten (4px 4px 0 #121212 für Steuerelemente, 6px 6px 0 #121212 bis 8px 8px 0 #121212 für Karten). Ein weicher, verschwommener Schatten ist ein direkter Fehler.
3. Mechanischer Druck-Kollaps: Bei :active oder Klick drücken sich interaktive Schaltflächen physisch entlang der Schattenachse (transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;) und bieten ein unverwechselbares taktiles mechanisches Feedback.
4. Lebendige, bewusste Farbblockbildung: Eine ausgewogene, kontrastreiche Palette: 1 Canvas-Basis + 1 tiefschwarze Farbe + 1–2 zielgerichtete, gesättigte Akzente, die für primäre Aktionen und semantische Gruppierung verwendet werden.
5. Kühne, asymmetrische typografische Struktur: Selbstbewusste Grotesk- oder geometrische Typografie mit engen Zeilenhöhen und klarem Kontrast zwischen massiven Überschriften und lesbarem Fließtext.

Erster-Viewport-Test: In einem Desktop-Screenshot identifiziere die dicken schwarzen Umrisse, die harten Offset-Schatten ohne Unschärfe und die taktilen Schaltflächenzustände, ohne den Seitentitel zu lesen. Wenn es wie ein standardmäßiges flaches SaaS-Layout aussieht, überarbeite die Rand- und Schatten-Tokens, bevor du fortfährst.

Ausdrückliche neo-brutalistische Ausnahme für harte Schatten – Schatten dürfen scharf sein

Neo-Brutalismus-spezifische Überschreibung: Die universelle Anti-Slop-Warnung vor übermäßiger Dekoration oder ablenkenden Schatten DARF NICHT als Verbot von harten Offset-Schatten oder schwarzen Umrissen hier interpretiert werden. Dies sind materialermöglichende Eigenschaften, wesentlich für die neo-brutalistische Physik und visuelle Klarheit.

• Erlaubte Materialbehandlungen: Durchgehende Offset-Schatten ohne Unschärfe (4px 4px 0 #000), 2–3px schwarze Ränder, Abzeichen-Drehungen (zwischen -2° und +2° nur für Abzeichen) und kontrastreiche Farb-Pillen.
• Farbkontrast-Disziplin: Jeglicher Text auf lebendigen Akzent-Hintergründen (Gelb, Cyan, Limette, Koralle) muss gegen schwarze Tinte (#121212) getestet werden, um WCAG AA (4,5:1) zu überschreiten. Reiner weißer Text ist streng für dunkle Tintenfüllungen reserviert.
• Anti-Slop-Interpretation: Werte neo-brutalistische Elemente nach Affordanz, Layout-Struktur und Lesbarkeit aus, nicht durch das Zählen harter Schatten. Das Entfernen von harten Offset-Schatten, um eine generische minimale Heuristik zu erfüllen, ist eine Design-Regression.

Typografie und Schriftbild

Ausdrucksstarke, selbstbewusste Grotesk-Serifenlose: Space Grotesk, Archivo, Syne oder System-Serifenlose. Überschriften 36–56 px Desktop / 28–40 px Mobil; Gewicht 700–800. Fließtext 15–17 px, Gewicht 400–500; Zeilenhöhe 1.45–1.55. Seitenindizes und Metadaten können Großbuchstaben-Spationierung verwenden (letter-spacing: 0.05em). Knackige, menschliche Mikrotexte ohne hohle Slogans.

Farbrichtung

• Heller Modus (Knackiger Pop Hell):
  • Canvas-Basis: Cremeweiß / helles Creme (#FFFDF7 oder #F7F5F0).
  • Kartenhintergrund: Reines Weiß (#FFFFFF) oder hell getönter Block.
  • Tinte / Strich: Tiefschwarz (#121212).
  • Offset-Schatten: Durchgehendes Schwarz (4px 4px 0 #121212).
• Dunkler Modus (Dunkler Pop-Kontrast):
  • Canvas-Basis: Tiefer Tinten-Canvas (#18181B).
  • Kartenhintergrund: Erhöhtes dunkles Anthrazit (#222227) oder tiefes Schiefergrau (#27272A).
  • Tinte / Strich: Helles Weiß / Creme (#FAFAFA).
  • Offset-Schatten: Helles Weiß oder lebendiger Akzent (4px 4px 0 #FAFAFA oder 4px 4px 0 var(--taste-neo-accent-primary)).
• Primärakzent: Lebendige Pop-Farbe (z.B. Elektrisches Gelb #FFE600, Heißes Koralle #FF5757 oder Königliches Kobalt #3B5BFF).
• Sekundärakzent: Komplementärer Kontrast (z.B. Knackiges Mint #00F0A8 oder Flieder-Pop #D8B4FE).
• Themenkopplung und Anti-Kollisions-Regel: Im Dunkelmodus MÜSSEN Ränder und Offset-Schatten auf hell/weiß oder helle Akzente umschalten. Das Belassen von schwarzen Rändern und schwarzen Schatten auf einem dunklen Canvas führt zu vollständigem Verlust von Tiefe und Kontrast (Schwarz auf Schwarz). Jeglicher Text auf lebendigen Akzent-Hintergründen (Gelb, Cyan, Limette, Koralle) muss gegen schwarze Tinte (#121212) getestet werden, um WCAG AA (4,5:1) zu überschreiten. Reiner weißer Text ist streng für dunkle Tintenfüllungen reserviert.

Layout und Geometrie

Ecken sind eckig oder subtil abgerundet (0px–8px max); großzügiges Padding (20px–32px auf Karten); 2px–3px durchgehende Ränder; 4px–8px harte Offset-Schatten. Der Abstand verwendet ein festes 8px-Raster. Das Layout sollte geerdet, knackig und selbstbewusst wirken.

Oberflächen, Tiefe, Textur

Oberflächen sind sauber, deckend und solide:

• Schaltflächen (Erhöht): background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212;
• Schaltflächen (Aktiv/Gedrückt): transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;
• Karten & Panels: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212;
• Eingabefelder: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212; (wird bei Fokus enger).

Komponenten-Anatomie und Interaktion

• Primäre Aktion (CTA): Kräftige farbige Pille / Rechteck mit hartem Offset-Schatten, dickem Strich und taktilem Klick-Druck.
• Sekundäre Aktion: Weiße oder transparente Füllung mit schwarzem Rand, invertierter Hover-Effekt (background: #121212; color: #FFFFFF;).
• Formularsteuerelemente: Umrandetes Eingabefeld mit knackigem Label, deutlichem Fokus-Zustand mit farbigem Offset-Glow oder vertieftem Strich.
• Status-Abzeichen / Tags: Kontrastreiche Pille mit 2px Strich, subtilem 2px Offset-Schatten und kurzem konkretem Label.
• Karten: Knackige Trennlinien (border-bottom: 2px solid #121212), die Kartenkopf, -inhalt und Aktionsfußzeile trennen.

Bewegung

100–160 ms knackige lineare oder Ease-Out-Übergänge. Direkte 1–2px Verschiebung bei Druck. Verwende niemals lange, hüpfende Federn, Schwebe-Schleifen oder cartoonartige Oszillationen.

Optionales Anime.js v4 Rezept

• Bewegungsentscheidung: Kurze direkte 1–2px Schaltflächenverschiebung mit einer passenden harten Schattenreaktion; animiere niemals riesige Schatten.
• Startdauer: 130ms (0 = sofort); an Aufgabe und Benutzerpräferenz anpassen.
• Vermeiden: Hüpfen und sich endlos bewegende Aufkleber.
• Abhängigkeit: CSS/nativ standardmäßig. Verwende Anime.js v4 nur, wenn die angeforderte Interaktion dies rechtfertigt. Folge dem Taste Engine references/motion-engine.md wenn verfügbar; eigenständige Skill folgt den oben genannten Prinzipien der reduzierten Bewegung und der dekorativen Schleifenvermeidung.

UI-Schreiben und MikroTexte

Energiegeladen, einfach und direkt. Beispiele: „Erstellen starten“, „Code abrufen“, „In die Zwischenablage kopiert“. Vermeide Unternehmensjargon oder niedliche Meme-Texte in Produktionstools.

Starter-Tokens (Vorschläge, kein vollständiges Thema)

Token	Standard Hellmodus	Standard Dunkelmodus
--taste-neo-bg	#fffdf7	#18181b
--taste-neo-card-bg	#ffffff	#222227
--taste-neo-ink	#121212	#fafafa
--taste-neo-border	2.5px solid #121212	2.5px solid #fafafa
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #fafafa
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #fafafa
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #fafafa
--taste-neo-accent-primary	#ffe600	#ffe600
--taste-neo-accent-secondary	#ff5757	#ff5757
--taste-neo-radius	6px	6px
--taste-neo-font-body	Space Grotesk, Archivo, system-ui, sans-serif	Space Grotesk, Archivo, system-ui, sans-serif
--taste-neo-motion-duration	130ms	130ms

Tokens repräsentieren eine Richtung und sind nicht garantiert per Copy-Paste für jede Palette/Plattform. Definiere --taste-neo-* auf Projektebene, stelle Farbkontrast sicher und passe über Themens-Tokens an, anstatt Literalwerte zu verstreuen.

Helden-Komposition (voller erster Viewport)

Wenn ein öffentlichkeitswirksames Portfolio/Landing/Homepage einen Helden hat: Verwende eine einbildschirmsichtbare Kopfzeilen+Helden-Komposition. Basis-Höhe auf min-height: 100svh mit 100vh Fallback, abzüglich der echten Kopfzeile nur, wenn diese im normalen Fluss ist; lasse den Helden für Barrierefreiheit und kurze mobile Bildschirme expandieren. Wende dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Mache den vollständigen Viewport energiegeladen durch kühne asymmetrische Blöcke, gut geerdete Auszeichnungstypografie und eine hochkontrastreiche primäre Aktion. Dicke Ränder und Offset-Schatten bleiben beabsichtigt; staple keine Aufkleber, zusätzliche umrandete Kästen oder sich drehende Ornamente, um den Bildschirm zu füllen. Siehe, sofern vorhanden, den Router references/hero-layout.md. Eigenständige Verwendung folgt denselben reaktionsfähigen und Anti-Slop-Prinzipien.

Stilspezifisches Qualitätstor

• Tun: Überprüfe harte, unverschwommene Offset-Schatten; halte 2–3px durchgehende Ränder ein; teste taktile Druckverschiebung; überprüfe Textkontrast gegen gesättigte Akzente (schwarze Tinte auf Gelb/Cyan/Mint); überprüfe Dunkel-/Hellmodus-Umschaltung, sodass Ränder, Offset-Schatten und Tinte korrekt invertieren und niemals in dunklen Gründen verschwinden.
• Nicht tun: Füge keine Unschärfe oder Ausdehnung zu neo-brutalistischen Schatten hinzu; vermeide gedämpfte, kontrastarme Pastelltöne; platziere keinen rein weißen Text auf gelben oder mintfarbenen Schaltflächen; lasse keine schwarzen Ränder/Schatten auf dunklem Canvas.
• Bestätige Desktop- und Mobilkonsistenz; sichtbaren Tastaturfokus (:focus-visible); Lade-, Leer-, Deaktiviert-, Fehler- und Erfolgszustände; reduziertes Bewegungsverhalten (prefers-reduced-motion).
• Injiziere keine stilspezifischen Annahmen in nicht verwandte Projekte. Wenn Stile kombiniert werden, nenne explizit den primären Stil und die entliehenen Merkmale.

Universelles Anti-Slop-Tor (eigenständig)

Jedes Element muss sich seinen Platz verdienen. Inhalt vor Dekoration. Dekoriere keine Unsicherheit. Erfinde keine Salden, Metriken, Testimonials, Benutzer, Logos, Genehmigungen, verifizierten/live/online-Status, gefälschte Aktivitäten oder Erfolgsbestätigungen; verwende stattdessen ehrliche Leer-/Lade-/Fehlerzustände. Demodaten sind nur akzeptabel, wenn sie angefordert und sichtbar gekennzeichnet sind.

Füge keine dekorativen Karte-in-Karte Schichten hinzu: Eine verschachtelte Oberfläche muss eine eigenständige Interaktions- oder Informationsgrenze darstellen. Vermeide automatisch generierte 3-Funktionen-Raster, 4-Stat-Dashboards, gefälschte Helden-Behauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, nicht zusammenhängende dekorative Kunst und zufällige Schleifen, die nur den Viewport füllen. Bevorzuge Gruppierung durch Typografie, Abstände, Ausrichtung und Trennlinien. Gleiche Elemente benötigen eine absichtliche visuelle Balance.

Anti-Slop-Texten: Keine generischen „Entfalte dein Potenzial“, „Erlebe die Zukunft“, „Beschleunige deinen Workflow“, „nahtlos“-Behauptungen oder übersetzte Äquivalente. Überschriften müssen tatsächlichen Inhalt vermitteln, CTAs müssen die Aktion benennen, und Leer-/Fehler-/Erfolgstexte müssen reale Zustände und nächste Schritte beschreiben. Vermeide gefälschte Dringlichkeit, erfundene Zahlen, vage KI-Hype, unnötige Emojis und unzugängliche Großbuchstabenwände. Passe die Formulierung an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.

Themen- und Moduskontrast-Integrität: Wenn ein Benutzer den Dunkelmodus oder Hellmodus anfordert (oder einen Themenwechsler baut), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Ränder, Eingaben und semantischen Abzeichen hinweg wechseln. Lasse niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare kontrastarme Status-Pillen zurück. Alle Zustände müssen WCAG AA-Kontrast erfüllen (mindestens 4,5:1 für Fließtext/normalen Text, 3:1 für große Überschriften und interaktive Grenzen).

Reaktionsfähigkeit und Bewegung: Gestalte mobil bewusst, überprüfe lange Labels, Fokuszustände und zugänglichen Kontrast; kein Text-Clipping, um in ein trendiges Layout zu passen. Standardmäßig statisch; verwende Bewegung für sinnvolle Interaktionen, respektiere Präferenzen für reduzierte Bewegung, vermeide Hüpfen/Schweben/Pulsieren-Dekoration ohne echten Zustand.

Abschluss kritischer/hoher Befunde: Erfundener Status/Daten, defekte Aktionen, unzugängliche/beschnittene Steuerelemente, irreführende Texte, Themenkontrast-Kollisionen oder signifikanter Mobilfehler müssen behoben werden. Berichte, was tatsächlich verifiziert wurde; behaupte keine Tests, die nicht durchgeführt wurden.

Kein Ästhetik-Veto: Ausdrucksstarke Farben, Schatten, Farbverläufe, Kartenlayouts oder…

… [für die Übersetzung abgeschnitten]