Zum Hauptinhalt springen
teamspace
Termin vereinbaren

Homepage-Design

Icons und Farben im Überblick

Interne Referenz: Welche Farbe und welches Icon gehört zu welcher Branche, welchem Prozess und welchem Modul. Hilft beim konsistenten Einsatz über alle Seiten und Hero-Grafiken hinweg.

Farbskalen

Fünf Farbräume: ts bündelt die Marken-Identität (Orange · Blau) in 2 / 4 / 6 Stufen — pro Identitätsfarbe ein Link-tauglicher Begleiter (Eyebrow/Link-Text) und in ts3 zusätzlich eine hellere Hover-Stufe. A in Grüntönen und B in Blautönen — je in 9 / 6 / 4 Stufen —, C als Grün-Blau-Sequenz analog zu den sieben Prozessen in 7 / 5 / 3 Stufen, und D erweitert C um warme Töne (Rot · Orange · Amber) in 9 / 6 / 3 Stufen. Jedes Feld ist über seine Position adressierbar, z. B. B1-2 = zweiter Block in Skala B1.

Skala ts1
ts1-1
ts1-2
Skala ts2
ts2-1
ts2-2
ts2-3
ts2-4
Skala ts3
ts3-1
ts3-2
ts3-3
ts3-4
ts3-5
ts3-6
Skala A1
A1-1
A1-2
A1-3
A1-4
A1-5
A1-6
A1-7
A1-8
A1-9
Skala A2
A2-1
A2-2
A2-3
A2-4
A2-5
A2-6
Skala A3
A3-1
A3-2
A3-3
A3-4
Skala B1
B1-1
B1-2
B1-3
B1-4
B1-5
B1-6
B1-7
B1-8
B1-9
Skala B2
B2-1
B2-2
B2-3
B2-4
B2-5
B2-6
Skala B3
B3-1
B3-2
B3-3
B3-4
Skala C1
C1-1
C1-2
C1-3
C1-4
C1-5
C1-6
C1-7
Skala C2
C2-1
C2-2
C2-3
C2-4
C2-5
Skala C3
C3-1
C3-2
C3-3
Skala D1
D1-1
D1-2
D1-3
D1-4
D1-5
D1-6
D1-7
D1-8
D1-9
Skala D2
D2-1
D2-2
D2-3
D2-4
D2-5
D2-6
Skala D3
D3-1
D3-2
D3-3

6 Branchen

Blue-to-Green-Spektrum für die Branchen-Häuser (AudienceCards & SolutionsHub).

Unternehmensberatungen
#5DA9CE brand clipboard
IT-Dienstleister
#3D7AB0 emerald gear
IT-Beratung
#1F3B66 sky terminal
IT-Systemhaus
#708BAA violet server
Agenturen
#7BB948 rose megaphone
Architektur · Ingenieure
#B0C840 amber building

7 Prozesse

Akzent-Paletten der sieben Kernprozesse (ProcessHub & FeatureGrid-Prozess-Karten).

01
Vertriebsprozess
#9CB853 olive sales
02
Projektabwicklung
#6F9542 forest project
03
Abrechnungsprozess
#5B9BD5 sky invoice
04
Kostensteuerung
#2E5A92 indigo wallet
05
Kundenbetreuung
#C5D175 lime support
06
Mitarbeiterprozess
#9DA968 sage users
07
Unternehmenssteuerung
#2E4E80 navy dashboard

9 Module

Pastell-Akzente der neun Module (ModuleHub & FeatureGrid-Funktionen-Karten).

Zeiterfassung
#2E4E80 process-navy clock
Projektmanagement
#2E5A92 process-indigo project
Rechnungssoftware
#6F9542 process-forest invoice
CRM
#FFCA28 sunshine users
Service Desk
#C0CA33 lime support
Teamwork
#9CCC65 apple chat
HR-Software
#26C6DA turquoise heart
Arbeitsplatzmanagement
#29B6F6 sky building
Qualitätsmanagement
#5C6BC0 cobalt check

8 Kennzahlen

Beispiel-KPIs als Lupe mit individuellem Icon. Farben aus der Prozess-Palette — jede Kennzahl gehört visuell zu dem Prozess, der sie verantwortet.

