Aa
#05030FVoid
Haupthintergrund: eine dunkle Bühne für Figur und Licht.
--voidANIVATAR / VISUELLES SYSTEM DER WEBSITE
Brandbook.
Intelligenz bekommt Charakter.
Farbe, Schrift, Licht und Regeln, die alles zu einer gemeinsamen Sprache verbinden.
01 / ANIVATAR
Intelligenz. Mit Charakter.
Anivatar gibt Technologie ein Gesicht, eine Stimme und die Fähigkeit zu handeln. Der Mensch bleibt im Mittelpunkt des Erlebnisses.
LEITPRINZIP
Kontrollierte
Kontraste.
Mensch und Maschine. Dunkelheit und spektrales Licht. Monumentale Typografie und ruhige, gut lesbare Beschreibungen. Jeder Bildschirm hat einen dominanten visuellen Moment.
Alive
Präsent und reaktionsfähig.
Bold
Mutig in Maßstab und Sprache.
Intelligent
Präzise und zielbewusst.
Human
Nah am Menschen.
Unexpected
Überraschend durch einen Rhythmuswechsel.
02 / ANIVATAR
Die Farbe spielt eine Rolle.
Die Grundpalette der Website. Jedes Farbfeld zeigt eine Farbe, ihren HEX-Wert und ihre Verwendung. Kräftige Akzente lenken den Blick auf das Wesentliche.
Aa
#0B0824Deep Space
Paneele, Galerien und untergeordnete Flächen.
--deep-spaceAa
#F7F5FFGhost
Haupttext auf dunklem Hintergrund.
--ghostAa
#C9C5D6Mist
Beschreibungen, Bildunterschriften und untergeordneter Text.
--mistAa
#7226FFElectric Violet
Markenidentität, Energie und Lichtakzente.
--violetAa
#F042FFHyper Magenta
Ausdruck, Stimme und visuelle Höhepunkte.
--magentaAa
#87F5F5Plasma Cyan
Hauptaktionen, aktive Zustände und Tastaturfokus.
--cyanAa
#C8FF2EAcid Lime
Ein hervorgehobener Kontaktbutton und ein Akzent für Handlungsaufforderungen.
Akzente und Flächen der Website
Electric Blue
#225CFFFarbverläufe für Überschriften und Licht für Szenen.
Laser Blue
#00CFFFDer Akzent VATAR im Logo und leuchtende Details.
Ultraviolet
#3A00FFEin zusätzlicher Spektralakzent.
Signal Blue
#245BFFTechnologische Module und Datenflüsse.
Helle Bühne
#FBFDFFEine kontrastreiche Fläche für das Manifest.
Fehler
#FF4F68Eine semantische Fehlerfarbe, immer zusammen mit einer Meldung.
Ergänzende Farben aus den Markenrichtlinien: Night Indigo #160078, Soft Photon #F4F3F8, Ink #0B0913 und Solar Orange #FF5A36. Diese Farben sind für weitere Szenen und Materialien vorgesehen; oben sehen Sie die Grundfarben der aktuellen Website.
65%Hintergrund
25%Bilder und neutrale Flächen
10%Akzent
03 / ANIVATAR
Drei Schriften. Eine Stimme.
Die Website verwendet Space Grotesk, Manrope und Oxanium. Jede Schrift hat eine feste Aufgabe; ihre Größe passt sich der Bildschirmbreite an.
01 / DISPLAY
Space Grotesk
Überschriften, große Zahlen und Logo. Kurze Aussagen, starke Größenkontraste und ein dichter Rhythmus. Vorwiegende Schriftstärke: 600.
KI, die
in die Augen blickt.
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
02 / BODY & UI
Manrope
Absätze, Formulare und Buttons. Fließtext: Schriftstärken 400–500. Hervorhebungen und Aktionen: 600–700. Großzügiger Zeilenabstand und gute Lesbarkeit.
Technologie beginnt mit einem Gespräch.
Wir entwickeln digitale Figuren, die zuhören, antworten und beim Handeln helfen. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Aa Bb 0123456789 · Ä Ö Ü ẞ
03 / TECH-AKZENT
Oxanium
Indizes, kleine Labels, Statusanzeigen und Hauptnavigation. Großbuchstaben, größerer Zeichenabstand und Schriftstärken von 500–600.
STIMME / MENSCH / KI
System 01 - 08
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
Die Schriftgrößen passen sich fließend an. Große Botschaften füllen die Bühne; Absätze behalten eine angenehme Breite und einen Zeilenabstand von etwa 1,6. Auf Smartphones erhalten Überschriften mehr Zeilenabstand, damit polnische Sonderzeichen vollständig sichtbar bleiben. Ein Farbverlauf hebt nur einen kurzen Teil der Aussage hervor.
04 / ANIVATAR
Die Markensignatur.
Das Original-Logo von Anivatar verbindet ein menschliches Profil mit einem fließenden, spektralen Zeichen. Je nach Hintergrund verwenden wir die helle oder die dunkle Variante.
Bewahren
Lassen Sie das Logo in einer Zeile stehen, bewahren Sie seine Proportionen und sorgen Sie für einen gut lesbaren Hintergrund sowie Freiraum um das Zeichen. Verwenden Sie im Kopf- und Fußbereich dieselbe Schreibweise.
Vermeiden
Vermeiden Sie Verzerrungen, Schriftwechsel, beliebige Farben und zusätzliche Effekte. Platzieren Sie das Zeichen weder auf dem Gesicht einer Figur noch auf einem unruhigen Bild.
05 / ANIVATAR
Licht bringt Persönlichkeit zum Vorschein.
Der Farbverlauf wirkt wie eine Lichtquelle: auf der Figur, als Halo oder in einem kurzen Teil der Überschrift. Längere Texte bleiben einfarbig.
Signature Spectrum
Der wichtigste Farbverlauf der Markenidentität.
115° · #7226FF → #F042FF (44%) → #87F5F5Farbspektrum für Website-Überschriften
Eine Variante für Überschriften auf Unterseiten.
90° · #225CFF → #F042FF → #87F5F5
Nah am Menschen.
Ein gezielter Blick, eine nahe Einstellung und Raum für Typografie. Zwei Lichttemperaturen betonen das Gesicht; ein Lichtsaum hebt es vom Hintergrund ab.
Fotorealismus und Stilisierung können nebeneinander bestehen. Bildausschnitt, Beleuchtung und Präsentation sorgen für Einheitlichkeit.
Zu den Motiven gehören Licht um die Figur, das Stimmfeld und die Scanlinie. Geometrische Icons unterstützen klare Beschriftungen.
06 / ANIVATAR
Der Raum ist wichtig.
Ein flexibles Raster mit zwölf Spalten, technische Linien und ein wechselnder Rhythmus: eine große Bühne, eine ruhige Beschreibung und der nächste starke Akzent.
010203040506070809101112
Ränder und Rhythmus
Auf breiten Bildschirmen beträgt der seitliche Rand in der Regel 4 % der Breite, begrenzt auf 24–72 px. Auf Smartphones sind es meist 20 px. Inhalte und Buttons bleiben stets innerhalb des sicheren Bereichs.
Form und Hierarchie
Eine einzelne Aktion erscheint als abgerundeter Button. Die Auswahl zwischen Optionen nutzt Rechtecke mit geraden Ecken. Diese Regel gilt auch für Anwendungsfälle, Galerie, Briefing und Chat. Inhaltsmodule bleiben flach; auf Smartphones werden Spalten zu einer gut lesbaren Abfolge.
07 / ANIVATAR
Aktionen sind klar erkennbar.
Jede Aktion ist klar benannt. Farbe, Kontur und Bewegung unterstreichen ihre Bedeutung; der Tastaturfokus kennzeichnet das aktive Element.
EINZELNE AKTIONEN / ABGERUNDET
Figuren kennenlernen
Hauptaktion / Plasma Cyan + Void
Projekt starten
Kontakt / Acid Lime + Void
Farben ansehen
Nebenaktion / dezente Kontur
OPTIONSAUSWAHL / RECHTECKIG
Kontrast und Barrierefreiheit
Ghost und Mist auf Void. Dunkler Text auf Cyan, Magenta und Lime. Heller Text auf Electric Violet. Einen Zustand kennzeichnen wir immer auch mit einem Wort oder Icon, selbst wenn sich die Farbe ändert.
Bewegung mit Absicht
Button-Reaktion: 180 ms. Richtwerte für Texteinblendungen: 450–800 ms; für Szenenwechsel: 700–1400 ms. Bewegung bestätigt Aktionen und Zustandswechsel. Bei reduzierter Bewegung entfallen unnötige Animationen.
08 / ANIVATAR
Wir sprechen konkret.
Kurze, mutige Sätze. Verben statt Fachjargon. Wir erklären Technologie anhand dessen, was sie Menschen ermöglicht.
Eine Persönlichkeit.
Jeder Kanal.
So klingt Anivatar
„Eine Geschichte, die antwortet.“
„Ein Zuhause, das mehr versteht als Befehle.“
„Technisches Wissen genau dort, wo es gebraucht wird.“
Prinzip der Kommunikation
Wir verbinden Vision mit konkreter Anwendung. Wir erklären, wem wir wie helfen. Wir vermeiden leere Superlative, unbelegte Statistiken und Versprechen, Menschen zu ersetzen.