Brand Book

Sistemul din spatele vectorului.

Un accent, tipografie precisă, spațiu generos. Identitatea AffVector pe o pagină.

Logo

Marca este un vector.

Două chevroane ascendente — avânt și creștere, direcția pe care o ia traficul când devine venit. Folosește logoul complet acolo unde spațiul permite; doar marca pentru avataruri și favicon. Păstrează în jur un spațiu liber de cel puțin înălțimea mărcii și nu coborî niciodată sub 20 px înălțime.

AffVector
Logo principal · deschis
Doar marca
AffVector
Pe bleumarin
Culoare

Un accent electric, neutre alese cu grijă.

Un gradient albastru→cyan este semnătura — apare în marcă, în linia de accent de sus, în grafice și în casetele de iconuri. Albastrul electric conduce; un albastru mai închis susține textul și butoanele pentru un contrast accesibil; bleumarinul profund ancorează benzile întunecate. Restul este un neutru rece, cu tentă de albastru, ca accentul să conducă mereu.

Vector Gradient
linear-gradient(115deg,#0A84FF,#00C6FF)
Semnătură — marcă, linie de accent, grafice
Electric Blue
#0A84FF
Începutul accentului de brand
Cyan
#00C6FF
Sfârșitul accentului de brand
Blue Ink
#0A63C4
Linkuri, butoane principale, pe alb
Navy
#0A1830
Benzi întunecate, dashboard, final
Ink
#0B1220
Titluri și text principal
Slate
#525D75
Text de bază și secundar
Mist
#F3F6FB
Benzi de secțiune alternante
Tipografie

SF Pro, folosit cu intenție.

Fontul de sistem (SF Pro) menține site-ul rapid și nativ pe dispozitivele Apple. Greutățile pentru titluri sunt strânse și sigure; cifrele folosesc mereu numerale tabulare, ca metricile să se alinieze.

Display · 600 · -4%Performanță care mișcă venitul.
Section · 600 · -3%Construit pentru parteneri care scalează.
Body · 400Raportare transparentă în timp real și manageri dedicați.
Data · tabular€48,250 · 50% · 1,406
Label · 600 · capsModele de comision
Utilizare

Păstrează-l discret, lasă accentul să conducă.

✓ Do

  • Folosește o singură acțiune albastră principală pe ecran.
  • Oferă mărcii spațiu liber și mult alb.
  • Folosește numerale tabulare pentru fiecare cifră.
  • Păstrează neutrele reci și consecvente.

✕ Don’t

  • Să recolorezi marca sau să îi adaugi efecte.
  • Să introduci un al doilea accent concurent.
  • Să întinzi, să rotești sau să înghesui logoul.
  • Să setezi textul mai deschis decât Slate pe alb.