Hier findest du alle Informationen zur visuellen Identität von Kompassit. Diese Richtlinien helfen dir, unsere Marke konsistent darzustellen.
Das Kompassit-Logo symbolisiert Orientierung und Sicherheit in der digitalen Welt.
Der Markenname wird immer mit kleinem "it" in Fettschrift geschrieben. Das "it" steht für "Information Technology" und verbindet den Kompass mit der digitalen Welt.
Im Code:
Kompass<strong>it</strong>Oder verwende die Komponente:
<BrandName />Verwende das vollständige Logo, wenn genug Platz vorhanden ist (min. 120px Breite).
Das Kompass-Icon eignet sich für kleine Darstellungen, Favicons oder wenn das Logo bereits bekannt ist.
Halte um das Logo herum einen Mindestabstand ein, der der Höhe des Buchstabens "K" entspricht. So bleibt das Logo immer gut sichtbar und wirkt nicht eingequetscht.
Unsere Farben sind für hohen Kontrast und gute Lesbarkeit optimiert – besonders wichtig für ältere Nutzer.
Primary
oklch(0.45 0.15 250)
#2563EB
Hauptfarbe, Buttons, Links, Logo
Background
oklch(0.99 0.005 90)
#FEFDFB
Seitenhintergrund (warmes Weiß)
Foreground
oklch(0.15 0.01 250)
#1E293B
Haupttext, Überschriften
Card
oklch(1 0 0)
#FFFFFF
Card-Hintergründe
Success
oklch(0.55 0.15 145)
#22C55E
Erfolgsmeldungen, positive Aktionen
Warning
oklch(0.7 0.15 55)
#F59E0B
Warnungen, wichtige Hinweise
Destructive
oklch(0.55 0.22 25)
#EF4444
Fehler, gefährliche Aktionen
Info
oklch(0.6 0.12 250)
#3B82F6
Informationen, Tipps
Secondary
oklch(0.95 0.02 80)
#F5F3EF
Sekundäre Buttons, Badges
Muted
oklch(0.96 0.005 90)
#F8F7F5
Dezente Hintergründe
Muted Foreground
oklch(0.45 0.01 250)
#64748B
Hilfstext, Beschreibungen
Border
oklch(0.88 0.01 250)
#E2E8F0
Ränder, Trennlinien
Wir verwenden das OKLCH-Farbformat für bessere Wahrnehmungsgleichmäßigkeit. Das bedeutet: Farben mit gleicher Helligkeit erscheinen auch wirklich gleich hell – wichtig für konsistente Kontrastverhältnisse. Die HEX-Werte sind Näherungen zur Verwendung in Tools, die OKLCH nicht unterstützen.
Unsere Schrift ist für optimale Lesbarkeit ausgewählt – auch bei eingeschränktem Sehvermögen.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
FT Regola Neue ist eine moderne, klare Schrift mit ausgezeichneter Lesbarkeit. Sie wird lokal gehostet (DSGVO-konform) und in allen Gewichten von Light (300) bis Heavy (800) verwendet.
Aa Bb Cc
Light
300 – Dezente Texte
Aa Bb Cc
Regular
400 – Fließtext
Aa Bb Cc
Medium
500 – Leichte Betonung
Aa Bb Cc
Semibold
600 – Zwischenüberschriften
Aa Bb Cc
Bold
700 – Überschriften, CTAs
Aa Bb Cc
Heavy
800 – Starke Akzente
Zeilenhöhe: 1.6
Wir verwenden eine großzügige Zeilenhöhe von 1.6 für optimale Lesbarkeit. Das schafft genug Abstand zwischen den Zeilen, damit der Text auch bei längeren Absätzen angenehm zu lesen bleibt.
Basis-Schriftgröße: 18px
Unsere Standard-Schriftgröße ist 18px – größer als üblich (16px). Nutzer können die Schriftgröße über das Barrierefreiheits-Tool zwischen 16px und 26px anpassen.
Unsere UI-Komponenten sind für Touch-Bedienung und einfache Interaktion optimiert.
Standard-Buttons
Button-Größen
Touch-Target-Größen
rounded-lg
Kleine Elemente
rounded-xl
Standard (Buttons)
rounded-2xl
Cards, große Elemente
rounded-full
Pills, Tags, Icons
Standard-Card
Cards haben eine sichtbare Border (border-2) und großzügiges Padding.
Interaktive Card
Interaktive Cards zeigen einen subtilen Hover-Effekt.
Card-Richtlinien
Kompassit ist für Menschen mit eingeschränktem Sehvermögen optimiert. Hier sind die wichtigsten Prinzipien.
Alle interaktiven Elemente haben einen deutlich sichtbaren Focus-Ring für Tastaturnavigation.
outline: 3px solid primaryoutline-offset: 2pxNutzer können die Darstellung über das Barrierefreiheits-Tool anpassen:
Kompassit strebt WCAG 2.1 Level AA Konformität an. Das bedeutet: gut lesbare Texte, ausreichende Kontraste, Tastaturnavigation und verständliche Strukturen.