Das Logo ohne Feld auf Rosa, und kein Schwarz mehr auf der Marke
Zwei Dinge, die beim Ansehen aufgefallen sind.
**Das Rechteck auf dem Panel.** Das Logo bringt sein rosa Feld selbst mit, und
auf der rosa Flaeche stand es als Rechteck in leicht anderem Ton darauf. Der
Ton war dabei derselbe — verschoben hat ihn die Lichtblende, die ueber der
Panelflaeche liegt und unter dem Logo endete.
Das Manual kennt fuer den Schriftzug zwei Faelle, und sie brauchen
verschiedene Dateien: auf Weiss gehoert er nach §4.1 in ein rechteckiges rosa
Feld, in einem grossflaechigen rosa Umfeld dagegen wird er nach §3.1 nur mit
Freiraum integriert — die Flaeche ist ja schon da. Es gibt deshalb jetzt
manner-logo-auf-rosa.svg ohne eigenes Feld, und die rosa Flaechen benutzen es.
Damit bleibt nichts mehr uebrig, wo die Blende enden koennte.
Die Blende selbst ist weg. Sie war Weiss auf Rosa und hellte die Markenfarbe
so weit auf, dass sie kaum noch die Markenfarbe war; geblieben ist ein feines
Raster und eine leichte Tiefe zur unteren Ecke, beides aus ink.
**Schwarz auf der Marke.** "Uebersicht", "Berichte" und der Rest der Kopfzeile
standen in ink. Das traegt zwar (7.47:1), sieht aber aus wie Text, der aus
Versehen auf der Marke gelandet ist. Alles Geschriebene auf Rosa steht jetzt
in brand-700: 6.60:1, und es ist dieselbe Paarung, aus der der Schriftzug
selbst besteht — blaue Lettern auf rosa Feld.
Dabei noch eine Schwaeche gefunden: das Abzeichen an der Glocke kam als
danger-solid auf dem rosa Band nur auf 2.78:1 und blieb unter den 3:1, die
WCAG 1.4.11 fuer ein bedeutungstragendes Element verlangt. Mit danger-text
sind es 3.26:1, und die Ziffer darin steht mit 7.12:1 besser als vorher.
**Und ausgemistet.** Die Logodatei wog 74 kB, weil die Vorlage aus Seite 3 des
Manuals gezogen wurde und die ganze Seite mitgenommen hat: 219 Elemente, die
den Fliesstext jener Seite zeichnen ("Der Manner Schriftzug ... darf nicht
veraendert werden"), unsichtbar rosa auf Rosa oder ausserhalb des Beschnitts.
Das eigentliche Logo sind vier Pfade. Beide Fassungen wiegen jetzt 18,7 kB.
Lint, Typen, Schemaabgleich, 552 Tests und der Build sind sauber. Im Browser
nicht gesehen.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -101,7 +101,7 @@
|
||||
|
||||
.freiraum { display: inline-block; outline: 1px dashed var(--accent-600); outline-offset: 0; }
|
||||
.logo-demo { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
|
||||
.on-blue { background: var(--brand-700); padding: 22px; border-radius: 8px; }
|
||||
.on-rosa { background: var(--accent-500); padding: 22px; border-radius: 8px; }
|
||||
.on-white { background: #fff; padding: 22px; border-radius: 8px; border: 1px solid var(--border); }
|
||||
</style>
|
||||
</head>
|
||||
@@ -162,7 +162,7 @@
|
||||
<tr><td>ink #231F20 auf Manner Rosa</td><td class="num">7.47:1</td><td class="ok">AAA</td>
|
||||
<td>so wird Rosa benutzt: Flaeche unter Dunklem</td></tr>
|
||||
<tr><td>brand-700 auf Manner Rosa</td><td class="num">6.60:1</td><td class="ok">AA</td>
|
||||
<td>Ueberschrift und Wortmarke im rosa Band</td></tr>
|
||||
<td><b>so steht Text im rosa Band</b> — dieselbe Paarung wie im Schriftzug</td></tr>
|
||||
<tr><td>ink-muted auf Manner Rosa</td><td class="num">2.33:1</td><td class="bad">faellt durch</td>
|
||||
<td>deshalb steht im rosa Band nichts Gedaempftes mehr</td></tr>
|
||||
<tr><td>Weiss auf Manner Blau</td><td class="num">9.47:1</td><td class="ok">AAA</td>
|
||||
@@ -291,7 +291,7 @@
|
||||
<h3>Navigation</h3>
|
||||
<div class="nav">
|
||||
<div class="hd">
|
||||
<img src="../public/brand/manner-logo.svg" alt="Manner" width="60" height="24"
|
||||
<img src="../public/brand/manner-logo-auf-rosa.svg" alt="Manner" width="60" height="24"
|
||||
style="padding:8px;box-sizing:content-box">
|
||||
<span style="font-weight:800;font-size:15px;color:var(--brand-700)">Alpenwerk HR</span>
|
||||
</div>
|
||||
@@ -317,29 +317,40 @@
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════ -->
|
||||
<h2>5 · Das Logo und sein Freiraum</h2>
|
||||
<p>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.</p>
|
||||
<h2>5 · Das Logo, sein Freiraum und die zwei Fassungen</h2>
|
||||
<p>§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.</p>
|
||||
<div class="logo-demo">
|
||||
<div class="on-white">
|
||||
<span class="freiraum">
|
||||
<img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
|
||||
style="padding:20px;box-sizing:content-box;display:block">
|
||||
</span>
|
||||
<div style="font-size:11px;color:var(--ink-muted);margin-top:8px">auf Weiss</div>
|
||||
<div style="font-size:11px;color:var(--ink-muted);margin-top:8px">
|
||||
<code>manner-logo.svg</code> — auf Weiss, mit eigenem rosa Feld (§4.1)</div>
|
||||
</div>
|
||||
<div class="on-blue">
|
||||
<div class="on-rosa">
|
||||
<span class="freiraum">
|
||||
<img src="../public/brand/manner-logo.svg" alt="Manner" width="150" height="60"
|
||||
<img src="../public/brand/manner-logo-auf-rosa.svg" alt="Manner" width="150" height="60"
|
||||
style="padding:20px;box-sizing:content-box;display:block">
|
||||
</span>
|
||||
<div style="font-size:11px;color:#ffffffaa;margin-top:8px">auf dem Panel der Anmeldeseite</div>
|
||||
<div style="font-size:11px;color:var(--brand-700);margin-top:8px">
|
||||
<code>manner-logo-auf-rosa.svg</code> — im rosa Umfeld, ohne Feld (§3.1)</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:12px;color:var(--ink-muted)">
|
||||
§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.</p>
|
||||
<p style="font-size:12px;color:var(--ink-body)">
|
||||
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.</p>
|
||||
<div class="note">
|
||||
<b>Nebenbei ausgemistet.</b> Beide Dateien wogen 74 kB, weil die Vorlage aus Seite 3
|
||||
des Manuals gezogen wurde und die ganze Seite mitgenommen hat: 219 Elemente, die den
|
||||
Fliesstext jener Seite zeichnen („Der Manner Schriftzug … darf nicht veraendert
|
||||
werden"), rosa auf Rosa oder ausserhalb des Beschnitts. Das eigentliche Logo sind
|
||||
vier Pfade. Jetzt 18,7 kB.
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════ -->
|
||||
<h2>6 · Was hier noch nicht entschieden ist</h2>
|
||||
|
||||
Reference in New Issue
Block a user