Das META Design System, vollständig.

Konsistenz schafft Vertrauen. Besucher können nicht benennen, warum eine Website seriös wirkt — sie spüren es in drei Sekunden. Wenn jede Seite dasselbe Orange, dieselbe Titelstärke, denselben Buttonradius nutzt, hört das Gehirn auf zu arbeiten und konzentriert sich auf den Inhalt. Eine Seite, die in jedem Abschnitt die Regeln wechselt, sendet dagegen ein klares Signal: Hier achtet niemand auf Details. Wenn schon die Website nachlässig ist, warum sollte es die Leistung nicht sein?

Ein Token ist eine einmal getroffene Entscheidung. Ohne System wird die Wahl eines Textgraus auf jeder Seite, in jeder Komponente, bei jedem neuen Mitarbeiter wiederholt. Am Ende existieren vierzig fast identische Grautöne und niemand entscheidet. Mit System gibt es muted-fg, es hat einen Wert, und die Frage stellt sich nicht mehr. Ändert sich die Marke, ändern Sie eine Zeile in styles.css und die gesamte Website folgt — hell, dunkel, in allen Sprachen.

Die Entwicklung wird schneller, die Wartung billiger. Eine neue Seite zu bauen wird zum Zusammensetzen: Container .sec, ein Kicker, ein h-section-Titel, ein in line gerahmtes Raster, ein Primary-Button. Es gibt nichts zu erfinden, also nichts im Review zu korrigieren. Über die Lebensdauer einer Website übersteigt die Wartung die Erstellungskosten deutlich — genau dort zahlt sich das System zurück.

Barrierefreiheit ist eingebaut, nicht nachgerüstet. Kontraste sind an der Quelle geprüft: Haupttext erreicht auf Weiss ein sehr hohes Verhältnis, muted-fg bleibt für Fliesstext über der AA-Schwelle. Fokuszustände sind überall sichtbar und identisch, der orange 2px-Ring hängt nie von der Komponente ab. Und prefers-reduced-motion gilt global, nicht pro Komponente. Wer per Tastatur navigiert oder empfindlich auf Bewegung reagiert, ist kein Sonderfall für später.

Performance folgt derselben Logik. Die Schriften sind als woff2 selbst gehostet, nach Unicode-Bereichen zerlegt und mit font-display: swap ausgeliefert — keine Anfrage an Dritte, kein unsichtbarer Text beim Laden. Zwei Familien statt acht. Keine Komponentenbibliothek für drei Buttons. Das Ergebnis ist messbar: Seiten erscheinen in unter einer Sekunde, und diese Geschwindigkeit ist selbst ein Conversion-Argument.

Der Dark Mode entsteht aus der Struktur. Weil keine Komponente eine feste Farbe kennt, heisst dunkel schalten: acht Variablen neu definieren. Kein zweites Layout, keine verstreuten Korrekturen, kein Rückfall einen Monat später. Genau so eine Funktion kostet ein Vermögen, wenn sie improvisiert wird — und fast nichts, wenn das Fundament sauber ist.

Bleibt die Disziplin der Beschränkung, der schwierigste Teil. Es ist verführerisch, einen Verlauf hinzuzufügen, einen Schatten, eine zweite Akzentfarbe. Jede Ergänzung wirkt harmlos, und jede nimmt dem Ganzen Kraft. Fünf Prozent Orange auf einer Seite treffen; Orange überall sagt nichts mehr. Ein nützliches System ist eines, das Nein sagt — darin liegt sein Wert.

Diesen Standard wenden wir bei Kundenprojekten genauso an wie bei unserer eigenen Website. Das Ergebnis ist keine hübschere Seite an sich: Es ist eine Seite, die schneller weiterentwickelt, günstiger gewartet, barrierefreier und glaubwürdiger ist. Über drei Jahre gerechnet ist der Unterschied buchhalterisch sichtbar.