zinc-950: Warum jeder KI-Hero 2026 dunkel ist

Öffne zehn Series-A-SaaS-Landingpages, die in den letzten sechs Monaten online gegangen sind. Acht davon laden in denselben Screen: ein Hintergrund irgendwo zwischen #09090b und #0a0a0a, eine weiße Headline in 5xl bis 7xl mit eng gestelltem Tracking, eine Subline in einem entsättigten Grau, eine Akzentfarbe, die wie eine ferne Sonne hinter der H1 glüht, und ein Get started-Button mit dezentem Gradient-Border. Der Hero ist dunkel. Der Hero ist inzwischen *immer* dunkel.

Vor zwei Jahren war der KI-Standard noch der Blau-Violett-Verlauf auf Weiß — die Tailwind-Signatur from-blue-500 to-purple-600, über die ich schon einmal geschrieben habe. Dieses Erkennungsmerkmal wurde so berüchtigt, dass die Generatoren, die Prompts und die Gründer, die sich gegenseitig kopieren, allesamt weitergezogen sind. Der neue sichere Hafen ist Beinahe-Schwarz. Dark Mode liest sich als „seriöse Infra-Firma", er kaschiert eine Unmenge an Layout-Sünden und — entscheidend — er ist das, was jedes Modell heute ausspuckt, wenn du nach „einem cleanen, modernen SaaS-Hero" fragst. Der Slop ist nicht verschwunden. Er hat nur die Wellenlänge gewechselt.

Die exakte Palette, bei der jeder Generator landet

Frag Claude, v0, Lovable oder Bolt nach einem dunklen SaaS-Hero, und du bekommst eine erstaunlich enge Auswahl an Werten. Nicht „dunkel" im abstrakten Sinn — diese ganz konkreten Tailwind-Tokens, in dieser ganz konkreten Anordnung:

/* The 2026 dark-default stack */
background:      #09090b;  /* zinc-950 — the canvas */
surface:         #18181b;  /* zinc-900 — cards, nav */
border:          #27272a;  /* zinc-800 — hairline borders */
heading:         #fafafa;  /* zinc-50  — never pure #fff */
body:            #a1a1aa;  /* zinc-400 — the subhead */
muted:           #71717a;  /* zinc-500 — captions, footer */
accent:          #6366f1;  /* indigo-500 — the one pop */

Das war's. Das ist die komplette Farblogik der Seite. Warum es ausgerechnet *zinc* ist und nicht slate, gray, neutral oder stone — alle fünf liefert Tailwind mit — lohnt einen kurzen Moment des Innehaltens. Zinc hat einen leichten kühlblauen Unterton: zinc-950 ist #09090b, wobei der Blaukanal 0b einen Tick über Rot und Grün (09) liegt. Es wirkt „gestalteter" als das flache neutral (#0a0a0a, perfekt ausbalanciert) und weniger düster als slate (#020617, stark blaustichig). Es wurde zur Standard-Basisfarbe von shadcn/ui, und weil shadcn die Design-Monokultur ist, ist zinc einfach mitgefahren.

Das ist keine Vermutung über Geschmack. Es ist eine Voreinstellung, die buchstäblich für dich getroffen wird. Lass das Scaffolding laufen und schau zu:

$ npx shadcn@latest init
✔ Which color would you like to use as the base color?
  › Neutral
    Gray
  ❯ Zinc          # top of the list, pre-highlighted
    Stone
    Slate

Drück Enter, und in deiner components.json steht für immer "baseColor": "zinc". Millionen Repos tragen heute diese eine Zeile, die niemand bewusst gewählt hat. Der Standard hat sich durch Muskelgedächtnis verbreitet, nicht durch Entscheidung.

Der Akzent rotiert ein wenig — Indigo #6366f1, Violett #8b5cf6, Emerald #10b981 oder ein Cyan #22d3ee — aber das Prinzip ist identisch: genau ein gesättigter Farbton gegen das Zinc, eingesetzt für den Primärbutton, Link-Hovers und einen Glow. Designer nennen das „one-accent dark", und es ist tatsächlich ein solides System. Das Problem ist nicht das System. Das Problem ist, dass 80 % der Seiten das *identische* System mit den *identischen* Tokens fahren.

