Verwenden Sie diese Fähigkeit nur, nachdem ein Benutzer sie explizit ausgewählt oder eine bestätigte Projektkonfiguration dies festgelegt hat. Verwenden Sie bei unerklärten neuen UI-Anfragen stattdessen einen Stilauswähler, anstatt den Geschmack des Benutzers hier zu bestimmen. Vorhandene Marken-, Barrierefreiheits- und Benutzerüberschreibungen haben Vorrang vor allen folgenden Beispielen. Die folgende Stilanleitung ist keine Erlaubnis, mit der UI-Programmierung vor der Stilauswahl zu beginnen.
Stilpaket: Schweizer / Editorial
ID: swiss-editorial
Signatur: Strenge rastergesteuerte typografische Hierarchie, krasse Skalenkontraste, strukturelle Haarlinienregeln, nummerierte Indizes und bewusster negativer Raum.
Dies ist ein Stilpaket, kein verbindlicher Standard. Laden Sie es nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben. Barrierefreiheit, Benutzerfreundlichkeit und Markenbeschränkungen sind zu beachten. Schriftarten sind Vorschläge, keine erforderlichen Abhängigkeiten. Eine schlichte Seite mit schwarzer serifenloser Schrift qualifiziert sich nicht als Schweizer Editorial.
Gute Passung / Kompromisse
- Funktioniert gut für: Hochwertige Designagenturen, Architekturpublikationen, redaktionelle Portfolios, Kulturmagazine, Jahresberichte und Luxusprodukt-Narrative.
- Vorsicht bei: Schnelllebigen transaktionalen Betriebswerkzeugen, bei denen massive Anzeigetypografie die wiederholte Dateneingabe verlangsamt.
- Referenzrichtungen:
- Klassischer Zürcher Internationaler Stil: Knackiges Papierweiß (
#FFFFFFoder#F7F7F7), krasse tiefschwarze Typografie (#111111), 1px strukturelle Trennlinien, nummerierte Indizes (01,02) und ein einziger Akzent in Schweizer Rot (#E3000F). - Modernes Editorial Kleinblau: Ultra-saubere monochrome Leinwand mit Internationalem Kleinblau (
#002FA7) als hochpräzisem Fokusakzent bei Navigation und primären Aktionen.
- Klassischer Zürcher Internationaler Stil: Knackiges Papierweiß (
Schweizer Editorial-Treueprüfung — verpflichtend
Bevor eine Swiss-Editorial-Seite als vollständig bezeichnet werden kann, muss der anfänglich sichtbare Bereich eindeutig als strenge, rasterausgerichtete typografische redaktionelle Arbeit erkennbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist eine generische Minimalseite ohne dramatische Skalenkontraste und strukturelle Regeln ein FEHLER.
Eine erfolgreiche Swiss-Editorial-Implementierung zeigt alle der folgenden Merkmale:
- Extremer Typografischer Skalenkontrast: Ein entschlossener, kompromissloser Kontrast zwischen massiven Grotesk-Display-Überschriften (48px–72px Desktop / 32px–44px Mobil, enge Laufweite) und diszipliniertem Fließtext (16px, Zeilenhöhe 1,55), mit aufgespurteten Großbuchstaben-Abschnittsbezeichnungen (
letter-spacing: 0.08em). - Strukturelle Horizontale Haarlinienregeln: Inhaltsabschnitte, Spaltengrenzen und Metadaten-Header werden durch saubere 1px durchgezogene Linien (
border-top: 1px solid #111111) abgegrenzt, wodurch klare visuelle Regale entstehen. - Nummerierte Abschnittshierarchie: Deutliche redaktionelle Indexnummerierung (
01,02,03) oberhalb oder neben primären Artikelblöcken, die scannbare visuelle Anker schafft. - Strenge Mehrspalten-Rasterausrichtung: Das Layout folgt strikt einem 12-Spalten-Desktop-Raster mit großzügigen asymmetrischen Zwischenräumen und Rändern. Inhalt darf niemals ohne Rasterverankerung frei schweben.
- Monochrome Basis + 1 Akzent mit hoher Signalwirkung: Das Layout bleibt streng monochrom (Schwarz, Offweiß, Papiergrau) mit genau einem bewussten Signalakzent (Schweizer Rot
#E3000Foder Kleinblau#002FA7), der sparsam bei aktiven Links, Index-Tags oder primären CTAs eingesetzt wird.
Erster Ansichtstest: Identifizieren Sie in einem Desktop-Screenshot die massive Überschriftengröße, die 1px strukturellen Trennlinien, die nummerierten Abschnittsmarkierungen und das bewusste asymmetrische Raster, ohne den Seitentitel zu lesen. Wenn es wie eine Standard-Blogvorlage aussieht, erhöhen Sie die Typografieskala und die Rasterregeln.
Explizite Schweizer Editorial-Typografieausnahme — dramatische Skalierung ist erforderlich
Swiss-Editorial-spezifische Überschreibung: Die universelle Anti-Schludrigkeits-Warnung vor übermäßigen Schriftgrößen oder leerem Raum DARF NICHT als Verbot großer Display-Überschriften (48px–72px) oder großzügiger Leerräume hier interpretiert werden. In der Schweizer Typografie (Josef Müller-Brockmann, Max Bill) sind aktiver negativer Raum und kühner Skalenkontrast die primären strukturellen Materialien, die dekorative Grafiken oder Schatten ersetzen.
- Erlaubte typografische Behandlungen: Massive Anzeigeskalierung (bis zu 72px), nummerierte Index-Typografie, Haarlinien-Strukturgrenzen, aufgespurte Großbuchstaben-Metadaten und Links mit hohem Einzelakzent-Effekt.
- Anti-Schludrigkeits-Grenze: Fügen Sie keine zufälligen schwebenden Zitate ohne redaktionellen Kontext, gefälschte Ausgabenummern oder überdimensionierte Überschriften ein, die den eigentlichen lesbaren Inhalt verdrängen.
- Anti-Schludrigkeits-Interpretation: Bewerten Sie Schweizer Layouts nach Rasterdisziplin, typografischem Rhythmus und Informationsklarheit, nicht nach dem Versuch, jeden Quadratzentimeter mit Karten zu füllen. Weißraum, der die Aufmerksamkeit lenkt, ist authentisches Design.
Typografie und Schriftwahl
Objektive Grotesk-Serifenlose: Helvetica Neue, Neue Haas Grotesk, Arial, Inter oder System-Serifenlose. Überschriften: 48–72 px Desktop (Gewicht 700–800, letter-spacing: -0.03em); Unterüberschriften: 24–32 px; Fließtext: 16–18 px (Zeilenhöhe 1,55–1,65); Indexzahlen und Bildunterschriften: 12–14 px in Großbuchstaben (letter-spacing: 0.08em).
Farbrichtung
- Heller Modus (Knackiges Galerieweiß Papier):
- Leinwandbasis: Papierweiß (
#FFFFFFoder warmes Galerieweiß#FBFBFA). - Schriftfarbe / Typografie: Tiefes Obsidianschwarz (
#111111). - Trennlinien: Durchgehender Haarlinienstrich (
#111111oder#D1D5DB). - Sekundärgrau: Redaktionelles Neutral (
#6B7280).
- Leinwandbasis: Papierweiß (
- Dunkler Modus (Dramatischer Dunkler Monolith):
- Leinwandbasis: Pechschwarze Obsidianleinwand (
#0D0D0D). - Schriftfarbe / Typografie: Knochenweiße Anzeigetypografie (
#F5F5F5). - Trennlinien: Durchscheinende weiße Haarlinie (
rgba(255, 255, 255, 0.20)oder#2A2A2A). - Sekundärgrau: Steingrau (
#9CA3AF).
- Leinwandbasis: Pechschwarze Obsidianleinwand (
- Einzelner Signalakzent: Schweizer Rot (
#E3000Fhell /#EF4444dunkel) oder Internationales Kleinblau (#002FA7hell /#3B82F6dunkel). - Themeninversionsregel: Im Schweizer Editorial ist der Dunkel-/Hellmodus ein autoritativer typografischer Polaritätswechsel. Im Dunkelmodus ist die Leinwand
#0D0D0Dund die Typografie#F5F5F5. Primäre Schaltflächen invertieren sauber (Hellmodus: durchgehender schwarzer Block mit weißem Text; Dunkelmodus: durchgehender weißer Block mit schwarzem Text). Schwarzer Text auf dunkler Leinwand oder weißer Text auf weißer Leinwand ist strengstens verboten.
Layout und Geometrie
Ecken sind messerscharf (0px Randradius standardmäßig, maximal 2px); großzügige Außenränder; strenge 12-Spalten-Rasterausrichtung. Strukturelle 1px horizontale Linien rahmen Inhaltsblöcke ein.
Oberflächen, Tiefe, Textur
Oberflächen sind vollständig flach, unverziert und tintenscharf. Null Schlagschatten, kein Hintergrundverlauf, keine Unschärfe. Tiefe wird rein durch typografische Skalierung, Gewicht und räumliche Gegenüberstellung vermittelt.
Komponentenanatomie und Interaktion
- Redaktioneller Primär-CTA: Knackiger durchgehender schwarzer Block mit weißer Typografie oder sauberer unterstrichener Textlink mit 2px Strichversatz.
- Nummerierter Index-Tag: Kleiner Tag in Großbuchstaben:
[ 01 / ARCHITEKTUR ]. - Trennlinie:
border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;. - Tabellarische Metadaten: Zweispaltige Schlüssel-Wert-Paare, getrennt durch Haarlinientrenner.
Bewegung
Minimal, sofortig oder 120–160 ms saubere lineare Übergänge. Kein Spring-Bounce, kein schwebendes Parallaxe. Fokus auf klare Zustandsänderungen.
Optionales Anime.js v4 Rezept
- Bewegungsentscheidung: Sauberer Text-Deckkraft-Fade oder horizontale Linien-Expansion beim Scrollen.
- Startdauer: 140ms (0 = sofort); an Aufgabe und Benutzerpräferenz anpassen.
- Vermeiden: Elastische Bewegung, 3D-Rotationen, verspielte Wackler.
- Abhängigkeit: Standardmäßig CSS/nativ. Verwenden Sie Anime.js v4 nur, wenn die angeforderte Interaktion dies rechtfertigt. Befolgen Sie die Taste Engine
references/motion-engine.md, wenn verfügbar; eigenständige Fähigkeit folgt den oben genannten Prinzipien reduzierter Bewegung und keiner dekorativen Schleifen.
UI-Text und Microcopy
Kultiviert, prägnant und artikuliert. Beispiele: „Ausgewählte Werke 2026“, „Index“, „Dokumentation lesen“, „01 / Übersicht“. Vermeiden Sie umgangssprachliche Ausdrücke oder enthusiastischen Verkaufs-Hype.
Start-Tokens (Vorschläge, kein vollständiges Thema)
| Token | Hellmodus Standard | Dunkelmodus Standard |
|---|---|---|
--taste-swiss-bg | #ffffff | #0d0d0d |
--taste-swiss-ink | #111111 | #f5f5f5 |
--taste-swiss-accent | #e3000f | #ef4444 |
--taste-swiss-muted | #6b7280 | #9ca3af |
--taste-swiss-rule | 1px solid #111111 | 1px solid rgba(255, 255, 255, 0.20) |
--taste-swiss-radius | 0px | 0px |
--taste-swiss-font-heading | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-font-body | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-motion-duration | 120ms | 120ms |
Tokens repräsentieren eine Richtung und sind nicht kopierbar und für jede Palette/Plattform garantiert. Definieren Sie --taste-swiss-* auf Projektebene, stellen Sie Farbkontrast sicher, und passen Sie sich über Thementokens an, anstatt Literalwerte zu verstreuen.
Heldenkomposition (voller erster Ansichtsbereich)
Wenn ein öffentlichkeitswirksames Portfolio/Landing/Homepage einen Heldenbereich hat: Verwenden Sie eine ein Bildschirm sichtbare Kopf-Zusammensetzung aus Header+Heldenbereich. Basieren Sie die Höhe auf min-height: 100svh mit 100vh Fallback, subtrahieren Sie den echten Header nur, wenn er im normalen Fluss ist; lassen Sie den Heldenbereich für Barrierefreiheit und kurze mobile Bildschirme expandieren. Wenden Sie dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Verankern Sie den Eröffnungsbildschirm mit einem autoritativen, massiven Display-Titel, klarer Abschnittsnummerierung und einer asymmetrischen Rasteraufteilung zwischen Helden-Erzählung und Schlüsselnavigation. Weißraum muss sich bewusst und komponiert anfühlen, nicht leer. Siehe den Router references/hero-layout.md, falls vorhanden. Eigenständige Verwendung folgt denselben reaktionsfähigen und Anti-Schludrigkeits-Prinzipien.
Stilspezifische Qualitätsprüfung
- Tun: Überprüfen Sie die strenge 12-Spalten-Rasterausrichtung; halten Sie das dramatische Überschriften-zu-Text-Körperverhältnis ein; stellen Sie sicher, dass 1px-Haarlinienregeln Abschnitte sauber trennen; halten Sie die Akzentfarbe streng singular; überprüfen Sie das Umschalten zwischen Dunkel-/Hellmodus, sodass Typografie, Leinwand, Haarlinienregeln und primäre Aktionen sauber ohne Farbkollisionen wechseln (mindestens 4,5:1 Kontrast).
- Nicht tun: Fügen Sie keine Schlagschatten, runde Blasen oder dekorative Verläufe hinzu; überladen Sie Weißraum nicht mit bedeutungslosen Badge-Chips; vermeiden Sie kontrastarmen grauen Text auf kleinen Etiketten; lassen Sie keine schwarze Typografie auf dunkler Obsidian-Leinwand.
- Bestätigen Sie Desktop- und Mobilkonsistenz; sichtbaren Tastaturfokus (
:focus-visible); Lade-, leere, deaktivierte, Fehler- und Erfolgszustände; Verhalten bei reduzierter Bewegung (prefers-reduced-motion). - Injizieren Sie keine stilspezifischen Annahmen in nicht zusammenhängende Projekte. Wenn Sie Stile kombinieren, nennen Sie explizit den primären Stil und die entliehenen Merkmale.
Universelles Anti-Schludrigkeits-Tor (in sich geschlossen)
Jedes Element muss seinen Platz verdienen. Inhalt vor Dekoration. Dekorieren Sie keine Unsicherheit. Erfinden Sie keine Bilanzen, Kennzahlen, Testimonials, Benutzer, Logos, Genehmigungen, verifizierten/live/online-Status, gefälschte Aktivität oder Erfolgsbestätigungen; verwenden Sie stattdessen ehrliche leere/Lade-/Fehlerzustände. Demodaten sind nur akzeptabel, wenn sie angefordert und sichtbar gekennzeichnet sind.
Fügen Sie keine dekorativen Karte-in-Karte Schichten hinzu: Eine verschachtelte Oberfläche muss eine eindeutige Interaktions- oder Informationsgrenze darstellen. Vermeiden Sie automatisch generierte 3-Funktionen-Raster, 4-Statistik-Dashboards, gefälschte Heldenbehauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, nicht zusammenhängende dekorative Kunst und zufällige Schleifen, nur um den Ansichtsbereich zu füllen. Bevorzugen Sie Gruppierung mit Typografie, Abständen, Ausrichtung und Trennlinien. Gleiche Elemente benötigen eine absichtliche visuelle Balance.
Anti-Schludrigkeits-Textgestaltung: Keine generischen „Entfalten Sie Ihr Potenzial“, „Erleben Sie die Zukunft“, „Optimieren Sie Ihren Workflow“, „nahtlos“ Behauptungen oder übersetzte Äquivalente. Überschriften müssen den tatsächlichen Inhalt vermitteln, CTAs müssen die Aktion benennen, und leerer/Fehler-/Erfolgstext muss reale Zustände und nächste Schritte beschreiben. Vermeiden Sie falsche Dringlichkeit, erfundene Zählungen, vage KI-Hype, unnötige Emojis und unzugängliche Großbuchstaben-Blöcke. Passen Sie die Formulierung an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.
Themen- und Modus-Kontrastintegrität: Wenn ein Benutzer den Dunkelmodus oder Hellmodus anfordert (oder einen Themenwechsler erstellt), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren auf allen Oberflächen, Texten, Rändern, Eingaben und semantischen Badges wechseln. Lassen Sie niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare kontrastarme Status-Pillen stehen. Alle Zustände müssen den 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ähig und Bewegung: Gestalten Sie Mobil bewusst, überprüfen Sie lange Labels, Fokus-Zustände und zugänglichen Kontrast; kein Text-Clipping, um in ein trendiges Layout zu passen. Statisch standardmäßig; verwenden Sie Bewegung für sinnvolle Interaktionen, respektieren Sie Präferenzen für reduzierte Bewegung, vermeiden Sie Bounce/Schweben/Puls-Dekoration ohne einen echten Zustand.
Abschluss kritischer/hoher Befunde: Erfundener Status/Daten, defekte Aktionen, unzugängliche/beschnittene Steuerelemente, irreführende Texte, Themenkontrastkollisionen oder erheblicher Mobilfehler müssen behoben werden. Berichten Sie, was tatsächlich überprüft wurde; behaupten Sie keine Tests, die nicht durchgeführt wurden.
Kein Ästhetik-Veto: Ausdrucksstarke Farben, Schatten, Verläufe, Kartenlayouts oder dekorative Behandlungen sind legitim, wenn sie absichtliche Bestandteile der ausgewählten Ästhetik sind und die Benutzerfreundlichkeitsprüfungen bestehen. Erzwingen Sie nicht stillschweigend Minimalismus.
Anti-Schludrigkeit: Stilspezifisch
Typografische Autorität, nicht generischer Minimalismus.
- Ablehnen: Schwache Überschriften, dekorative Kartenumhüllungen um Text, mehrere konkurrierende Akzentfarben, kontrastarme kleine Bildunterschriften und Themenkollisionen (z. B. schwarze Typografie, die auf einer dunklen redaktionellen Leinwand verbleibt).
- Stattdessen: Verlassen Sie sich auf Skalenkontrast, präzise Spaltenausrichtung, singuläres Akzentsignal und synchronisierte Dunkel-/Hell-Polaritätsinversion.
- Textprüfung: Text muss sich wie eine redaktionelle Publikation lesen – artikuliert, strukturiert und absichtsvoll.
- Audit: Führen Sie die universelle Anti-Schludrigkeits-Prüfung zu Zweck, Wahrheit, verschachtelter Oberfläche, Textgestaltung, reaktionsfähigem Layout und Themenkonflikten durch. Melden Sie spezifische Verstöße und beheben Sie sie, bevor Sie die Arbeit als vollständig bezeichnen.
Stilauswahl klarstellen: Eine Seite mit schwarzer Schrift auf weißem Hintergrund und einem einzigen roten Link ist nicht automatisch Schweizer Editorial. Der Stil erfordert typografische Autorität, kontrolliertes Weißraumvolumen und Rasterdisziplin. Zufällige rote Links ohne strukturelle Hierarchie erreichen die Treueschwelle nicht.