Schönheit und Brutalismus: Wie ich blakecrosley.com an der Schnittstelle gestaltet habe

Ich habe blakecrosley.com ohne Farben, ohne Verläufe, ohne Illustrationen und ohne dekorative Elemente gestaltet. Nur weiße Typografie auf absolutem Schwarz (#000000), mit Transparenzstufen bei 5 %, 10 %, 40 % und 65 %, die die gesamte visuelle Hierarchie erzeugen. Die Website erreicht 100/100 im Lighthouse-Performance-Test und verwirklicht das, was ich „ehrliche Schönheit” nenne: strukturelle Klarheit mit präziser Handwerkskunst.¹

TL;DR

Brutalismus im digitalen Design reduziert Interfaces auf strukturelle Ehrlichkeit: rohe Typografie, sichtbare Raster, minimale Dekoration. Schönheit fügt Verfeinerung hinzu: harmonische Farbbeziehungen, präzise Abstände, Mikrointeraktionen. Die überzeugendsten modernen Produkte (Linear, Notion, Arc Browser) bewegen sich an dieser Schnittstelle. Ich habe blakecrosley.com an genau dieser Schnittstelle gebaut, und dieser Beitrag dokumentiert die konkreten CSS-Entscheidungen, was ich entfernt habe und warum die Spannung zwischen Ehrlichkeit und Handwerkskunst bessere Interfaces hervorbringt als jedes der beiden Prinzipien allein.

Mein Designsystem: Brutalismus als Fundament

Die Farb-Nicht-Palette

Die meisten Designsysteme beginnen mit einer Farbpalette. Meines beginnt mit deren Abwesenheit:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Keine Markenfarben. Keine semantischen Farben jenseits von Transparenzstufen. Die gesamte visuelle Hierarchie funktioniert über vier Transparenzebenen: 100 % (primär), 65 % (sekundär), 40 % (tertiär) und 10 % (strukturelle Rahmen). Das ist brutalistisch im Prinzip: Das Material (Licht auf Dunkel) wird direkt eingesetzt statt dekoriert.²

Die Entscheidung war bewusst getroffen. Während meiner 16 Produktdesign-Studien fiel mir auf, dass die Produkte, die ich am meisten respektierte (Linear, Vercel, Raycast), zurückhaltende Paletten verwendeten, bei denen Typografie und Abstände die Hierarchiearbeit leisteten. Produkte mit mehr als 8 semantischen Farben nutzten Farbe oft als Ersatz für strukturelle Klarheit.

Typografie als primäre Hierarchie

Ohne Farbe als Hierarchieträger übernimmt die Typografie alles:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

Systemschriften, keine benutzerdefinierten Webschriften. Das ist sowohl eine brutalistische Entscheidung (das native Material der Plattform verwenden) als auch eine Performance-Entscheidung (keine Ladezeit für Schriften, was zu perfekten Lighthouse-Werten beiträgt). Die Display-Größe (80px) mit engem Buchstabenabstand (-0.03em) verleiht Überschriften Gewicht ohne Dekoration. Fließtext bei 16px mit großzügiger Zeilenhöhe (1.7) priorisiert Lesbarkeit gegenüber Dichte.³

Das 8-Punkt-Abstandssystem

Jeder Abstandswert leitet sich von einer 8-Punkt-Basis ab:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Keine willkürlichen Werte. Wenn ein Abstand nicht im System existiert, ist das Design falsch, nicht das System. Ich habe das auf die harte Tour gelernt, als ich --spacing-2xs in einem Untertitel-Margin verwendete (ein Token, das nicht existierte) und das Layout stillschweigend zerbrach. Die Lösung bestand darin, auf --spacing-xs zu wechseln, nicht darin, ein neues Token zu erstellen.⁴

Was ich entfernt habe (und warum)

Keine Verläufe

Verläufe dienen zwei Zwecken: visuellem Interesse und Tiefensimulation. Auf einer Website, die um Inhalte herum gebaut ist (Blogbeiträge, Projektbeschreibungen), konkurrieren Verläufe mit dem Inhalt um visuelle Aufmerksamkeit. Ich habe alle Verläufe entfernt und lasse den Inhalt selbst das visuelle Interesse erzeugen.

Keine Illustrationen oder Icons

Keine dekorativen SVGs, keine Hero-Illustrationen, keine Icon-Bibliotheken. Fotografie dient als einziges nicht-typografisches visuelles Element (persönliche Fotos auf der Startseite). Jedes Foto hat einen 4/3-Seitenverhältnis-Container mit ausschließlich border-radius — keine Schatten, keine Overlays, keine Farbbehandlungen.

Keine Box-Schatten (Standardzustand)

Elemente im Standardzustand haben keinen Schatten. Hover-Zustände fügen subtile Tiefe hinzu:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Schatten erscheinen ausschließlich als funktionales Feedback (dieses Element ist interaktiv und Sie interagieren gerade damit), niemals als Dekoration.

Kein Light Mode

Die Website hat keine prefers-color-scheme-Media-Query. Sie funktioniert ausschließlich im Dark Mode. Das ist eine bewusst kompromisslose Entscheidung: Anstatt zwei visuelle Systeme zu pflegen und dabei unweigerlich beide zu verwässern, habe ich ein System gut gestaltet. Der absolute schwarze Hintergrund (#000000 statt #0a0a0a oder #1a1a1a) gibt der Typografie maximalen Kontrast.⁵

Wo die Schönheit einsetzt

Brutalistische Struktur allein erzeugt Feindseligkeit. Die Schönheit in meinem Design entsteht durch handwerkliche Ausführung, nicht durch Dekoration:

Mikrointeraktionen als funktionales Feedback

Jedes interaktive Element hat einen Übergang, aber kein Übergang existiert um des ästhetischen Vergnügens willen:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Navigationslinks zeigen beim Hover eine Unterstreichung (funktional: bestätigt Interaktivität). Projektkarten skalieren auf 1,08x (funktional: zeigt den klickbaren Bereich an). Das mobile Hamburger-Menü animiert sich zu einem X (funktional: kommuniziert Zustandsänderung). Keine Animation existiert ohne funktionalen Zweck.⁶

Eingangsanimationen für Kartengruppen

Karten erscheinen mit einer gestaffelten translateY(16px)-Animation:

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

Dies dient einem funktionalen Zweck: Es kommuniziert, dass Inhalte geladen wurden, und lenkt die Aufmerksamkeit auf neu sichtbare Elemente. Die Staffelung (jede Karte um 100ms verzögert) erzeugt einen Rhythmus, der den Benutzern beim Überblicken der Gruppe hilft. Die Animation dauert 500ms mit einer Cubic-Bézier-Beschleunigung — schnell genug, um die Interaktion nicht zu verzögern, geschmeidig genug, um sich handwerklich anzufühlen.

Der Glassmorphism-Header

Das eine dekorationsnahe Element:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

Der unscharfe Header dient einem funktionalen Zweck: Er signalisiert, dass Inhalte hinter der Navigation scrollen, und etabliert den Header als persistente Ebene. Doch die Unschärfe fügt auch visuelles Handwerk hinzu — es ist einer der wenigen Momente, in denen das Design neben der Funktion auch Schönheit priorisiert.

Produkte, die dieselbe Balance finden

Linear: Brutalistische Struktur, schöne Ausführung

Linears Projektmanagement-Interface ist dicht, tastaturgesteuert und setzt professionelle Benutzer voraus. Keine Illustrationen, kein schrittweises Onboarding. Die Struktur ist brutalistisch. Die Ausführung ist schön: präzise Typografie, harmonisches dunkles Farbschema, geschmeidige 60fps-Animationen. Jeder Pixel dient einem Zweck. Der Zweck wird mit Handwerkskunst erfüllt.⁷

Notion: Rohe Blöcke, verfeinertes System

Notion legt sein zugrundeliegendes Datenmodell (Blöcke) direkt den Benutzern offen. Die strukturelle Ehrlichkeit ist brutalistisch. Die Verfeinerung zeigt sich im Interaktionsdesign: geschmeidiges Drag-and-Drop, reaktionsschnelle Inline-Bearbeitung und eine Befehlspalette, die das Blocksystem mühelos wirken lässt.⁸

Arc Browser: Brutalistische Navigation, schönes Chrome

Arc legt das zugrundeliegende Tab-Verwaltungssystem des Browsers offen (vertikale Tabs, Arbeitsbereiche, geteilte Ansichten). Die strukturelle Ehrlichkeit ist brutalistisch. Die visuelle Ausführung (Verlaufsthemen, geschmeidige Animationen) macht Tab-Verwaltung angenehm statt klinisch.⁹

Der Gleichgewichtspunkt

Der effektivste Ansatz nutzt brutalistische Prinzipien für die Struktur und Schönheitsprinzipien für die Ausführung:

Zentrale Erkenntnisse

Für Designer: - Nutzen Sie brutalistische Prinzipien für die Struktur (Layout, Informationsarchitektur, Farbe) und Schönheitsprinzipien für die Ausführung (Typografie, Abstände, Mikrointeraktionen); die Kombination erzeugt Interfaces, die ehrlich und angenehm sind - Entfernen Sie jedes dekorative Element und fragen Sie sich, was kaputtgeht; wenn nichts kaputtgeht, war die Dekoration überflüssig - Gestalten Sie einen Modus gut, statt zwei Moden mittelmäßig; mein Dark-Only-Ansatz erzeugt ein kohärenteres System als ein verwässerter Light/Dark-Umschalter

Für Entwickler: - Implementieren Sie Design-Tokens als CSS Custom Properties ohne willkürliche Werte; wenn ein Abstand nicht im System existiert, korrigieren Sie das Design, anstatt einen Einmalwert hinzuzufügen - Behandeln Sie Mikrointeraktionen als funktionales Feedback; ein 150ms-Hover-Übergang kommuniziert Interaktivität, während eine 2-Sekunden-Eingangsanimation nichts Nützliches kommuniziert

Für Produktverantwortliche: - Stimmen Sie die ästhetische Positionierung auf den Benutzerkontext ab; professionelle Werkzeuge tendieren zum Brutalismus, Verbraucherprodukte zur Schönheit, und die besten Produkte finden die Schnittstelle

Referenzen