Plan: CD-Manual 08.10.2026 umsetzen – Anthrazit statt Schwarz¶
Stand: 2026-10-29 · Quelle: VisiTrans_CD_08.10.2026_EW08.pdf (16 Seiten) · Status: Entscheidungen E1–E7 freigegeben (Rolf, 2026-10-29), Phase 1 als SPEC angelegt
1. Kurzfassung¶
Das Toolkit trennt Logo-Schwarz und Flächen-Anthrazit schon heute (SPEC-157). Die Regel steht also im Grundsatz. Falsch sind aber die Farbwerte. Alle Design-Skills, die Token-Datei und die Generatoren stammen aus dem Manual vom 17.02.2026 bzw. aus älteren Ständen. Gegenüber dem neuen Manual weicht jede Primärfarbe ab:
| Farbe | Manual 08.10.2026 (digital) | Toolkit heute | Abweichung |
|---|---|---|---|
| Schwarz | #2B2B2A (CMYK 0/0/0/100) |
#000000 „Logo-Basis, 0 % Toleranz“ |
anderer Wert |
| Anthrazit | #444343 (CMYK 0/0/0/90) |
#101216 (+ Rampe #0B0D11, #1A1C20) |
deutlich dunkler, fast schwarz |
| Orange | #F9AB07 (CMYK 0/38/100/0) |
Bildschirm #FF9E00, Druck #FC9E00 |
anderer Wert, Split ohne Grundlage |
| Weiß | #FFFFFF |
#FFFFFF |
ok |
| Magenta (Akzent) | #E24892 (CMYK 5/85/0/0) |
Bildschirm #FF00FF, Druck #E6007E |
anderer Wert |
| Sekundär-/Statusfarben | keine definiert | Gelb/Grün/Cyan, Rot, Dunkelblau, Petrol, Lila … | nicht im Manual |
Die Website (V024) hat eine eigene Token-Datei mit wiederum anderen Werten: Orange #FC9E00, Magenta #E00A85,
Hintergrund #101216 und die Schrift Montserrat statt Inter.
Hauptgrund dafür, dass Präsentationen und Website „schwarz“ wirken: Das bisherige Anthrazit #101216 ist vom
Schwarz kaum zu unterscheiden. Die PowerPoint-Folienmaster hinterlegen sogar reines #000000 als Hintergrund.
Das neue Anthrazit #444343 ist ein sichtbares Dunkelgrau. Die Umstellung ist deshalb optisch deutlich,
vor allem auf der Website.
2. Prüfung des Manuals – Befunde¶
2.1 Inhaltliche Lücken (vor Umsetzung klären)¶
- Die Regel „Schwarz nur fürs Logo, Hintergründe in Anthrazit“ steht nicht im Manual. Seite 10 führt Schwarz gleichrangig als Primärfarbe. Seite 12 zeigt „auf Schwarz monochrom“ als zulässige Logo-Variante. Verankern wir die Regel nur im Toolkit, kann sich jeder Dienstleister zu Recht auf das Manual berufen. → Einen Satz auf Seite 10 oder 12 ergänzen lassen.
- Was heißt „Schwarz als Logo-Hintergrund“? Das Manual verwendet Schwarz an zwei Stellen: als Farbe des „ViSi“-Schriftzugs auf hellem Grund (S. 12, „auf Weiß“/„auf Orange“) und als Fläche hinter dem Monochrom-Logo (S. 12, „auf Schwarz monochrom“). Der Plan geht davon aus, dass beides erlaubt bleibt und Schwarz sonst nicht als Fläche auftaucht.
- Keine Sekundär-, Status- oder Abstufungsfarben. Das alte Manual hatte Gelb/Grün/Cyan und Grau- und Orange-Abstufungen. Produkt-UIs und Diagramme brauchen Statusfarben (Erfolg/Warnung/Fehler) und Flächenstufen. Das Manual sagt zugleich: „Farbwerte dürfen weder frei angenähert … werden“. Ohne Freigabe für funktionale Ergänzungsfarben ist jede Statusfarbe formal ein CD-Verstoß.
- Magenta ist auf Anthrazit nicht barrierefrei (WCAG 2.1, gemessen):
| Kombination | Kontrast | AA Text (4,5) | AA groß/UI (3,0) |
|---|---|---|---|
| Weiß auf Anthrazit | 9,86:1 | ✓ | ✓ |
| Orange auf Anthrazit | 5,10:1 | ✓ | ✓ |
| Magenta auf Anthrazit | 2,62:1 | ✗ | ✗ |
| Weiß auf Magenta | 3,77:1 | ✗ | ✓ nur groß |
| Magenta auf Weiß | 3,77:1 | ✗ | ✓ nur groß |
| Orange auf Weiß | 1,93:1 | ✗ | ✗ |
Rot #D32F2F auf Anthrazit |
1,98:1 | ✗ | ✗ |
Schwarz #2B2B2A gegen Anthrazit |
1,44:1 | — | — |
Magenta ist laut Manual die Farbe für Links und Buttons. Auf dem Standard-Hintergrund der Website (dunkel) besteht ein magentafarbener Link den Kontrast nicht. Das braucht eine Gestaltungsentscheidung (siehe E5). 5. Die letzte Zeile zeigt außerdem: Schwarz neben Anthrazit hebt sich kaum ab. Ein schwarzer Logo-Kasten auf Anthrazit-Fläche wirkt wie ein Fehler.
2.2 Formale Befunde im PDF¶
- S. 16: „Kontakt: E-Mail-Adresse“ ist ein Platzhalter, die Adresse fehlt.
- S. 2, Fußzeile: „Coporate Design“ (Tippfehler).
- S. 12: Bei „auf Schwarz monochrom“ ist „FAIR = 40 % Schwarz“ angegeben. Auf schwarzem Grund ist ein Grauwert aus Schwarz-Prozent mehrdeutig (Tonwert oder Deckkraft?). Einen HEX-Wert angeben lassen.
- Die HEX-Werte sind aus CMYK abgeleitet (K100 →
#2B2B2A). Das ist korrekt, steht aber nicht im Text. Ohne den Hinweis wird#2B2B2Asicher wieder auf#000000„korrigiert“.
2.3 Abweichungen jenseits der Farben (Toolkit veraltet)¶
| Thema | Manual 08.10.2026 | Toolkit (vt-b-visitrans-cd, Token-Datei) |
|---|---|---|
| Hausschrift | Inter für alle Kommunikation; Futura Bold nur im Logo | Frutiger (Fließtext/Headlines), Futura Book für Produktbereiche |
| Schutzraum | 3 Rastereinheiten auf allen Seiten | „Höhe des Buchstabens i“ |
| VisiFair-Subline | SMART FAIRS | SMART FAIRGROUNDS (Token-Datei) |
| VisiArea | SMART ACCESS, Bereich DEFENSE | „TROOP MOVEMENTS“, Bereiche BLINDTEXT/MUSTER |
| VisiMatch-Bereiche | CARRIER, PRICING, TERMINAL | ANTRÄGE, FREIGHT, TERMINAL, PRICING |
| Logo auf Orange | ViSi Schwarz, FAIR Weiß, Subline Schwarz | „Schwarz + Weiß oder komplett Schwarz“ |
| Logo auf Schwarz | nur monochrom (Weiß/40 % Schwarz) | „Orange + Weiß“ |
| Icons VT/VM/VF/VA | definiert (S. 15) | nicht vorhanden |
3. Ist-Stand – betroffene Stellen¶
3.1 Toolkit (V025)¶
Quelle der Wahrheit und Generatoren
- configs/visitrans-cd-tokens.yaml – alle Primärwerte, Screen/Print-Split, erweiterte Farben, Produkt-Themes, Taglines
- scripts/design_system/tokens.py, generate_css_variables.py, generate_primeng_preset.py (setzt #101216/#0B0D11/#1A1C20 für das PrimeNG-Dark-Schema)
- docs/decisions/2026-07-21-brand-orange-screen-vs-print.md – Screen/Print-Split; wird durch das Manual gegenstandslos (das Manual nennt einen Digitalwert)
Design-Skills (plugins/vt-brand)
- visitrans-design-system/colors_and_type.css – --vt-black #000000, Anthrazit-Rampe, Orange/Magenta-Rampen, Sekundärfarben, Kontrast-Kommentare
- visitrans-design-system/SKILL.md (Frontmatter-Beschreibung + Non-negotiable 1), README.md
- visitrans-design-system/preview/*.html (≈12 Specimens) und ui_kits/{visitrans,visimatch,visifair}/index.html
- visitrans_cd/SKILL.md – Farb-, Schrift-, Schutzraum-, Logo-Hintergrund- und Toleranzregeln, Prüfbeispiele (#FC9E00)
Konsumenten (plugins/vt-office, plugins/vt-product-dev, plugins/vt-base)
- mermaid-diagrams-branded (21 Farbliterale), c4-diagram, diagram-validation, document-converter-branded, remotion-video
- bootstrap, pd-3-prototype, kw-prototype (Skill + Command), pd-6-handoff
- vt-base/docs/PRODUCT-DESIGN-WORKFLOW.md, vt-base/agents/orchestrators/product-design-orchestrator.md
- docs/guides/design-system.md, configs/user-global/skills/README-MODULAR-SKILLS.md
Präsentationen im Toolkit
- vt-office/skills/gamma-presentation/SKILL.md – keine Hintergrund- oder Farbregel; ein Bild-Prompt nennt sogar #FF6B00 als „VisiTrans Orange“
- Agent presentation-quality-reviewer prüft „corporate design compliance“ – Kriterien prüfen
Tests, die die alten Werte festschreiben
- tests/spec-157/test_theme_polarity.bats – u. a. „dark background token is #101216“, „--vt-black is STILL pure #000000“
- scripts/tests/setup/77-screen-print-color-split-holds.sh – erzwingt den Screen/Print-Split
3.2 Präsentationsvorlagen (OneDrive 03-Corporate Design/04-Templates)¶
| Datei | Stand | Hintergrund | Orange |
|---|---|---|---|
VisiTrans_Folienmaster.pptx |
11.10.2026 | bg1 → dk1 = #000000 (alle 29 Layouts) |
#F8AA00 |
VisiMatch_Folienmaster.pptx |
11.10.2026 | dito | #F8AA00 |
VisiFair_Folienmaster.pptx |
11.10.2026 | dito | #F8AA00 |
VisiArea_Folienmaster.pptx |
11.10.2026 | dito | #F8AA00 |
VisiTrans-Keynote-Theme(_v2).pptx |
15.11.2025 | Altbestand | – |
Alle vier aktuellen Master sind drei Tage nach dem Manual entstanden und haben trotzdem reines Schwarz als
Hintergrund. Jede neue Präsentation erbt das. Das Orange #F8AA00 liegt nahe an #F9AB07, ist aber nicht der
Manual-Wert.
3.3 Website (V024-Websites-dev)¶
Gemessen am main-Stand eab0b18 (15.09.2026). Das Repo hat eine eigene Token-Quelle und nutzt
colors_and_type.css aus dem Toolkit nicht. Gute Nachricht: Die Farben hängen fast vollständig an einer Datei.
Struktur: Drei Astro-Apps (apps/01-visitrans, 02-visimatch, 03-visifair) und das gemeinsame Paket
packages/01-ui. Alle drei Apps nutzen dieselbe packages/01-ui/tailwind.config.ts, und die liest
02-assets/design/design-tokens.json.
| Rolle | Website heute | Manual 08.10.2026 |
|---|---|---|
Hintergrund surface.background |
#101216 |
#444343 |
Stufen sunken / muted / accent / popover |
#0B0D11 / #1A1C20 / #202226 / #1A1C20 |
aus K-Stufen neu ableiten (E6) |
Text auf hell text.primary |
#101216 |
#2B2B2A oder #444343 (E2) |
Orange interactive.primary, focus.ring |
#FC9E00 |
#F9AB07 |
Magenta cta.* |
#E00A85 (+ hover/active/disabled), onDark #EE3D9C |
#E24892, Varianten neu ableiten |
| Status | eigene gedämpfte Töne (#6F7747, #3A6C8E, #EBCB6C, #E5484D …) |
nicht im Manual (E4) |
| Schrift | Montserrat über Google Fonts | Inter (selbst gehostet, wie im Toolkit) |
Hart codiert außerhalb der Token-Datei (je Site gleiches Muster):
- public/favicon.svg ×3: Hintergrund #101216, Orange #FC9E00
- BaseLayout.astro ×3: Fokusrahmen #fc9e00
- Header.astro und FooterSection.astro ×3: Glow rgba(252,158,0,0.6)
- apps/01-visitrans/.../Hero.astro:29: Verlauf mit rgba(16,18,22,0.6) (= #101216)
Reines #000000 oder bg-black kommt im Quelltext nicht mehr vor. Das wurde am 20.07.2026 bereinigt
(Commit 0b2e6a6). Damals wurde aber auf das fast-schwarze #101216 umgestellt.
Tests und Regeln, die umgestellt werden müssen
- packages/01-ui/src/lib/contrast.test.ts liest die Token-Datei und prüft Kontraste. Mehrere Erwartungen kippen
mit der neuen Palette (z. B. :23, :33).
- scripts/check-design-rules.mjs prüft das gebaute HTML, kennt aber keine Regel gegen Schwarz oder Hex-Literale.
- CLAUDE.md:94-120 des Repos: Farbwerte und der Abschnitt „Anthracite, not black“ (nennt #000000 als Logo-Schwarz).
- Veraltete Doku mit alten Werten: specs/16-…, clickable_elements_design_spec.md, tailwind.config.ts.md (Root
und Paket), 01-docs/prd-visitrans website.md:1326.
Bilder: Logos *-bl-* haben schwarze Schrift (für helle Flächen). Ob einzelne PNGs einen schwarzen Hintergrund
eingebrannt haben, ist nicht geprüft. Dafür sichten: apps/*/public/*-logo.png, apps/01-visitrans/public/images/cta-home.png.
Eigene OG-Bilder gibt es nicht.
4. Entscheidungen vor der Umsetzung¶
Rolf hat am 2026-10-29 alle Empfehlungen übernommen („Ja, alle Werte ans Manual angleichen. Übernimm deine Empfehlungen zu E2–E7“). Die Spalte „Empfehlung“ ist damit die Entscheidung.
| # | Frage | Entscheidung |
|---|---|---|
| E1 | Umfang: nur die Hintergrundregel – oder alle Werte ans Manual angleichen? | Alle Werte angleichen. Das Manual ist verbindlich und verbietet Näherungswerte. Nur die Hintergründe umzustellen, ließe drei falsche Primärfarben stehen. |
| E2 | Logo-Schwarz: #2B2B2A (Manual) oder #000000 (Toolkit)? |
#2B2B2A digital, K100 im Druck. Bei den Logo-PNGs prüfen, welcher Wert eingebrannt ist (Originaldateien nicht verändern). |
| E3 | Screen/Print-Split für Orange und Magenta beibehalten? | Abschaffen. Digital #F9AB07/#E24892, Druck CMYK. Die ADR vom 21.07.2026 durch eine neue ADR ablösen. |
| E4 | Sekundär-/Statusfarben (Gelb/Grün/Cyan, Rot, Grau-/Orange-Abstufungen, Produkt-Themes)? | Als „funktionale UI-Ergänzung, nicht Teil des CD“ behalten, Werte für Kontrast auf #444343 neu ableiten, vom Designer schriftlich freigeben lassen. Bis dahin nur in Produkt-UI und Diagrammen, nie in Marketing. |
| E5 | Magenta auf Anthrazit (2,62:1) | Auf dunklen Flächen: Primär-CTA in Orange (wie heute schon), Links in Weiß mit Unterstreichung. Magenta nur als Füllung mit großer, fetter Schrift (≥ 18,7 px bold). Zusätzlich beim Designer anfragen, ob eine hellere Magenta-Variante für dunkle Flächen freigegeben wird. |
| E6 | Tiefenstufen (abgesenkte/angehobene Flächen) um #444343 |
Nur aus CMYK-K-Stufen ableiten (z. B. K80, K70), nie K100. Diese Stufen beim Designer freigeben lassen. |
| E7 | Bestehende Präsentationen | Master und Skills sofort. Bestehende Decks erst bei der nächsten Bearbeitung umstellen. Ausnahme: aktiv genutzte Vertriebsdecks, dafür eine Liste anlegen. |
5. Umsetzungsplan¶
Phase 0 – Grundlagen (1–2 Tage, ohne Code)¶
- Feedback an den Designer: Regeltext Schwarz/Anthrazit (2.1-1), Platzhalter und Tippfehler (2.2), Freigabe der Ergänzungsfarben (E4) und Tiefenstufen (E6), Magenta-Frage (E5).
- Manual ablegen:
03-cd-manual/VisiTrans_CD_08.10.2026_EW08.pdf, das Manual vom 17.02.2026 nach99-alt/. - Entscheidungen E1–E7 festhalten.
Phase 1 – Toolkit (SPEC über /vt-d-spec-from-requirements, Branch feature/spec-<n>-cd-2026-10)¶
Reihenfolge = Abhängigkeit; jede Stufe einzeln prüfbar.
1. Token-Datei configs/visitrans-cd-tokens.yaml auf Manual-Werte; screen-Block entfernen;
logo_black #2B2B2A; Anthrazit #444343; Taglines korrigieren; Ergänzungsfarben laut E4 markieren.
2. Generatoren (tokens.py, generate_css_variables.py, generate_primeng_preset.py) nachziehen, PrimeNG-Dark-Schema auf die neue Rampe.
3. colors_and_type.css: Primärwerte, Anthrazit-Rampe (E6), Text-/Danger-Varianten neu gegen #444343 ableiten,
Kontrast-Kommentar neu messen. Neue Regel als Kommentar: „--vt-black ist ausschließlich Logo-Farbe – nie background“.
4. visitrans-design-system: SKILL.md (Beschreibung + Non-negotiables), README, Previews, UI-Kits.
5. visitrans_cd vollständig auf das neue Manual: Farben, Inter statt Frutiger, Schutzraum, Sublines und Bereiche,
Logo-auf-Hintergrund-Matrix (S. 12), Icons (S. 15). Neue Prüfregel im Audit:
„Schwarze oder fast schwarze Fläche außerhalb des Logo-Kastens = Befund (STRENG)“.
6. Konsumenten (Liste 3.1) auf die Token-Werte umstellen; in gamma-presentation eine Theme-Vorgabe ergänzen
(Hintergrund #444343, Text Weiß, Akzent #F9AB07) und #FF6B00 entfernen; presentation-quality-reviewer
um die Hintergrundregel erweitern.
7. Durchsetzung: Guard 77 (Split) durch einen Guard ersetzen, der in allen Bildschirm-Dateien prüft:
kein #000000/#2B2B2A/#101216 als background/Surface-Token; alle Primärwerte gleich der Token-Datei.
Mit Negativkontrolle (Regel 13). test_theme_polarity.bats auf die neuen Werte umschreiben.
8. Neue ADR „CD 08.10.2026: ein Digitalwert pro Farbe, Schwarz nur Logo“, die 2026-07-21 ablöst.
9. Review (/vt-d-4-review) und Finalize, PR mit Auto-Merge; danach setup.sh im Hauptcheckout, damit die Skills ausgerollt werden.
Phase 2 – Präsentationen¶
- Die vier Folienmaster anpassen:
dk1/Hintergrund auf#444343,accent1auf#F9AB07. Logo-Platzierungen auf Anthrazit-Variante prüfen (S. 12: ViSi Weiß, Bereich Orange). Kopien erzeugen, Designer gibt frei, dann ersetzen; alte Master nach99-alt/. - Keynote-Themes 2025 nach
99-alt/verschieben (veraltet). - Gamma: eigenes Theme mit
#444343-Hintergrund anlegen (manuell in Gamma) und im Skill referenzieren. - Liste aktiv genutzter Decks anlegen und nach E7 umstellen.
Phase 3 – Website (eigene SPEC im Repo V024-Websites-dev)¶
Kann parallel zu Phase 1 laufen, weil die Website die Toolkit-CSS nicht einbindet. Die Werte müssen aber aus
derselben Entscheidung (E1–E6) kommen.
1. Vorher-Screenshots aller Seiten der drei Sites (Desktop und Mobil) als Vergleichsbasis.
2. design-tokens.json auf die Manual-Werte und die freigegebenen Stufen umstellen. Allein damit ändern sich
rund 290 Token-Verwendungen (bg-muted, bg-accent, bg-background …) auf allen drei Sites.
3. 12 hart codierte Stellen (Favicons, Fokusrahmen, Glow, Hero-Verlauf) auf Token umstellen. Der Glow wird
dann über primaryChannel gebaut.
4. Kontrast: contrast.test.ts auf die neue Palette umschreiben. Magenta-Regeln aus E5 umsetzen
(cta.onDark neu ableiten oder auf dunklen Flächen ersetzen). Die Glow- und Spotlight-Effekte auf #444343
optisch neu abstimmen, denn auf Grau wirken sie schwächer als auf Fast-Schwarz.
5. Schrift von Montserrat auf Inter (selbst gehostet). Das ist ein eigener, sichtbarer Schritt mit
Layout-Folgen (andere Laufweite) und kann bei Bedarf als eigene SPEC laufen.
6. Regel ergänzen in check-design-rules.mjs: kein #000/#2B2B2A/#101216 und kein bg-black im gebauten
HTML/CSS, mit Negativkontrolle.
7. Repo-CLAUDE.md und veraltete Doku auf die neuen Werte bringen.
8. Nachher-Screenshots, Vergleich je Seite, Abnahme durch Rolf/Designer, dann Deployment.
Phase 4 – Absicherung¶
visitrans_cd-Audit auf ein bestehendes Deck laufen lassen und prüfen, dass der schwarze Hintergrund als Befund kommt.- Nach dem Rollout ein neues Test-Deck und eine Testseite erzeugen und gegen das Manual prüfen.
Next actions¶
- Entscheidungen E1–E7 bestätigen oder ändern.
- Phase 0 starten: Feedback-Liste an den Designer geben.
- Phase 1 als SPEC anlegen und umsetzen.