Brand book · v1.0

Logo & Brand Guidelines.

Le regole d’uso del marchio Quario in tutte le sue varianti. Scarica i file pronti, copia i codici colore, segui le proporzioni. Una sola identità visiva, coerente ovunque.

Il marchio

Il simbolo.

Un quadrato gradient con cuore vuoto che ospita un punto luminoso: il professionista verificato (dot) all’interno della rete (cornice gradient). Geometria, ritmo e chiarezza.

Mark · DefaultPer sfondi scuri
Mark · LightPer sfondi chiari
Mark · Mono BiancoVersione monocromatica scura
Mark · Mono NeroVersione monocromatica chiara
Il logo

Lockup orizzontale.

Mark + wordmark in lockup orizzontale: il formato primario per nav, header, materiali web e print.

Quario
Logo · DefaultWordmark chiaro su sfondo scuro
Quario
Logo · LightWordmark scuro su sfondo chiaro
Quario
Logo · Mono BiancoStampa monocromatica scura
Quario
Logo · Mono NeroStampa monocromatica chiara
Animazione

Il logo in movimento.

Il marchio ruota lentamente sul proprio asse, ma solo quando l’utente fa hover. L’animazione è un dettaglio di interazione, non un effetto continuo che distrae.

Hover spin2.4s · linear · infinite

SpecificheHover spin animation

  • Trigger:hover sul logo
  • Trasformazionerotate(360deg)
  • Durata2.4s
  • Easinglinear
  • Iterazioniinfinite (su hover)
  • Assecentro del mark
  • Wordmarkresta statico
@keyframes logoSpin {
  to { transform: rotate(360deg); }
}
.logo:hover .logo-mark {
  animation: logoSpin 2.4s linear infinite;
}
Regole d’animazione

Cosa fare, cosa evitare.

L’animazione del marchio è un microdettaglio. Lo stato di default è sempre statico.

Spin lento e lineare, solo sul mark, attivo al hover.
Idle: il logo resta statico. Niente loop continui in pagina.
Pulse leggero ammesso solo per stati attivi (notifica, live).
Niente easing elastici, bouncy o cubic-bezier estremi.
Mai sotto 1,5s di durata: distrae e dà nausea visiva.
Niente skew, scale o translate combinati alla rotazione.
Costruzione

Clear space & dimensioni minime.

Lo spazio attorno al marchio garantisce la leggibilità. Le dimensioni minime evitano la perdita di dettaglio.

Clear space

Mantieni almeno una distanza pari a X (la larghezza del punto centrale) attorno al marchio, libera da altri elementi.

Dimensioni minime

Su digitale, non scendere sotto i 24px. Per la stampa, almeno 8mm di altezza.

24px · MIN
32px
48px
64px
La palette

Colori del marchio.

Solo i colori effettivamente presenti nelle varianti del logo. Click su uno swatch per copiare il valore esadecimale.

La tipografia

I font del brand.

Tre famiglie complementari: una sans contemporanea per il sistema, una serif italica per i momenti emotivi, una mono per i dettagli tecnici.

Aa
Wordmark · Body

Plus Jakarta Sans

Il font sistema. Wordmark, headline, body, navigation. Scaricabile gratuitamente da Google Fonts.

300400500600700800
Aa
Accent · Italic

Bodoni Moda

Il font emotivo. Solo italic, usato per termini-chiave e momenti narrativi. Da Google Fonts.

400500600700800
Aa
Mono · Tech

JetBrains Mono

Il font tecnico. Numeri, codici, label uppercase, dati tabulari. Da Google Fonts.

400500700
Le regole

Cosa fare, cosa evitare.

Sei esempi che chiariscono il perimetro corretto d’uso del marchio.

Usa il marchio nelle sue proporzioni originali, su sfondo scuro.
Su sfondi chiari, usa la variante con cuore chiaro.
Un’ombra morbida o glow leggero è consentita per profondità.
Non distorcere o stretchare le proporzioni del marchio.
Non sostituire i colori del gradient con altri colori brand.
Non ruotare o inclinare il marchio fuori dall’asse orizzontale.

Scarica il pacchetto completo

Tutti i file SVG e PNG del logo in tutte le varianti, organizzati per uso (digital / print / mono).

Copiato!