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

Schrift darauf: ink
Manner Rosa — #F69686 CMYK 0/50/40/0 · sRGB 246 150 134
Pantone: Orange 021 7.20 + Bright Red 7.20 + Trans. White 85.60
CD §1.1 · im Projekt accent-500
Schrift darauf: weiss
Manner Blau — #164194 CMYK 100/80/0/0 · sRGB 22 65 148
Pantone Reflex Blue C / U
CD §1.1 · im Projekt brand-500
Eine Abweichung, die auffallen wird. Die mitgelieferte Logodatei trug #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

Die Rollenverteilung ist nicht gewaehlt, sondern gemessen. Nach WCAG 2.1 braucht Fliesstext 4.5:1, Grossschrift und Rahmen 3:1.

KombinationKontrastFliesstextFolge
Weiss auf Manner Rosa2.18:1faellt durch Rosa kann keine weisse Schrift tragen — auch nicht in gross
Manner Blau auf Manner Rosa4.34:1knapp daneben reicht fuer das Logo, nicht fuer Text
ink #231F20 auf Manner Rosa7.47:1AAA so wird Rosa benutzt: Flaeche unter Dunklem
Weiss auf Manner Blau9.47:1AAA Knopf, Panel
Manner Blau auf Weiss9.47:1AAA Link, Fokusring, aktiver Menuepunkt

3 · Die Abstufungen

Blau — alles, was man anfassen kann.

50
100
200
500 · CD
600
700

Rosa — alles, was die Marke traegt.

50
100
200
500 · CD
600
700

Flaechen und Schrift. Das Schwarz ist #231F20 aus dem Manual, nicht reines Schwarz.

surface
border-subtle
border
border-strong
ink-muted
ink-body
ink

4 · Bauteile

Knoepfe

Der sekundaere Knopf hat jetzt border-strong — vorher war seine Umrandung mit 1.3:1 kaum zu sehen.

Eingabefelder

Die Pruefziffer stimmt nicht.

Rahmen 3.56:1 statt 1.30:1 — WCAG 1.4.11 fuer Bedienelemente.

Status

Aktiv Langzeitabwesenheit Geplant Ausgetreten

„Geplant" ist der Fall ohne besondere Faerbung und bekommt deshalb die Markenfarbe. Blau saehe hier nach Schaltflaeche aus.

Vorgaenge im Protokoll

Neueinstellung Austritt Versetzung Befoerderung Vertragsaenderung Import

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

NamePers.-Nr.BereichEintrittStatus
Aigner, Katharina1042Produktion01.03.2019 Aktiv
Berger, Anna1187Vertrieb15.09.2021 Abwesend
Winkler, Michaela1590Technik01.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

Person Rolle Einheit offene Stelle

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 und sein Freiraum

CD §4.1 verlangt „genuegend Freiraum rundum (X, X/3)". X ist hier als Hoehe des Logos gelesen, der Freiraum also als ein Drittel davon — die gestrichelte Linie zeigt ihn. Er steckt im Bauteil selbst, nicht in den Aufrufstellen.

Manner
auf Weiss
Manner
auf dem Panel der Anmeldeseite

§1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die Datei bringt ihr rosa Feld mit, das Logo ist damit auf jedem Untergrund regelkonform.

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.