Aa
#05030FVoid
Główne tło. Ciemna scena dla postaci i światła.
--voidANIVATAR / SYSTEM WIZUALNY WWW
Brandbook.
Inteligencja nabiera charakteru.
Kolor, litera, światło i zasady, które łączą je w jeden język.
01 / ANIVATAR
Inteligencja. Z charakterem.
Anivatar nadaje technologii twarz, głos i zdolność działania. Człowiek pozostaje w centrum doświadczenia.
ZASADA NADRZĘDNA
Kontrolowane
zderzenie.
Człowiek i maszyna. Ciemność i spektralne światło. Monumentalna typografia i spokojny, czytelny opis. Każdy ekran ma jeden dominujący moment wizualny.
Alive
Obecna i reagująca.
Bold
Odważna w skali i słowie.
Intelligent
Precyzyjna i świadoma celu.
Human
Bliska człowiekowi.
Unexpected
Zaskakująca zmianą rytmu.
02 / ANIVATAR
Kolor ma swoją rolę.
Podstawowa paleta strony. Każda próbka pokazuje kolor, jego wartość HEX i zastosowanie. Nasycone akcenty prowadzą wzrok do tego, co istotne.
Aa
#0B0824Deep Space
Panele, galerie i drugoplanowe powierzchnie.
--deep-spaceAa
#F7F5FFGhost
Główny tekst na ciemnym tle.
--ghostAa
#C9C5D6Mist
Opisy, podpisy i tekst drugorzędny.
--mistAa
#7226FFElectric Violet
Tożsamość marki, energia i świetlne akcenty.
--violetAa
#F042FFHyper Magenta
Ekspresja, głos i kulminacje wizualne.
--magentaAa
#87F5F5Plasma Cyan
Główne akcje, aktywność i fokus klawiatury.
--cyanAa
#C8FF2EAcid Lime
Wyróżniony przycisk kontaktowy i akcent działania.
Akcenty i powierzchnie serwisu
Electric Blue
#225CFFGradienty nagłówków i światło scen.
Laser Blue
#00CFFFAkcent VATAR w logotypie i świetlne detale.
Ultraviolet
#3A00FFDodatkowy akcent spektralny.
Signal Blue
#245BFFModuły technologiczne i przepływy danych.
Jasna scena
#FBFDFFKontrastowa powierzchnia manifestu.
Błąd
#FF4F68Semantyczny kolor błędu, zawsze z komunikatem.
Paleta uzupełniająca z wytycznych marki: Night Indigo #160078, Soft Photon #F4F3F8, Ink #0B0913 i Solar Orange #FF5A36. To barwy do kolejnych scen i materiałów; powyżej pokazujemy podstawowe kolory aktualnej strony.
65%Tło
25%Obraz i neutralne powierzchnie
10%Akcent
03 / ANIVATAR
Trzy kroje. Jeden głos.
Fonty używane w serwisie: Space Grotesk, Manrope i Oxanium. Ich role są stałe, a skala dostosowuje się do szerokości ekranu.
01 / DISPLAY
Space Grotesk
Nagłówki, duże liczby i logotyp. Krótkie komunikaty, mocna skala, ciasny rytm. Dominująca grubość: 600.
AI, które
patrzy w oczy.
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
02 / BODY & UI
Manrope
Akapity, formularze i przyciski. Treść: 400–500. Wyróżnienia i akcje: 600–700. Spokojna interlinia i czytelność.
Technologia zaczyna się od rozmowy.
Tworzymy cyfrowe postacie, które słuchają, odpowiadają i pomagają działać. Zażółć gęślą jaźń.
Aa Bb 0123456789 · Ą Ć Ę Ł Ń Ó Ś Ź Ż
03 / TECH ACCENT
Oxanium
Indeksy, mikroetykiety, statusy i nawigacja główna. Wersaliki, rozsunięte litery, grubości 500–600.
VOICE / HUMAN / AI
SYSTEM 01—08
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
Skala jest płynna. Duże hasła zajmują scenę; akapity zachowują wygodną szerokość i interlinię około 1,6. Na telefonach nagłówki otrzymują luźniejszą interlinię, by polskie znaki pozostały w pełni widoczne. Gradient wyróżnia pojedynczy fragment hasła.
04 / ANIVATAR
Podpis marki.
Oryginalny logotyp Anivatar łączy profil człowieka z płynnym, spektralnym znakiem. Używamy wariantu jasnego lub ciemnego zależnie od tła.
Zachowuj
Jedną linię, oryginalne proporcje, czytelne tło i wolną przestrzeń wokół znaku. Używaj tego samego zapisu w nagłówku i stopce.
Unikaj
Rozciągania, zmiany kroju, przypadkowych kolorów, dodatkowych efektów i układania znaku na twarzy postaci lub intensywnym obrazie.
05 / ANIVATAR
Światło wydobywa osobowość.
Gradient działa jak źródło światła: na postaci, w halo lub w krótkim fragmencie nagłówka. Dłuższy tekst pozostaje jednolity.
Signature Spectrum
Główny gradient identyfikacji.
115° · #7226FF → #F042FF (44%) → #87F5F5Spektrum nagłówków WWW
Wariant stosowany w nagłówkach podstron.
90° · #225CFF → #F042FF → #87F5F5
Blisko człowieka.
Intencjonalne spojrzenie, bliski kadr i przestrzeń dla typografii. Dwie temperatury światła wydobywają twarz, a świetlny kontur oddziela ją od tła.
Fotorealizm i stylizacja mogą współistnieć. Spójność zapewniają kadrowanie, oświetlenie i sposób prezentacji.
Motywy: światło wokół postaci, pole głosu i linia skanu. Ikony są geometryczne i wspierają czytelną nazwę.
06 / ANIVATAR
Przestrzeń ma znaczenie.
Elastyczna siatka 12 kolumn, techniczne linie i zmienny rytm: duża scena, spokojny opis, kolejny mocny akcent.
010203040506070809101112
Margines i rytm
Na szerokich ekranach margines boczny wynosi zwykle 4% szerokości, z granicami 24–72 px. Na telefonach najczęściej 20 px. Treści i przyciski zawsze mieszczą się w bezpiecznym obszarze.
Forma i hierarchia
Pojedyncza akcja ma formę kapsuły. Wybór spośród opcji — prostokąta z ostrymi narożnikami. Ta sama zasada obowiązuje w zastosowaniach, galerii, briefie i czacie. Moduły treści pozostają płaskie, a na telefonie kolumny przechodzą w czytelną sekwencję.
07 / ANIVATAR
Działanie jest czytelne.
Każda akcja ma jasną nazwę. Kolor, obrys i ruch wzmacniają jej znaczenie, a fokus klawiatury wskazuje aktywny element.
POJEDYNCZE AKCJE / ZAOKRĄGLONE
Poznaj postacie
Akcja główna / Plasma Cyan + Void
Rozpocznij projekt
Kontakt / Acid Lime + Void
Zobacz kolory
Akcja drugorzędna / subtelny obrys
WYBÓR OPCJI / PROSTOKĄTNE
Kontrast i dostępność
Ghost i Mist na Void. Ciemny tekst na Cyan, Magenta i Lime. Jasny tekst na Electric Violet. Stan zawsze opisujemy słowem lub ikoną, również wtedy, gdy zmienia się kolor.
Ruch z intencją
Reakcja przycisku: 180 ms. Wytyczne dla wejść typografii: 450–800 ms; zmiany scen: 700–1400 ms. Ruch potwierdza działanie i zmianę stanu. Preferencja ograniczonego ruchu wyłącza zbędne animacje.
08 / ANIVATAR
Mówimy konkretnie.
Krótkie, odważne zdania. Czasowniki zamiast żargonu. Technologię opisujemy poprzez to, co daje człowiekowi.
Jedna osobowość.
Każdy kanał.
Tak brzmi Anivatar
„Historia, która odpowiada.”
„Dom, który rozumie więcej niż komendy.”
„Wiedza techniczna dokładnie tam, gdzie jest potrzebna.”
Zasada komunikacji
Wizję łączymy z zastosowaniem. Wyjaśniamy, komu pomagamy i w czym. Unikamy pustych superlatywów, nieudokumentowanych statystyk i obietnic zastąpienia ludzi.