Corporate Design rein, Website raus: Wie aus einem CD ein Web-Design-System wird

Die kurze Antwort: Aus dem Corporate Design Ihres Kunden machen wir ein Regelwerk für den Bildschirm. Farben werden zu benannten Werten, Schriften zu einer Größenskala, Abstände zu einem Raster, wiederkehrende Elemente zu Bausteinen. Jede Seite der Website greift auf dieselben Regeln zu. Ändert sich später ein Wert, ändert er sich überall.

So ist es uns am liebsten: Sie bringen das Corporate Design und die Inhalte Ihres Kunden, wir gestalten, bauen und liefern. Ein CD-Handbuch ist dafür ein guter Anfang, aber kein fertiges Web-Design. Es ist meist für Briefpapier, Anzeigen und Messestand geschrieben: feste Formate, CMYK-Werte, eine Schrift in drei Größen. Eine Website hat kein festes Format. Sie läuft auf dem Telefon und auf dem 27-Zoll-Monitor, im hellen und im dunklen Modus, mit vergrößerter Schrift und mit Tastatur statt Maus. Diese Lücken füllen wir, ohne das CD zu verbiegen.

Ein Token ist ein benannter Wert: nicht „#2B4BFF“, sondern „Akzent“, nicht „#EDEDEB“, sondern „Grund“. Das klingt nach Formalie, entscheidet aber über die Pflege. Wer einen Wert direkt in hundert Bausteine schreibt, muss bei einer Änderung hundert Stellen finden. Wer ein Token verwendet, ändert eine Zeile. Für Dark Mode bekommt jedes Farb-Token einen zweiten Wert, die Bausteine bleiben gleich.

Für den Austausch solcher Werte gibt es inzwischen einen gemeinsamen Standard: Die Design Tokens Community Group beim W3C hat am 28. Oktober 2025 die erste stabile Fassung ihrer Spezifikation veröffentlicht, mit Unterstützung für Themes wie hell und dunkel und für moderne Farbräume ^[3]. Laut der Gruppe unterstützen über zehn Werkzeuge und Projekte den Standard oder arbeiten daran, darunter Figma, Penpot und Sketch ^[3]. Für Sie heißt das: Die Werte aus dem Design können ohne Abtippen in den Code wandern.

Wichtiger als das Format ist die Rolle. Die Markenfarbe eignet sich oft hervorragend für Flächen und große Überschriften, aber nicht für Fließtext oder Links auf hellem Grund. Das W3C stellt klar, dass Text, dem wegen Corporate Identity oder Markenrichtlinien der Kontrast fehlt, nicht ausgenommen ist; frei sind nur Logos und Wortmarken ^[1]. Wir legen deshalb pro Farbe fest, wofür sie verwendet werden darf, und ergänzen bei Bedarf eine dunklere Variante für Text. Wie Sie Paare selbst messen, zeigt der Artikel Kontrast, Farben, Schrift.

Eine Website besteht nicht aus zwölf individuell gestalteten Seiten, sondern in der Regel aus zwanzig bis dreißig Bausteinen, die sich immer neu kombinieren. Das spart beim Bau Zeit und macht die Website pflegbar: Ihr Kunde legt später eine neue Seite an und wählt aus fertigen Abschnitten, statt etwas zu bauen, das nicht mehr zum Rest passt.

Dabei gestalten wir von Anfang an mit, was ein Print-CD nie braucht. Das W3C nennt als Grundlagen unter anderem ausreichenden Kontrast, Information nicht allein über Farbe, klar erkennbare Bedienelemente, Formularfelder mit klar zugeordneter Beschriftung und Entwürfe für verschiedene Bildschirmgrößen ^[5]. Jedes dieser Themen ist billig, wenn es im System steckt, und teuer, wenn es nach dem Livegang nachgerüstet wird. Barrierefreiheit kommt so nicht als Extra obendrauf, sondern ist eine Eigenschaft der Bausteine.

Auf Wunsch bekommen Sie am Ende eine kurze Übersicht des Systems: Farben mit Rollen, erlaubte Farbpaare, Schriftgrößen, Abstände, Bausteine. Für Ihre Agentur ist das die Grundlage für Social-Media-Vorlagen oder Präsentationen im selben Look. Für Ihren Kunden ist es die Antwort auf die Frage, warum der Button nicht in Hellgrün sein kann.