Warum die Maschinen zum Beinahe-Schwarz greifen

Es gibt vier mechanische Gründe, und keiner davon lautet „weil es am besten aussieht".

1. Dark Mode verzeiht schlechtes Spacing. Auf einer weißen Seite schreit jedes schief sitzende Element, jeder inkonsistente Abstand, jeder leicht daneben liegende Schatten. Helle Hintergründe haben kein Versteck. Auf #09090b leistet der Kontrast so viel Schwerstarbeit, dass eine unsaubere Padding-Inkonsistenz von 18px gegen 24px im Nichts verschwindet. Generatoren produzieren strukturell mittelmäßige Layouts; Dark Mode ist die Tarnung für diese Mittelmäßigkeit. Das Modell hat im Grunde gelernt, dass dunkler Output weniger „das sieht kaputt aus"-Rückfragen einbringt.

2. Die Trainingsdaten kippten ins Dunkle. Linear, Vercel, Resend, Clerk, Railway, Supabase — die Landingpages, die 2024 bis 2025 als „Design-Vorbilder" gescreenshottet, gedribbblet und getweetet wurden, waren überwältigend dunkel. Füttere ein Modell mit zehntausend „schöne SaaS-Landingpage"-Beispielen, bei denen die meisten der hochbewerteten Beinahe-Schwarz sind, und „schöne SaaS-Landingpage" *wird* in den Gewichten zu Beinahe-Schwarz. Du bekommst keinen Geschmack. Du bekommst das statistische Zentrum der Screenshot-Ökonomie.

3. Weißer Text auf Dunkel erfüllt WCAG ohne Mühe. #fafafa auf #09090b ergibt ein Kontrastverhältnis von 19:1 — durch einen Accessibility-Audit kannst du damit gar nicht durchfallen. Auf Weiß ist die Wahl eines barrierefreien, aber nicht zu harten Fließtexts eine echte Entscheidung (#374151? #4b5563?). Auf Dunkel landet zinc-400-Text auf zinc-950 bei 7,76:1, locker über AA, und liest sich „weich", ohne dass der Designer darüber nachdenken musste. Der Weg des geringsten Widerstands ist hier zugleich der konforme.

4. Ein Akzent ist der billigste Weg, absichtsvoll zu wirken. Ein einzelnes Neon gegen Grau *liest* sich als Design-Entscheidung, selbst wenn gar keine getroffen wurde. Der Generator muss keine Palette aufbauen, keine Sekundärfarbe verwalten, kein Warm gegen Kalt austarieren. Er greift sich ein Indigo, streut es auf den CTA, und die Seite wirkt „durchdacht". Es ist das visuelle Äquivalent zu einem selbstsicheren Tonfall, der darüber hinwegtäuscht, dass nichts zu sagen ist.

Wenn du spüren willst, wie mechanisch das ist, lass den Prompt selbst laufen und vergleiche die Outputs. Gleiches bg-zinc-950, gleiche text-zinc-400-Subline, gleiche bg-gradient-to-b from-zinc-900-Nav, gleicher shadow-[0_0_120px] shadow-indigo-500/20-Glow. Ich habe diese Konvergenz als eines der 73 Muster katalogisiert — Dark-Default ist inzwischen Muster Null.

Die fünf untrüglichen Zeichen eines generierten Dark-Heros

Wenn ich eine Seite in 30 Sekunden auseinandernehme, verraten sich die Dark-Heros schnell:

