Zum Hauptinhalt springen

Icon-Bibliothek Briefing

Zielgruppe: Grafik-Team Zweck: Briefing zur Erstellung von Icons fuer technische Diagramme Ablage: v2/assets/icons/

Hintergrund​

Fuer technische Architektur- und Prozessdiagramme (D2, Dokumentation) benoetigen wir einheitliche Icons. Diese sollen:

  • Zur TOGETHER CCA Farbpalette passen
  • In SVG-Format vorliegen (skalierbar)
  • Konsistent in Stil und Proportion sein
  • Sowohl in kleiner (32x32px) als auch mittlerer Groesse (64x64px) erkennbar sein

Referenz: Diagram Style Guide, Color Guide

Icon-Strategie​

KategorieAnsatzVerantwortung
ProdukteEigene IconsGrafik-Team
User-TypenEigene IconsGrafik-Team
APIsEigene IconsGrafik-Team
IntegrationenEigene IconsGrafik-Team
InfrastrukturTerrastruct/Azure IconsDevelopment

1. Produkt-Icons​

Pfad: assets/icons/products/

DateinameProduktFarbeNotizen
cca9.svgCCA9 DesktopCCA Blau #0066B2Desktop-Anwendung
ccaonline.svgCCA-OnlineCCA Blau #0066B2Web-Anwendung
together-platform.svgTOGETHER PlatformOrange #FF9900Plattform-Symbol
boa-bot.svgBOA-BotOrange #FF9900Existierendes Logo vereinfachen
kundenportal.svgmyVersUmCCA Blau #0066B2Portal/Person-Symbol
omds-browser.svgOMDS BrowserCCA Blau #0066B2Browser mit OMDS-Bezug
omds-manager.svgOMDS ManagerCCA Blau #0066B2Management/Automation

Hinweis: Fuer BOA-Bot, OMDS Browser und OMDS Manager existieren bereits Logos unter assets/logos/ - diese koennen als Basis dienen.

2. User-Typ Icons​

Pfad: assets/icons/users/

DateinameRolleFarbeBeschreibung
user.svgBenutzer (generisch)Lila #755AE8Standard-Person (vorhanden)
makler.svgMaklerLila #755AE8Versicherungsmakler
sachbearbeiter.svgSachbearbeiterCCA Blau #0066B2Interner Mitarbeiter
endkunde.svgEndkundeLila #755AE8Portal-Benutzer
vermittler.svgVermittlerLila #755AE8Vertriebspartner
admin.svgAdministratorCCA Blau #0066B2System-Admin

Existierend: user.svg in assets/icons/

3. API-Icons​

Pfad: assets/icons/apis/

DateinameAPIBeschreibung
api-generic.svgAPI (generisch)Hexagon mit "API"
api-cads.svgCADSCore Application Data Service
api-gf.svgGF-APIGeschaeftsfall-API
api-cds.svgCore-DataServicesStammdaten-Service
api-endcustomer.svgEndCustomer-APIEndkunden-Schnittstelle
api-identity.svgIdentity-APIAuthentifizierung

Vorschlag: Einheitliche Hexagon-Form mit unterschiedlichen Buchstaben/Symbolen

4. Integrations-Icons​

Pfad: assets/icons/integrations/

DateinameSystemNotizen
sharepoint-online.svgSharePoint OnlineMicrosoft 365, Cloud
sharepoint-onprem.svgSharePoint On-PremServer-Symbol
exchange-online.svgExchange OnlineE-Mail, Cloud
exchange-onprem.svgExchange On-PremE-Mail, Server
microsoft-365.svgMicrosoft 365Allgemeines M365-Symbol
vu-generic.svgVU-SchnittstelleVersicherungs-Systeme

Technische Anforderungen​

Format​

  • SVG (Scalable Vector Graphics)
  • Viewbox: 0 0 64 64 (quadratisch)
  • Keine eingebetteten Fonts (Pfade konvertieren)
  • Optimiert fuer Web (keine unnötigen Metadaten)

Farben​

Aus der TOGETHER CCA Farbpalette (assets/colors/colors.json):

FarbeHEXVerwendung
CCA Blau#0066B2CCA Produkte, Sachbearbeiter
TOGETHER Orange#FF9900TOGETHER Platform
Lavender#755AE8Externe User, Kundensysteme
Teal#31AF92Versicherungs-Systeme
Neutral Grau#999999Infrastruktur

Stil-Richtlinien​

  • Konsistente Strichstaerke (empfohlen: 2-3px bei 64x64)
  • Abgerundete Ecken (passend zu UI-Komponenten)
  • Monochrom (eine Hauptfarbe pro Icon)
  • Erkennbar bei 32x32px (nicht zu detailliert)

Ordnerstruktur​

v2/assets/icons/
├── user.svg              # vorhanden
├── README.md
├── products/             # geplant
├── users/                # geplant
├── apis/                 # geplant
└── integrations/         # geplant

Priorisierung​

  1. user.svg Varianten (users/)
  2. api-generic.svg (apis/)
  3. Produkt-Icons (products/)
  4. Integration-Icons (integrations/)

Lieferung​

  1. SVG-Dateien in die entsprechenden Ordner
  2. Kurze Abstimmung bei Unklarheiten
  3. Optional: Illustrator/Figma-Quelldateien fuer spaetere Anpassungen

Siehe auch​