Farben

Die Farben Pink und Blau sind die zentralen Elemente der Octolink-Identität und prägen das Erscheinungsbild der Marke maßgeblich. Die definierten Farbpaletten sorgen für ein konsistentes und lebendiges Design, das Octolink einzigartig macht.

Primärfarbe

Blau steht für Vertrauen, Technologie und Vernetzung. Blau dominiert in der Benutzeroberfläche und schafft einen ruhigen, professionellen Rahmen.

Blue
c=81 m=53 y=0 k=41
rgb(28,71,151)
#1c4797

Light Blue
c=79 m=51 y=0 k=18
rgb(45,103,210)
#2d67d2

Dark Blue
c=90 m=59 y=0 k=64
rgb(9,38,93)
#09265d

Die Abstufungen Light Blue und Dark Blue werden gezielt für Icons, Illustrationen, Hover-Zustände und Hintergrundelemente verwendet, um visuelle Hierarchien zu schaffen und interaktive Bereiche hervorzuheben. Helle Blautöne bringen Leichtigkeit und Frische ins Design, während dunkle Blautöne für Tiefe, Struktur und klaren Kontrast sorgen.

Akzentfarbe

Die Akzentfarbe Pink ist ein zentraler Bestandteil des Octolink-Designs und bringt lebendige Akzente in die Gestaltung. Sie wird verwendet, um wichtige Elemente wie Call-to-Actions, interaktive Bereiche und Benachrichtigungen hervorzuheben. Zusätzlich können Akzentfarben dezent in Illustrationen verwendet werden, um Details hervorzuheben und das Design lebendiger wirken zu lassen. Diese gezielte Nutzung sorgt dafür, dass Akzente stets subtil, aber wirkungsvoll zur Geltung kommen.

Pink
c=0 m=78 y=43 k=14
rgb(220,48,126)
#dc307e

Light Pink
c=0 m=53 y=29 k=0
rgb(255,119,181)
#ff77b5

Dark Pink
c=0 m=87 y=47 k=28
rgb(184,24,97)
#b81861

Light Pink ist eine helle Abstufung, die sanfte Akzente setzt und sich gut für Illustrationen, Hover-Zustände und subtile Hervorhebungen eignet. Dark Pink ist eine kräftigere Abstufung, ideal für stärkere Akzente, Details in Illustrationen oder besondere Hervorhebungen.

Graustufen

Neben den Hauptfarben Schwarz und Weiß verwendet Octolink drei zusätzliche Graustufen, um das Design zu ergänzen und visuelle Hierarchien zu unterstützen. Diese Grautöne helfen, Elemente voneinander abzugrenzen, Hintergründe subtil zu gestalten und Texte sowie UI-Komponenten klar zu strukturieren.

Grey
c=0 m=0 y=0 k=7
rgb(220,48,126)
#dc307e

Light Grey
c=0 m=0 y=0 k=2
rgb(255,119,181)
#ff77b5

Dark Grey
c=0 m=0 y=0 k=49
rgb(184,24,97)
#b81861

Grey ist ein helles Grau, dass sich hervorragend für Hintergrundflächen, Rahmen und Abgrenzungen eignet. Light Grey ist nahezu weiß und kann als sanfter Hintergrund verwendet werden. Dark Grey ist ideal für sekundäre Texte, Platzhalter und dezentere Designelemente.

Funktionsfarben

Funktionale Farben sind wichtige visuelle Hinweise im Octolink-Design und helfen dabei, Zustände, Aktionen oder Statusinformationen klar und intuitiv zu kommunizieren. Sie ergänzen die Primär-, Sekundär- und Akzentfarben und folgen universellen Farbcodes, die der Benutzer sofort versteht.

Error
c=0 m=100 y=100 k=0
rgb(255,0,0)
#ff0000

Warning
c=0 m=16 y=100 k=0
rgb(255,213,0)
#ffd500

Confirmation
c=100 m=0 y=47 k=16
rgb(0,214,114)
#00d672

Rot steht für Warnungen, Fehler oder negative Zustände wie „schlecht“. Wird für Fehlermeldungen, kritische Zustände oder dringende Hinweise eingesetzt. Gelb/Orange wird verwendet, um Warnungen oder Vorsichtsmaßnahmen anzuzeigen. Es signalisiert Aufmerksamkeit, aber noch keinen kritischen Zustand. Grün signalisiert positive Zustände wie Erfolg, Bestätigung oder „gut“. Wird beispielsweise für erfolgreiche Aktionen, Bestätigungen oder Statusanzeigen verwendet.