Brutalism-UI: Wie wir designen
Warum Brutalism?
Viele Social Casinos greifen zu Neon oder Soft-Gradient. Wir wollten das Gegenteil: Kanten, Beton, klare Linien. Brutalism transportiert Stärke – perfekt für einen Namen wie MammothMuscle.
Die Optik orientiert sich an alten Kraftwerksplänen: dicke Linien, kontrastreiche Flächen, sichtbare Raster. Dazu kommen Schatten, die aussehen wie Schweißnähte. Spielerinnen und Spieler sollen direkt merken: Hier geht es um Power, nicht ums schnelle Geld.
OOCSS + Struktur
Um Brutalism beherrschbar zu machen, verwenden wir OOCSS. Wir trennen Struktur (z. B. structure-band) von Skin-Klassen (benefit-brick). Dadurch können wir Layouts flexibel kombinieren, ohne jedes Mal die komplette CSS-Statik umzuschmeißen.
Beispielsweise ist unsere Hero-Sektion eine Grid-Struktur mit Skin-Layern für Schatten und Linien. Buttons nutzen die Klasse trigger-base plus Skin trigger-3d. So bleibt das Projekt maintainable, obwohl jede Seite einzigartig wirkt.
Barrierefreiheit
Brutalism muss nicht automatisch unfreundlich sein. Wir sorgen für hohen Kontrast (WCAG AA), setzen auf klare Fokus-Stile und stellen sicher, dass Screenreader die Struktur verstehen.
Außerdem verzichten wir bewusst auf übertriebene Animationen. Alles bewegt sich direkt, linear und nachvollziehbar. So bleibt das UI auch bei längeren Sessions entspannt.
Workflow & Tools
Wir designen in Figma mit einem eigenen Brutalism-Kit: definierte Schatten, Raster und Farbebenen. Anschließend übertragen wir Komponenten in reine HTML/CSS-Objekte.
Code-Review erfolgt im Team mit Fokus auf Naming-Konsistenz und Performance. Jede neue Komponente muss mobile-first laufen und darf den DOM nicht aufblähen. Erst wenn alles stabil ist, landet es im Live-Blog.