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>
386 lines
22 KiB
HTML
386 lines
22 KiB
HTML
<!doctype html>
|
|
<html lang="de-AT">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Alpenwerk HR — Farbschema nach Manner CD</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--brand-50:#eef3fb; --brand-100:#dae4f5; --brand-200:#afc3e6;
|
|
--brand-500:#164194; --brand-600:#11326f; --brand-700:#0d2857;
|
|
--accent-50:#fef5f2; --accent-100:#fde7e1; --accent-200:#facec2;
|
|
--accent-500:#f69686; --accent-600:#d9604b; --accent-700:#a8402e;
|
|
--surface:#fdf6f4; --border:#f0dbd4; --border-subtle:#f8ece8; --border-strong:#a67f70;
|
|
--ink:#231f20; --ink-body:#4b4446; --ink-muted:#756c6e;
|
|
--success-bg:#dff6dd; --success-text:#0e700e;
|
|
--danger-bg:#fde7e9; --danger-text:#b10e1c; --danger-solid:#c50f1f;
|
|
--warning-bg:#fff4ce; --warning-text:#835b00;
|
|
--info-bg:#d7f0f0; --info-text:#00666d;
|
|
--purple-bg:#e4d9f5; --purple-text:#54277f;
|
|
--shadow-card: 0 1px 2px rgb(122 60 45 / .05), 0 1px 3px rgb(122 60 45 / .07);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; background: var(--surface); color: var(--ink);
|
|
font: 14px/1.55 "Barlow", "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 24px 80px; }
|
|
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
|
|
h2 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
|
|
color: var(--ink-muted); margin: 44px 0 14px; }
|
|
h3 { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
|
|
p { color: var(--ink-body); max-width: 68ch; }
|
|
.lead { font-size: 15px; }
|
|
code { font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
|
|
.card { background: #fff; border: 1px solid var(--border); border-radius: 8px;
|
|
box-shadow: var(--shadow-card); padding: 20px; }
|
|
.grid { display: grid; gap: 14px; }
|
|
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
|
|
.g3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
|
|
|
|
/* ── Farbfelder ── */
|
|
.swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
|
|
.swatch .fl { height: 84px; display: flex; align-items: flex-end; padding: 8px 10px; font-weight: 700; font-size: 12px; }
|
|
.swatch .mt { padding: 8px 10px; font-size: 11px; color: var(--ink-muted); line-height: 1.45; }
|
|
.swatch .mt b { color: var(--ink); font-weight: 700; display: block; }
|
|
.ramp { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
|
|
.ramp div { flex: 1; height: 62px; display: flex; align-items: flex-end; justify-content: center;
|
|
padding-bottom: 5px; font-size: 10px; font-weight: 700; }
|
|
|
|
/* ── Tabelle ── */
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
|
|
color: var(--ink-muted); font-weight: 800; padding: 7px 10px; border-bottom: 1px solid var(--border); }
|
|
td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); }
|
|
tbody tr:hover { background: var(--brand-50); }
|
|
.num { font-variant-numeric: tabular-nums; text-align: right; }
|
|
.ok { color: var(--success-text); font-weight: 700; }
|
|
.warn { color: var(--warning-text); font-weight: 700; }
|
|
.bad { color: var(--danger-text); font-weight: 700; }
|
|
|
|
/* ── Bauteile ── */
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
|
|
font-weight: 700; font-size: 14px; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; }
|
|
.btn-primary { background: var(--brand-500); color: #fff; }
|
|
.btn-primary:hover { background: var(--brand-600); }
|
|
.btn-secondary { background: #fff; color: var(--ink-body); border-color: var(--border-strong); }
|
|
.btn-secondary:hover { background: var(--surface); }
|
|
.btn-danger { background: var(--danger-solid); color: #fff; }
|
|
.btn-ghost { background: transparent; color: var(--ink-body); }
|
|
.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
|
|
|
|
.field { display: block; margin-bottom: 12px; }
|
|
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
|
|
.field input, .field select {
|
|
width: 100%; border: 1px solid var(--border-strong); border-radius: 6px;
|
|
padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
|
|
.field input:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
|
|
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
|
|
.field.invalid input { border-color: var(--danger-solid); }
|
|
.field.invalid .hint { color: var(--danger-text); font-weight: 700; }
|
|
|
|
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
|
|
.nav { width: 232px; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
|
|
.nav .hd { height: 56px; display: flex; align-items: center; gap: 0; padding-left: 8px;
|
|
background: var(--accent-500); border-bottom: 1px solid var(--accent-600); }
|
|
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 3px 10px;
|
|
border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-body); text-decoration: none; }
|
|
.nav a.active { background: var(--brand-100); color: var(--brand-700); }
|
|
.nav a:hover:not(.active) { background: var(--surface); }
|
|
.dot { width: 15px; height: 15px; border-radius: 4px; background: currentColor; opacity: .55; flex: none; }
|
|
|
|
.note { border-left: 3px solid var(--accent-500); background: #fff;
|
|
padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 14px 0; }
|
|
.note b { color: var(--ink); }
|
|
|
|
.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-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>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<h1>Farbschema nach dem Manner CD Manual 2022</h1>
|
|
<p class="lead">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
|
|
<code>app/globals.css</code>.</p>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════ -->
|
|
<h2>1 · Die zwei Markenfarben</h2>
|
|
<div class="grid g2">
|
|
<div class="swatch">
|
|
<div class="fl" style="background:#f69686;color:#231f20">Schrift darauf: ink</div>
|
|
<div class="mt"><b>Manner Rosa — #F69686</b>
|
|
CMYK 0/50/40/0 · sRGB 246 150 134<br>
|
|
Pantone: Orange 021 7.20 + Bright Red 7.20 + Trans. White 85.60<br>
|
|
CD §1.1 · im Projekt <code>accent-500</code></div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="fl" style="background:#164194;color:#fff">Schrift darauf: weiss</div>
|
|
<div class="mt"><b>Manner Blau — #164194</b>
|
|
CMYK 100/80/0/0 · sRGB 22 65 148<br>
|
|
Pantone Reflex Blue C / U<br>
|
|
CD §1.1 · im Projekt <code>brand-500</code></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<b>Eine Abweichung, die auffallen wird.</b> Die mitgelieferte Logodatei trug
|
|
<code>#034ea2</code> 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 <code>#164194</code> gezogen worden, damit es neben den
|
|
blauen Bedienelementen nicht wie ein Fehler aussieht. Beim Rosa war die Differenz
|
|
bedeutungslos (dE 0.9).
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════ -->
|
|
<h2>2 · Warum Blau bedient und Rosa traegt</h2>
|
|
<p><b>Rosa ist die fuehrende Farbe.</b> 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.</p>
|
|
<p>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.</p>
|
|
|
|
<div class="card">
|
|
<table>
|
|
<thead><tr><th>Kombination</th><th class="num">Kontrast</th><th>Fliesstext</th><th>Folge</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Weiss auf Manner Rosa</td><td class="num">2.18:1</td><td class="bad">faellt durch</td>
|
|
<td>Rosa kann keine weisse Schrift tragen — auch nicht in gross</td></tr>
|
|
<tr><td>Manner Blau auf Manner Rosa</td><td class="num">4.34:1</td><td class="warn">knapp daneben</td>
|
|
<td>reicht fuer das Logo, nicht fuer Text</td></tr>
|
|
<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><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>
|
|
<td>Knopf, Panel</td></tr>
|
|
<tr><td>Manner Blau auf Weiss</td><td class="num">9.47:1</td><td class="ok">AAA</td>
|
|
<td>Link, Fokusring, aktiver Menuepunkt</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════ -->
|
|
<h2>3 · Die Abstufungen</h2>
|
|
<p><b>Blau — alles, was man anfassen kann.</b></p>
|
|
<div class="ramp">
|
|
<div style="background:var(--brand-50);color:#231f20">50</div>
|
|
<div style="background:var(--brand-100);color:#231f20">100</div>
|
|
<div style="background:var(--brand-200);color:#231f20">200</div>
|
|
<div style="background:var(--brand-500);color:#fff">500 · CD</div>
|
|
<div style="background:var(--brand-600);color:#fff">600</div>
|
|
<div style="background:var(--brand-700);color:#fff">700</div>
|
|
</div>
|
|
|
|
<p style="margin-top:20px"><b>Rosa — alles, was die Marke traegt.</b></p>
|
|
<div class="ramp">
|
|
<div style="background:var(--accent-50);color:#231f20">50</div>
|
|
<div style="background:var(--accent-100);color:#231f20">100</div>
|
|
<div style="background:var(--accent-200);color:#231f20">200</div>
|
|
<div style="background:var(--accent-500);color:#231f20">500 · CD</div>
|
|
<div style="background:var(--accent-600);color:#fff">600</div>
|
|
<div style="background:var(--accent-700);color:#fff">700</div>
|
|
</div>
|
|
|
|
<p style="margin-top:20px"><b>Flaechen und Schrift.</b> Das Schwarz ist <code>#231F20</code>
|
|
aus dem Manual, nicht reines Schwarz.</p>
|
|
<div class="ramp">
|
|
<div style="background:var(--surface);color:#231f20">surface</div>
|
|
<div style="background:var(--border-subtle);color:#231f20">border-subtle</div>
|
|
<div style="background:var(--border);color:#231f20">border</div>
|
|
<div style="background:var(--border-strong);color:#fff">border-strong</div>
|
|
<div style="background:var(--ink-muted);color:#fff">ink-muted</div>
|
|
<div style="background:var(--ink-body);color:#fff">ink-body</div>
|
|
<div style="background:var(--ink);color:#fff">ink</div>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════ -->
|
|
<h2>4 · Bauteile</h2>
|
|
<div class="grid g2">
|
|
|
|
<div class="card">
|
|
<h3>Knoepfe</h3>
|
|
<div style="display:flex;gap:9px;flex-wrap:wrap;align-items:center">
|
|
<button class="btn btn-primary">Speichern</button>
|
|
<button class="btn btn-secondary">Abbrechen</button>
|
|
<button class="btn btn-danger">Austritt erfassen</button>
|
|
<button class="btn btn-ghost">Zurueck</button>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
|
|
Der sekundaere Knopf hat jetzt <code>border-strong</code> — vorher war seine
|
|
Umrandung mit 1.3:1 kaum zu sehen.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Eingabefelder</h3>
|
|
<div class="field">
|
|
<label>Nachname</label>
|
|
<input value="Gruber">
|
|
</div>
|
|
<div class="field invalid">
|
|
<label>SV-Nummer</label>
|
|
<input value="1234 010180">
|
|
<div class="hint">Die Pruefziffer stimmt nicht.</div>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:0">
|
|
Rahmen 3.56:1 statt 1.30:1 — WCAG 1.4.11 fuer Bedienelemente.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Status</h3>
|
|
<div class="chips">
|
|
<span class="chip" style="background:var(--success-bg);color:var(--success-text)">Aktiv</span>
|
|
<span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Langzeitabwesenheit</span>
|
|
<span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Geplant</span>
|
|
<span class="chip" style="background:var(--danger-bg);color:var(--danger-text)">Ausgetreten</span>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
|
|
„Geplant" ist der Fall ohne besondere Faerbung und bekommt deshalb die
|
|
Markenfarbe. Blau saehe hier nach Schaltflaeche aus.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Vorgaenge im Protokoll</h3>
|
|
<div class="chips">
|
|
<span class="chip" style="background:var(--success-bg);color:var(--success-text)">Neueinstellung</span>
|
|
<span class="chip" style="background:var(--danger-bg);color:var(--danger-text)">Austritt</span>
|
|
<span class="chip" style="background:var(--info-bg);color:var(--info-text)">Versetzung</span>
|
|
<span class="chip" style="background:var(--purple-bg);color:var(--purple-text)">Befoerderung</span>
|
|
<span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Vertragsaenderung</span>
|
|
<span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Import</span>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
|
|
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.</p>
|
|
</div>
|
|
|
|
<div class="card" style="grid-column:1/-1">
|
|
<h3>Liste</h3>
|
|
<table>
|
|
<thead><tr><th>Name</th><th>Pers.-Nr.</th><th>Bereich</th><th>Eintritt</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><b>Aigner, Katharina</b></td><td class="num">1042</td><td>Produktion</td><td class="num">01.03.2019</td>
|
|
<td><span class="chip" style="background:var(--success-bg);color:var(--success-text)">Aktiv</span></td></tr>
|
|
<tr><td><b>Berger, Anna</b></td><td class="num">1187</td><td>Vertrieb</td><td class="num">15.09.2021</td>
|
|
<td><span class="chip" style="background:var(--warning-bg);color:var(--warning-text)">Abwesend</span></td></tr>
|
|
<tr><td><b>Winkler, Michaela</b></td><td class="num">1590</td><td>Technik</td><td class="num">01.10.2026</td>
|
|
<td><span class="chip" style="background:var(--accent-200);color:var(--brand-700)">Geplant</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:12px 0 0">
|
|
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".</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Navigation</h3>
|
|
<div class="nav">
|
|
<div class="hd">
|
|
<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>
|
|
<a href="#" class="active"><span class="dot"></span>Uebersicht</a>
|
|
<a href="#"><span class="dot"></span>Mitarbeiter:innen</a>
|
|
<a href="#"><span class="dot"></span>Organigramm</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Organigramm — die vier Knotenarten</h3>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700">
|
|
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--brand-500)"></span>Person</span>
|
|
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--purple-text)"></span>Rolle</span>
|
|
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--ink-muted)"></span>Einheit</span>
|
|
<span style="display:flex;align-items:center;gap:6px"><span style="width:6px;height:26px;border-radius:3px;background:var(--accent-500)"></span>offene Stelle</span>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--ink-muted);margin:14px 0 0">
|
|
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.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════ -->
|
|
<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">
|
|
<code>manner-logo.svg</code> — auf Weiss, mit eigenem rosa Feld (§4.1)</div>
|
|
</div>
|
|
<div class="on-rosa">
|
|
<span class="freiraum">
|
|
<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: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-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>
|
|
<div class="card">
|
|
<p style="margin-top:0"><b>Das Logo ist das Markenlogo, nicht das Unternehmenslogo.</b>
|
|
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.</p>
|
|
<p><b>Die Vorlage ist aus dem PDF gezogen, nicht das Original.</b> Fuer die Testphase
|
|
traegt das; fuer die Uebergabe gehoert die offizielle Datei hinein.</p>
|
|
<p><b>Die Schrift ist Barlow, nicht DIN.</b> 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 <code>app/layout.tsx</code>.</p>
|
|
<p style="margin-bottom:0"><b>Die Symbole sind nachgerechnet, nicht neu exportiert.</b>
|
|
Favicon, Apple-Symbol und die Manifest-Symbole kamen als 24-Bit-RGB und trugen
|
|
<code>#034DA1</code> als Blau. Sie liegen jetzt als RGBA vor — das verlangt der
|
|
Bildpfad des Bauwerkzeugs — und ihr Blau ist auf <code>#164194</code> 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.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|