• Der radiale Glow hinter der H1. Ein radial-gradient oder ein verschwommener, absolut positionierter Blob, fast immer indigo-500/20 oder purple-600/30, der genau mittig hinter der Headline sitzt. Es ist das Dark-Mode-Äquivalent zum Blau-Violett-Verlauf — eine Standardgeste „lass es premium wirken", grundlos angewendet.
• text-zinc-400 für jedes Wort, das keine Überschrift ist. Subline, Feature-Beschreibungen, Footer — alles dasselbe Grau. Echte Designer variieren Gewicht und Farbe des Fließtexts nach Hierarchie. Generatoren picken ein gedämpftes Grau und kippen es überall drauf.
• Der zarte obere Border, der eigentlich ein Verlauf ist. border-t border-white/10 plus eine Haarlinie aus bg-gradient-to-r from-transparent via-white/20 to-transparent. Vercel hat es zuerst und wunderschön gemacht; jetzt steckt es in jeder Navbar.
• backdrop-blur-md-Sticky-Nav über zinc-950/80. Der durchscheinende Glas-Header — ein Backdrop-Blur-Tell, den ich gesondert auseinandergenommen habe. Für sich genommen okay, im Maßstab ein Fingerabdruck.
• Geist oder Inter, tracking-tight, 7xl. Die Headline ist font-geist oder Inter, tracking-tight (oder tracking-tighter), text-7xl font-semibold. Ich habe argumentiert, dass Geist der neue Inter-Fingerabdruck ist — kombiniert mit zinc-950 ist das eine fast sichere Signatur einer generierten Seite.

Erkennst du drei dieser fünf, blickst du mit ziemlicher Sicherheit auf Output, nicht auf Design.

Dunkel ist gut. Generiertes Dunkel ist das Problem.

Ich will präzise sein: An einer dunklen Landingpage ist überhaupt nichts falsch. Linears Dark-Hero ist eine der besten Landingpages im Internet. Das Problem ist, dass „dunkler SaaS-Hero" in ein einziges Template kollabiert ist, und wer dieses Template ausliefert, signalisiert jedem Besucher, der heute schon vier andere Tabs gesehen hat, dass er zum Standard gegriffen hat. So bleibst du dunkel und verlierst trotzdem den Fingerabdruck.

1. Verschieb dich ein paar Grad weg von zinc-950

Die wirkungsvollste Einzeländerung. #09090b ist das Erkennungsmerkmal. Schieb deine Basis in einen Ton, in den kein Generator standardmäßig fällt:

/* Generated default */
--bg: #09090b;        /* zinc-950 — instantly recognized */

/* Warm near-black — feels like print, not infra */
--bg: #0c0a09;        /* stone-950, a hair of warmth */
--bg: #100e0c;        /* custom warm charcoal */

/* True ink — deeper, bluer, less "Tailwind" */
--bg: #06070a;        /* near-navy black */

/* Off-black with a green cast — distinctive, rare */
--bg: #0a0c0a;

Ein warmes Anthrazit #100e0c liest sich völlig anders als kaltes Zinc — Letterpress-Poster statt Vercel-Klon — und der Preis ist ein einziger Custom-Hexwert. Das Override ist eine einzige Zeile; wenn du auf shadcn bist, verlässt du dafür nicht einmal die globals.css:

:root {
  --background: 24 22% 6%;   /* warm charcoal, HSL — was zinc's 240 10% 4% */
}

Einmal setzen und nie wieder zinc-950 tippen.

2. Sorg dafür, dass der Fließtext *nicht* ein einziges flaches Grau ist

Ersetze das monotone text-zinc-400 durch eine kleine, bewusst gesetzte Skala. Variiere Helligkeit *und* Wärme je nach Rolle:

--text-strong:  #f5f3f0;  /* warm white, not #fafafa */
--text-body:    #b8b2a8;  /* warm gray for paragraphs */
--text-muted:   #6b665e;  /* captions, metadata */

Warme Grautöne auf warmem Schwarz erzeugen eine Stimmigkeit, die das kühle Zinc-auf-Zinc nie hinbekommt, und der Unterschied ist in der ersten halben Sekunde sichtbar. Inter und zinc sind derselbe faule Reflex — der eine bei der Schrift, der andere bei der Farbe — und derselbe Aufwand erledigt beide.

3. Töte den radialen Glow oder verdiene ihn dir

