Aa
#05030FVoid
Sfondo principale. Una scena scura per il personaggio e la luce.
--voidANIVATAR / SISTEMA VISIVO DEL SITO WEB
Brandbook.
L’intelligenza acquista carattere.
Colore, tipografia, luce e regole che li uniscono in un unico linguaggio.
01 / ANIVATAR
Intelligenza. Con carattere.
Anivatar dà alla tecnologia un volto, una voce e la capacità di agire. Le persone restano al centro dell’esperienza.
PRINCIPIO GUIDA
Contrasto
controllato.
Essere umano e macchina. Oscurità e luce spettrale. Tipografia monumentale e descrizioni sobrie e leggibili. Ogni schermata ha un momento visivo dominante.
Alive
Presente e reattiva.
Bold
Audace nelle dimensioni e nel linguaggio.
Intelligent
Precisa e consapevole del proprio scopo.
Human
Vicina alle persone.
Unexpected
Sorprendente nei cambi di ritmo.
02 / ANIVATAR
Il colore ha un ruolo.
La palette principale del sito. Ogni campione mostra un colore, il relativo valore HEX e il suo impiego. Gli accenti intensi attirano lo sguardo sugli elementi più importanti.
Aa
#0B0824Deep Space
Pannelli, gallerie e superfici secondarie.
--deep-spaceAa
#F7F5FFGhost
Testo principale su sfondo scuro.
--ghostAa
#C9C5D6Mist
Descrizioni, didascalie e testi secondari.
--mistAa
#7226FFElectric Violet
Identità del marchio, energia e accenti luminosi.
--violetAa
#F042FFHyper Magenta
Espressività, voce e momenti visivi culminanti.
--magentaAa
#87F5F5Plasma Cyan
Azioni principali, stati attivi e focus da tastiera.
--cyanAa
#C8FF2EAcid Lime
Un pulsante di contatto in evidenza e un accento per gli inviti all’azione.
Accenti e superfici del sito
Electric Blue
#225CFFGradienti per i titoli e luce per le scene.
Laser Blue
#00CFFFL’accento VATAR nel logo e i dettagli luminosi.
Ultraviolet
#3A00FFUn ulteriore accento spettrale.
Signal Blue
#245BFFModuli tecnologici e flussi di dati.
Scena chiara
#FBFDFFUna superficie a contrasto per il manifesto.
Errore
#FF4F68Un colore semantico per gli errori, sempre accompagnato da un messaggio.
Colori complementari dalle linee guida del marchio: Night Indigo #160078, Soft Photon #F4F3F8, Ink #0B0913 e Solar Orange #FF5A36. Questi colori sono destinati a scene e materiali futuri; qui sopra sono riportati i colori principali del sito attuale.
65%Sfondo
25%Immagini e superfici neutre
10%Accento
03 / ANIVATAR
Tre caratteri tipografici. Una sola voce.
Il sito usa Space Grotesk, Manrope e Oxanium. Ognuno ha un ruolo preciso, mentre le dimensioni si adattano alla larghezza dello schermo.
01 / DISPLAY
Space Grotesk
Titoli, grandi numeri e logo. Messaggi brevi, dimensioni decise e ritmo serrato. Peso prevalente: 600.
L’IA che
ti guarda negli occhi.
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
02 / BODY & UI
Manrope
Paragrafi, moduli e pulsanti. Testo: pesi 400–500. Evidenziazioni e azioni: 600–700. Interlinea ariosa e buona leggibilità.
La tecnologia comincia dalla conversazione.
Creiamo personaggi digitali che ascoltano, rispondono e aiutano ad agire. Ma la volpe col suo balzo ha raggiunto il quieto Fido.
Aa Bb 0123456789 · À È É Ì Ò Ù
03 / ACCENTO TECNOLOGICO
Oxanium
Indici, microetichette, stati e navigazione principale. Maiuscole, lettere spaziate e pesi 500–600.
VOCE / UMANO / IA
Sistema 01 - 08
Aa Bb 0123456789
Ą Ć Ę Ł Ń Ó Ś Ź Ż · ą ć ę ł ń ó ś ź ż
La scala tipografica è fluida. I titoli grandi occupano la scena; i paragrafi mantengono una larghezza comoda e un’interlinea di circa 1,6. Sugli smartphone i titoli hanno più spazio tra le righe, così i segni diacritici polacchi restano completamente visibili. Un gradiente evidenzia solo un breve segmento del titolo.
04 / ANIVATAR
La firma del marchio.
Il logo originale di Anivatar unisce un profilo umano a un segno fluido e spettrale. Usiamo la versione chiara o scura in base allo sfondo.
Mantenere
Mantieni il logo su una sola riga, rispetta le proporzioni originali, scegli uno sfondo leggibile e lascia spazio libero intorno al segno. Usa la stessa grafia nell’intestazione e nel piè di pagina.
Evitare
Evita di deformare il logo, cambiare il carattere, usare colori casuali o effetti aggiuntivi e sovrapporre il simbolo al volto del personaggio o a un’immagine troppo carica.
05 / ANIVATAR
La luce rivela la personalità.
Il gradiente agisce come una fonte di luce: sul personaggio, in un alone o su un breve tratto del titolo. I testi più lunghi restano in tinta unita.
Signature Spectrum
Il gradiente principale dell’identità visiva.
115° · #7226FF → #F042FF (44%) → #87F5F5Spettro dei titoli del sito
Una variante usata nei titoli delle pagine interne.
90° · #225CFF → #F042FF → #87F5F5
Vicino alle persone.
Uno sguardo intenzionale, un’inquadratura ravvicinata e spazio per la tipografia. Due temperature di luce mettono in risalto il volto, mentre una luce di contorno lo separa dallo sfondo.
Fotorealismo e stilizzazione possono convivere. Inquadratura, illuminazione e presentazione assicurano coerenza.
I motivi comprendono la luce intorno al personaggio, il campo della voce e la linea di scansione. Le icone geometriche accompagnano etichette chiare.
06 / ANIVATAR
Lo spazio è importante.
Una griglia flessibile a 12 colonne, linee tecniche e un ritmo variabile: una scena ampia, una descrizione sobria, poi un nuovo accento forte.
010203040506070809101112
Margini e ritmo
Sugli schermi ampi, il margine laterale è di norma pari al 4% della larghezza, entro un minimo di 24 px e un massimo di 72 px. Sugli smartphone è generalmente di 20 px. Contenuti e pulsanti rimangono sempre nell’area sicura.
Forme e gerarchia
Una singola azione usa un pulsante a capsula. La scelta tra opzioni usa un rettangolo con angoli netti. La stessa regola vale per applicazioni, galleria, brief e chat. I moduli di contenuto restano piatti; sugli smartphone le colonne diventano una sequenza leggibile.
07 / ANIVATAR
Le azioni sono chiare.
Ogni azione ha un’etichetta chiara. Colore, contorno e movimento ne rafforzano il significato, mentre il focus da tastiera indica l’elemento attivo.
AZIONI SINGOLE / ARROTONDATE
Scopri i personaggi
Azione principale / Plasma Cyan + Void
Avvia un progetto
Contatto / Acid Lime + Void
Scopri i colori
Azione secondaria / contorno discreto
SCELTA TRA OPZIONI / RETTANGOLARE
Contrasto e accessibilità
Ghost e Mist su Void. Testo scuro su Cyan, Magenta e Lime. Testo chiaro su Electric Violet. Descriviamo sempre uno stato con una parola o un’icona, anche quando cambia il colore.
Movimento intenzionale
Risposta del pulsante: 180 ms. Tempi consigliati per l’ingresso dei testi: 450–800 ms; per i cambi di scena: 700–1400 ms. Il movimento conferma un’azione o un cambio di stato. La preferenza per il movimento ridotto disattiva le animazioni superflue.
08 / ANIVATAR
Parliamo in modo concreto.
Frasi brevi e incisive. Verbi invece del gergo. Descriviamo la tecnologia attraverso ciò che permette alle persone di fare.
Una personalità.
Ogni canale.
La voce di Anivatar
«Una storia che risponde.»
«Una casa che capisce più dei comandi.»
«Competenze tecniche proprio dove servono.»
Il principio della comunicazione
Uniamo visione e applicazione concreta. Spieghiamo chi aiutiamo e in che modo. Evitiamo superlativi vuoti, statistiche non documentate e promesse di sostituire le persone.