Pipelinewert
#9CB853 olive · Vertrieb sales
Auftragseingang
#6F9542 forest · Projekt check
Umsatz
#5B9BD5 sky · Abrechnung invoice
Marge
#2E5A92 indigo · Kostensteuerung dashboard
Kundenzufriedenheit
#C5D175 lime · Kundenbetreuung heart
Auslastung
#9DA968 sage · Mitarbeiter users
Forecast
#2E4E80 navy · Unternehmen dashboard
Liquidität
#9CB853 olive · Vertrieb wallet

6 Stärken

Was teamspace als Plattform auszeichnet. Schild-Form für Verlässlichkeit, Farben in einer Sequenz aus der Prozess-Palette (navy → indigo → sky → forest → olive → lime).

Ein Datenstamm
#2E4E80 process-navy project
Modulare Architektur
#2E5A92 process-indigo gear
Tagesaktuelles Reporting
#5B9BD5 process-sky dashboard
ISO-27001 · Frankfurt
#6F9542 process-forest server
DSGVO & GoBD ready
#9CB853 process-olive heart
Made in Germany
#C5D175 process-lime building

6 Anforderungen

Standard-Anforderungen an Business-Software, die teamspace erfüllt. Siegel-Form (Stempel mit zwölf Bögen) als Symbol für „erfüllt / zertifiziert", Icon im Zentrum benennt die jeweilige Anforderung. Farben in einer Sequenz aus der Prozess-Palette von hellem Grün zu dunklem Blau (lime → olive → forest → sky → indigo → navy) — gespiegelte Reihenfolge zur Stärken-Sequenz.

Mehrsprachigkeit
#C5D175 process-lime chat
API-Schnittstellen
#9CB853 process-olive terminal
Single Sign-On
#6F9542 process-forest gear
Audit-Trail
#5B9BD5 process-sky clipboard
ISO 27001 zertifiziert
#2E5A92 process-indigo server
DSGVO-konform
#2E4E80 process-navy heart

6 Checks

Qualitäts- und Kontroll-Checks, die teamspace bei der Datenführung laufend prüft. Form: Task-Karte (abgerundetes Rechteck) mit einem Check-Badge in der oberen rechten Ecke — der Haken zeigt „geprüft / ok", das Icon im Karten-Zentrum benennt den konkreten Check. Farben in der Stärken-Sequenz aus der Prozess-Palette (navy → indigo → sky → forest → olive → lime).

Vollständigkeit
#2E4E80 process-navy clipboard
Plausibilität
#2E5A92 process-indigo check
Vier-Augen-Prinzip
#5B9BD5 process-sky users
Berechtigungen
#6F9542 process-forest gear
Backup-Status
#9CB853 process-olive server
Aktualität
#C5D175 process-lime clock

Wofür diese Seite

Diese Seite zeigt drei wiederkehrende Bausteine des teamspace-Designs in einer Übersicht:

  1. Sechs Branchen (Audience-Karten auf /loesungen/ und im Hero SolutionsHub.astro)
  2. Sieben Prozesse (Prozess-Karten auf /prozesse/ und im Hero ProcessHub.astro)
  3. Neun Module (Funktionen-Karten auf /funktionen/ und im Hero ModuleHub.astro)

Pro Eintrag werden Icon, Hex-Farbe, interner Paletten-Name und Icon-Key aufgelistet — alle vier sind die Werte, die in den jeweiligen Astro-Komponenten gepflegt sind.

Wo liegen die Quellen?

BereichStroke / FillKomponente
BranchenaccentStrokesrc/components/AudienceCards.astro
Branchen (Hero)branchHouseFillsrc/components/SolutionsHub.astro
Prozesseaccents (dark)src/components/ProcessHub.astro
Prozesse (Karten)processIconBgsrc/components/FeatureGrid.astro
Moduleaccents (icon)src/components/ModuleHub.astro

Wenn dort eine Farbe oder ein Icon geändert wird, muss diese Übersicht manuell nachgezogen werden (in src/components/DesignReference.astro).

Wie wird die Seite eingebunden?

Über den eigenen Section-Typ design_reference, der in src/pages/[...slug].astro registriert ist und die Komponente DesignReference rendert. Die Markdown-Datei hat noindex: true im Frontmatter, damit Google die Seite nicht in den Suchindex aufnimmt. Auch die interne Suche überspringt Seiten mit noindex (src/pages/search-index.json.ts).