Farbschema nach dem Manner CD Manual 2022
Erster Entwurf. Diese Seite zeigt die Token und die Bauteile, die daraus
entstehen — nebeneinander, damit sich vor dem Blick in die Anwendung beurteilen laesst,
ob die Richtung stimmt. Alle Werte hier sind dieselben wie in
app/globals.css.
1 · Die zwei Markenfarben
Pantone: Orange 021 7.20 + Bright Red 7.20 + Trans. White 85.60
CD §1.1 · im Projekt
accent-500Pantone Reflex Blue C / U
CD §1.1 · im Projekt
brand-500#034ea2 als Blau — den Wert, mit dem das PDF gerendert wurde, nicht den,
den §1.1 im Text als verbindlich nennt. Beide liegen sichtbar auseinander (dE 6.3).
Das Logo ist deshalb auf #164194 gezogen worden, damit es neben den
blauen Bedienelementen nicht wie ein Fehler aussieht. Beim Rosa war die Differenz
bedeutungslos (dE 0.9).
2 · Warum Blau bedient und Rosa traegt
Rosa ist die fuehrende Farbe. Es traegt die grossen Flaechen — das Panel der Anmeldeseite, das Band ueber der Anwendung aus Kopfzeile und Logokopf. Blau ist die Farbe der kleinen, bedienbaren Dinge: Knopf, Link, Fokusring, ausgewaehlter Eintrag. Dasselbe Verhaeltnis steckt im Schriftzug selbst — blaue Lettern auf rosa Feld.
Welche Farbe welche Rolle bekommt, ist dabei nicht gewaehlt, sondern gemessen. Nach WCAG 2.1 braucht Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.
| Kombination | Kontrast | Fliesstext | Folge |
|---|---|---|---|
| Weiss auf Manner Rosa | 2.18:1 | faellt durch | Rosa kann keine weisse Schrift tragen — auch nicht in gross |
| Manner Blau auf Manner Rosa | 4.34:1 | knapp daneben | reicht fuer das Logo, nicht fuer Text |
| ink #231F20 auf Manner Rosa | 7.47:1 | AAA | so wird Rosa benutzt: Flaeche unter Dunklem |
| brand-700 auf Manner Rosa | 6.60:1 | AA | so steht Text im rosa Band — dieselbe Paarung wie im Schriftzug |
| ink-muted auf Manner Rosa | 2.33:1 | faellt durch | deshalb steht im rosa Band nichts Gedaempftes mehr |
| Weiss auf Manner Blau | 9.47:1 | AAA | Knopf, Panel |
| Manner Blau auf Weiss | 9.47:1 | AAA | Link, Fokusring, aktiver Menuepunkt |
3 · Die Abstufungen
Blau — alles, was man anfassen kann.
Rosa — alles, was die Marke traegt.
Flaechen und Schrift. Das Schwarz ist #231F20
aus dem Manual, nicht reines Schwarz.
4 · Bauteile
Knoepfe
Der sekundaere Knopf hat jetzt border-strong — vorher war seine
Umrandung mit 1.3:1 kaum zu sehen.
Eingabefelder
Rahmen 3.56:1 statt 1.30:1 — WCAG 1.4.11 fuer Bedienelemente.
Status
„Geplant" ist der Fall ohne besondere Faerbung und bekommt deshalb die Markenfarbe. Blau saehe hier nach Schaltflaeche aus.
Vorgaenge im Protokoll
Rot bleibt Rot, Gruen bleibt Gruen: das Manual regelt die Identitaet, nicht die Rueckmeldung. Violett ist nachgezogen — gegen den Fehler-Chip lag es bei dE 8.0 und war im Vorbeigehen dieselbe Flaeche, jetzt bei dE 15.0.
Liste
| Name | Pers.-Nr. | Bereich | Eintritt | Status |
|---|---|---|---|---|
| Aigner, Katharina | 1042 | Produktion | 01.03.2019 | Aktiv |
| Berger, Anna | 1187 | Vertrieb | 15.09.2021 | Abwesend |
| Winkler, Michaela | 1590 | Technik | 01.10.2026 | Geplant |
Die Zeile unter dem Zeiger wird blau angedeutet, nicht rosa: gegen die warme Seitenflaeche ist ein kuehler Ton deutlicher, und Blau heisst in dieser Oberflaeche „reagiert auf dich".
Navigation
Organigramm — die vier Knotenarten
Die offene Stelle war vorher ein blasses Blau und damit eine schwaechere Person. In Rosa ist sie etwas anderes — auch dann noch, wenn herausgezoomt nur die Streifen uebrig sind.
5 · Das Logo, sein Freiraum und die zwei Fassungen
§1.2 laesst den Schriftzug nur zur Gaenze auf Rosa zu. Das Manual kennt dafuer zwei Faelle, und sie brauchen verschiedene Dateien — deshalb liegen zwei im Projekt.
manner-logo.svg — auf Weiss, mit eigenem rosa Feld (§4.1)
manner-logo-auf-rosa.svg — im rosa Umfeld, ohne Feld (§3.1)Der Freiraum X/3 (gestrichelt) steckt im Bauteil selbst und nicht in den Aufrufstellen — sonst haengt seine Einhaltung daran, dass jede einzelne daran denkt. Die Fassung mit Feld auf eine rosa Flaeche zu setzen ging schief: das Feld stand als Rechteck in leicht anderem Ton darauf. Der Ton war derselbe — verschoben hat ihn die Lichtblende ueber der Flaeche, die unter dem Logo endete.
6 · Was hier noch nicht entschieden ist
Das Logo ist das Markenlogo, nicht das Unternehmenslogo. Nach §3.2 waere fuer eine Anwendung, hinter der „Josef Manner & Comp. AG" als Absender steht, das Unternehmenslogo mit dem Stephansdom-Medaillon das richtige. Es liegt nicht vor. Die offiziellen Dateien gaebe es bei der Kreativdirektion — der Kontakt steht auf Seite 7 des Manuals.
Die Vorlage ist aus dem PDF gezogen, nicht das Original. Fuer die Testphase traegt das; fuer die Uebergabe gehoert die offizielle Datei hinein.
Die Schrift ist Barlow, nicht DIN. Nachgezaehlt ist das Manual zu 95 % in
DIN gesetzt (DIN-Regular 79 %, DIN-Bold 16 %); Helvetica Neue steht nur in den
Visitenkarten-Mustern und im Claim. DIN ist aber lizenzpflichtig, und eine
Drucklizenz deckt die Auslieferung als Webfont nicht ab. Die freien Nachbauten der
DIN 1451 sind Schilderschriften und bei 14 px in einer langen Tabelle schlechter
lesbar als das, was sie ersetzen. Barlow ist dieselbe Grotesk-Familie mit schmalen
Proportionen und geraden Abschluessen. Liegt eine Web-Lizenz fuer DIN vor, ist der
Wechsel eine Zeile in app/layout.tsx.
Die Symbole sind nachgerechnet, nicht neu exportiert.
Favicon, Apple-Symbol und die Manifest-Symbole kamen als 24-Bit-RGB und trugen
#034DA1 als Blau. Sie liegen jetzt als RGBA vor — das verlangt der
Bildpfad des Bauwerkzeugs — und ihr Blau ist auf #164194 gezogen,
inklusive der kantengeglaetteten Raender: je Pixel wurde bestimmt, wieviel Blau
darin steckt, und derselbe Anteil neu gemischt. Betroffen waren 5 bis 10 Prozent
der Pixel je Datei. Ein Neuexport aus der korrigierten Vorlage bliebe trotzdem der
sauberere Weg, sobald die offiziellen Dateien da sind.