Wenn hinter deiner H1 ein Glow sitzt und der indigo-500/20 ist, lösch ihn. Wenn du Licht im Hero willst, mach es gerichtet und physisch — eine einzelne Quelle außerhalb der Achse, ein hart abgegrenzter konischer Splitter, ein körnig texturierter Verlauf — nicht der zentrierte „Premium-Blur"-Standard. Besser noch: Ersetze den Ambient-Glow durch ein echtes Objekt. Ein Wireframe-Render, einen Produkt-Screenshot mit 12° Neigung und echtem Schatten, eine tatsächliche Datenvisualisierung. Der Glow ist Dekoration als Platzhalter für Inhalt. Inhalt gewinnt.

4. Wähl einen Akzent, der nicht im Tailwind-Regal steht

Indigo #6366f1, Violett #8b5cf6 und Emerald #10b981 sind die drei Standardakzente, weil sie Tailwinds -500-Swatches sind. Tritt aus dem Regal heraus:

/* Off-default accents that still pop on dark */
--accent: #ff6b35;   /* burnt orange — warm, rare on dark */
--accent: #d4ff3f;   /* acid lime — aggressive, memorable */
--accent: #f5d0c5;   /* dusty peach — soft, editorial */
--accent: #5eead4;   /* teal, indigo's hue shifted ~15° off-swatch */

Schon ein leichtes Verschieben von Indigo #6366f1 zu einem Custom-Wert #5b6cff oder #7c5cff bricht die exakte Wiedererkennung. Ein gebranntes Orange #ff6b35 auf warmem Anthrazit ist eine Seite, die heute noch niemand viermal gesehen hat. Wenn du eine echte Methode zur Auswahl willst, habe ich einen ganzen Beitrag dazu geschrieben, wie man einen Akzent wählt, der nicht Tailwind-Blau ist.

5. Füg eine Sache hinzu, die der Generator nie produzieren würde

Das ist der Schritt, der Design von Output trennt. Ein Generator produziert den Durchschnitt. Also füg das Un-Durchschnittliche hinzu: ein Stück Asymmetrie, eine typografische Entscheidung, eine Textur. Setz die Headline in eine Serif (Fraunces, Instrument Serif) gegen das Dunkle — sofort editorial, sofort nicht-shadcn. Leg echtes Filmkorn über ein SVG-feTurbulence-Overlay bei 4 % Deckkraft. Brich das Grid: Lass den Hero-Text über den linken Rand hängen und das Visual über die rechte Kante laufen. Greif zu einem mix-blend-mode: difference-Akzent, für den das Modell keinen Grund hat, ihn zu produzieren. Eine echte Entscheidung wiegt mehr als zehn polierte Standards.

/* Grain overlay — texture the generators never add */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,...feTurbulence...");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Das größere Muster

Dark-Default ist dieselbe Krankheit wie der Blau-Violett-Verlauf, der Inter-Fließtext, die rounded-2xl-Card, die backdrop-blur-Nav — ein Generator findet ein lokales Optimum, und das ganze Web springt auf, bis das Optimum zum Klischee wird. Die Lösung lautet nie „hör auf, Dark Mode zu benutzen". Es ist dieselbe Lösung wie immer: triff mindestens eine Entscheidung, die das Modell nicht treffen würde.

Beinahe-Schwarz ist tatsächlich eine starke Leinwand. #09090b direkt aus der Tailwind-Config ist ein Geständnis, dass du die Maschine entscheiden lassen hast. Die fünfzehn Minuten, die es braucht, um deine Basis weg von Zinc zu verschieben, eine dreistufige Warm-Grau-Skala für Text aufzubauen, den Akzent vom Standard-Swatch wegzuziehen und eine echte Textur hinzuzufügen, sind die gesamte Kluft zwischen „sieht KI-generiert aus" und „sieht gestaltet aus". Diese Kluft ist das Einzige, das ein Besucher mit fünf offenen Tabs tatsächlich bemerkt — und 2026 hat jeder Besucher fünf offene Tabs.

Der Hero ist dunkel. Gut. Mach ihn nur zu *deinem* Dunkel.