Ein Corporate Design, das auch im Code funktioniert.
Design-Tokens, Typo-Skala und Komponenten für konsistente Markenauftritte.
Farbwerte, Schriftskala, Abstände, Zustände — festgeschrieben, dokumentiert und so übergeben, dass jeder Dienstleister damit arbeiten kann.
Das Problem hat jeder mit mehr als einem Kanal.
Die Website sieht anders aus als der Shop. Der Newsletter hat ein anderes Blau. Auf Instagram ist die Schrift eine andere, weil derjenige, der die Beiträge macht, das Original nicht hat. Und der Flyer von der Druckerei passt zu keinem davon.
Das liegt selten an Unfähigkeit. Es liegt daran, dass niemand aufgeschrieben hat, was gilt. Ein Logo-Handbuch reicht dafür nicht — es sagt, wie das Logo aussieht, aber nicht, welchen Grauton ein deaktivierter Knopf hat.
Was ein Brand-System festschreibt.
- Farbtokens — nicht „unser Blau“, sondern benannte Werte mit Anwendungsfall: Hintergrund, Fließtext, Akzent, Fehler, deaktiviert
- Typo-Skala — Größen, Zeilenhöhen und Gewichte als Stufen, nicht als Einzelentscheidungen
- Abstände — ein Raster, an das sich alles hält
- Komponenten — Knöpfe, Formularfelder, Karten, Hinweise
- Zustände — was passiert beim Überfahren, beim Fokus, bei einem Fehler, wenn etwas deaktiviert ist
- Corporate CI — die Klammer für Web und Print
Zustände sind der Teil, den alle vergessen.
Ein Knopf hat nicht ein Aussehen, sondern fünf: normal, überfahren, angeklickt, per Tastatur fokussiert, deaktiviert. Ein Formularfeld genauso, plus den Fehlerzustand.
In den meisten Corporate Designs steht davon nichts. Dann entscheidet der Entwickler, und beim nächsten Projekt entscheidet ein anderer anders.
Wir legen diese Zustände fest und liefern sie mit. Auf Wunsch zeichnen wir sie auch — als fertige Elemente, nicht als Beschreibung.
Wie es übergeben wird.
Als Dokument, in dem alles nachlesbar ist. Und als Wertedatei, die sich direkt im Code verwenden lässt.
Der Punkt ist die Übergabefähigkeit: Wer in zwei Jahren die nächste Landingpage baut, soll nicht raten müssen. Egal ob das wir sind oder jemand anderes.
Ein Beispiel, das Sie gerade ansehen.
Diese Website läuft auf genau so einem System. Jede Farbe, jede Schriftgröße, jeder Abstand kommt aus einer einzigen Datei mit benannten Werten.
Das ist der Grund, warum über hundert Seiten gleich aussehen, ohne dass jemand sie einzeln gestaltet hat — und warum eine Farbänderung ein Wert ist, nicht eine Suche durch hundert Dateien.