Andrei Laas
f7a5c48615
Farben, Schrift, Logo und Symbole folgen jetzt dem CD Manual 2022. An der Logik aendert sich nichts: keine Migration, keine Abfrage, keine Berechtigung. Die zwei Markenfarben stehen in §1.1 als #F69686 (Rosa) und #164194 (Blau). Welche davon was traegt, ist nicht gewaehlt, sondern nachgerechnet: Weiss auf Rosa kommt auf 2.18:1 und faellt damit auch fuer Grossschrift durch, Blau auf Rosa auf 4.34:1 und reicht fuer das Logo, nicht fuer Text. Schwarz auf Rosa sind 7.47:1, Weiss auf Blau 9.47:1. Rosa ist deshalb Flaeche, Blau ist Interaktion — zwei Skalen, brand-* und accent-*, statt einer geteilten. Von den 26 Stellen mit brand-50/100/200 sind nur sieben auf accent gewandert. Der Rest meint einen Zustand und keinen Markenton: die Zeile unter dem Zeiger, der gewaehlte Listeneintrag, der aktive Menuepunkt. Gegen die warme Seitenflaeche ist ein kuehler Ton dort deutlicher, und Blau heisst in dieser Oberflaeche ab jetzt "reagiert auf dich". Nach accent gingen die Faelle ohne eigene Bedeutung — "Geplant", "Offen", der neutrale Protokoll-Chip — und die offene Planstelle im Organigramm, die vorher ein blasses Blau war und damit wie eine schwaechere Person aussah. Die Funktionsfarben bleiben, was sie sind. Das Manual regelt die Identitaet, nicht die Rueckmeldung: Rot heisst Fehler, weil die Benutzerin das mitbringt. `info` bleibt bewusst tuerkis — Blau saehe ab jetzt bedienbar aus, und gemessen kaeme ein blaues info dem violetten Chip auf dE 6.8 nahe, also nicht unterscheidbar. Violett ist dabei nachgezogen: gegen den Fehler-Chip stand es bei dE 8.0, "Austritt" und "Befoerderung" waren im Vorbeigehen dieselbe blasse Flaeche. Jetzt dE 15.0. Die Schrift ist Barlow. Nachgezaehlt ist das Manual zu 95 % in DIN gesetzt (Regular 79 %, Bold 16 %); Helvetica Neue steht nur in den Visitenkarten und im Claim. DIN laesst sich nicht ausliefern — eine Drucklizenz deckt keinen Webfont —, und die freien Nachbauten der DIN 1451 sind Schilderschriften, bei 14 px in einer langen Tabelle schlechter lesbar als das, was sie ersetzen. Die Variable heisst --font-din und nicht --font-barlow: liegt eines Tages eine Web-Lizenz vor, ist der Wechsel diese eine Deklaration. Nebenbei zwei Dinge repariert, die vorher schon falsch waren. Die Umrandung von Eingabefeldern, Knoepfen und Suchfeldern lag bei 1.30:1 und damit unter den 3:1, die WCAG 1.4.11 fuer Bedienelemente verlangt; border-strong bringt 3.56:1. Und das mitgelieferte favicon.ico liess sich gar nicht bauen: eingebettet waren 24-Bit-RGB-PNG, waehrend der Kopf 32 bpp behauptete. Alle Rastersymbole liegen jetzt als RGBA vor, und ihr Blau ist auf den CD-Wert gezogen — samt der kantengeglaetteten Raender, indem je Pixel der Blauanteil bestimmt und neu gemischt wurde. Das Logo ist das Markenlogo (§4.1), nicht das Unternehmenslogo, das §3.2 fuer eine Anwendung mit der AG als Absender vorsaehe — es liegt nicht vor. Der Freiraum X/3 steckt im Bauteil selbst und nicht in den Aufrufstellen, sonst haengt seine Einhaltung daran, dass jede einzelne daran denkt. docs/farbschema.html zeigt Token, Kontraste und Bauteile nebeneinander und laesst sich ohne Server oeffnen. Nicht im Browser gesehen: Anmeldung laeuft ueber das Firmenkonto und die Datenbank ist von hier nicht erreichbar. Lint, Typen, Schemaabgleich, 524 Tests und der Build sind sauber. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
// Das Manner-Logo und die Wortmarke der Anwendung — an einer Stelle, weil
|
|
// Kopfleiste und Anmeldeseite dasselbe zeigen sollen.
|
|
//
|
|
// ═══ Welches Logo ═══
|
|
//
|
|
// Verwendet wird das **Markenlogo** (CD §4.1): der Schriftzug allein, ohne
|
|
// den Stephansdom-Medaillon. Das Unternehmenslogo (§3.1) waere nach §3.2 das
|
|
// formal richtige, wo „Josef Manner & Comp. AG" als Absender auftritt — es
|
|
// steht hier aber nicht zur Verfuegung, und das Markenlogo ist die Fassung,
|
|
// die vorliegt.
|
|
//
|
|
// ═══ Freiraum ═══
|
|
//
|
|
// §4.1 verlangt „genuegend Freiraum rundum (X, X/3)". X ist der Modul des
|
|
// Logos; gelesen wird er hier als seine Hoehe, der Freiraum also als ein
|
|
// Drittel davon. Er steckt als Polsterung in diesem Bauteil und nicht in den
|
|
// Aufrufstellen — sonst haengt die Einhaltung daran, dass jede einzelne
|
|
// daran denkt.
|
|
//
|
|
// ═══ Rosa ═══
|
|
//
|
|
// §1.2: der Schriftzug darf ausschliesslich zur Gaenze auf Rosa stehen. Die
|
|
// Datei bringt ihr rosa Feld selbst mit, das Logo ist also auf jedem
|
|
// Untergrund regelkonform — auch auf dem blauen Panel der Anmeldeseite.
|
|
//
|
|
// Als <img> und nicht inline: die Datei wiegt 73 kB, weil die Kontur des
|
|
// Schriftzugs aus 77 Pfaden besteht. Inline laege sie in jeder einzelnen
|
|
// Seitenauslieferung; als Datei holt der Browser sie einmal und nimmt sie
|
|
// danach aus dem Zwischenspeicher.
|
|
|
|
/** Seitenverhaeltnis der Datei: viewBox 288.6781 x 116.18912. */
|
|
const VERHAELTNIS = 288.6781 / 116.18912;
|
|
|
|
export function MannerLogo({ hoehe = 28, className = "" }: { hoehe?: number; className?: string }) {
|
|
const breite = Math.round(hoehe * VERHAELTNIS);
|
|
return (
|
|
// next/image bringt Groessenvarianten und Ladelogik fuer Fotos mit; fuer
|
|
// eine Vektordatei fester Groesse ist beides Ballast, und die
|
|
// Bildoptimierung laesst SVG ohnehin unveraendert durch.
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src="/brand/manner-logo.svg"
|
|
alt="Manner"
|
|
width={breite}
|
|
height={hoehe}
|
|
// Der Freiraum nach §4.1, als Polsterung. `box-content`, damit die
|
|
// Breite oben die des Logos bleibt und nicht die des Feldes.
|
|
style={{ padding: Math.round(hoehe / 3), width: breite, height: hoehe }}
|
|
className={`box-content shrink-0 ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Logo plus Produktname.
|
|
*
|
|
* Die beiden gehoeren zusammen und meinen Verschiedenes: das Logo sagt, wem
|
|
* das System gehoert, der Name sagt, was es ist.
|
|
*/
|
|
export function AppWortmarke({
|
|
hoehe = 26,
|
|
textKlasse = "text-ink",
|
|
className = "",
|
|
}: {
|
|
hoehe?: number;
|
|
textKlasse?: string;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<span className={`flex items-center ${className}`}>
|
|
<MannerLogo hoehe={hoehe} />
|
|
<span className={`text-base font-extrabold tracking-tight ${textKlasse}`}>Alpenwerk HR</span>
|
|
</span>
|
|
);
|
|
}
|