Brand Book

Le système derrière le vecteur.

Un accent, une typographie précise, un espace généreux. L'identité AffVector en une page.

Logo

La marque est un vecteur.

Deux chevrons ascendants — élan et croissance, la direction que prend le trafic lorsqu'il devient revenu. Utilisez le lockup complet là où l'espace le permet ; la marque seule pour les avatars et favicons. Conservez autour un espace libre d'au moins la hauteur de la marque, et jamais en dessous de 20 px de haut.

AffVector
Lockup principal · clair
Marque seule
AffVector
Sur bleu marine
Couleur

Un accent électrique, des neutres choisis.

Un dégradé bleu→cyan est la signature — il apparaît dans la marque, la ligne d'accent supérieure, les graphiques et les icônes. Le bleu électrique mène ; un bleu plus foncé porte le texte et les boutons pour un contraste accessible ; le bleu marine profond ancre les bandes sombres. Tout le reste est un neutre froid, teinté de bleu, pour que l'accent mène toujours.

Vector Gradient
linear-gradient(115deg,#0A84FF,#00C6FF)
Signature — marque, ligne d'accent, graphiques
Electric Blue
#0A84FF
Début de l'accent de marque
Cyan
#00C6FF
Fin de l'accent de marque
Blue Ink
#0A63C4
Liens, boutons principaux, sur blanc
Navy
#0A1830
Bandes sombres, dashboard, clôture
Ink
#0B1220
Titres et texte principal
Slate
#525D75
Texte courant et secondaire
Mist
#F3F6FB
Bandes de section alternées
Typographie

SF Pro, utilisée avec intention.

La police système (SF Pro) garde le site rapide et natif sur les appareils Apple. Les graisses d'affichage sont serrées et assurées ; les chiffres utilisent toujours des chiffres tabulaires pour que les métriques s'alignent.

Display · 600 · -4%La performance qui fait bouger les revenus.
Section · 600 · -3%Conçu pour les partenaires qui scalent.
Body · 400Reporting transparent en temps réel et managers dédiés.
Data · tabular€48,250 · 50% · 1,406
Label · 600 · capsModèles de commission
Usage

Restez sobre, laissez l'accent mener.

✓ Do

  • Utilisez une seule action bleue principale par écran.
  • Donnez à la marque de l'espace libre et beaucoup de blanc.
  • Utilisez des chiffres tabulaires pour chaque nombre.
  • Gardez les neutres froids et cohérents.

✕ Don’t

  • Recolorer la marque ou lui ajouter des effets.
  • Introduire un second accent concurrent.
  • Étirer, faire pivoter ou tasser le logo.
  • Mettre le texte courant plus clair que Slate sur blanc.