Brand Book

El sistema detrás del vector.

Un acento, tipografía precisa, espacio generoso. La identidad de AffVector en una página.

Logo

La marca es un vector.

Dos galones ascendentes — impulso y crecimiento, la dirección que toma el tráfico cuando se convierte en ingresos. Usa el lockup completo donde haya espacio; la marca sola para avatares y favicons. Deja un espacio libre de al menos la altura de la marca a su alrededor y nunca por debajo de 20 px de alto.

AffVector
Lockup principal · claro
Solo la marca
AffVector
Sobre azul marino
Color

Un acento eléctrico, neutros elegidos.

Un degradado azul→cian es la firma: aparece en la marca, en la línea de acento superior, en los gráficos y en los iconos. El azul eléctrico lidera; un azul más oscuro lleva el texto y los botones para un contraste accesible; el azul marino profundo ancla las bandas oscuras. Todo lo demás es un neutro frío con matiz azul para que el acento siempre lidere.

Vector Gradient
linear-gradient(115deg,#0A84FF,#00C6FF)
Firma — marca, línea de acento, gráficos
Electric Blue
#0A84FF
Inicio del acento de marca
Cyan
#00C6FF
Fin del acento de marca
Blue Ink
#0A63C4
Enlaces, botones principales, sobre blanco
Navy
#0A1830
Bandas oscuras, panel, cierre
Ink
#0B1220
Titulares y texto principal
Slate
#525D75
Texto de cuerpo y secundario
Mist
#F3F6FB
Bandas de sección alternas
Tipografía

SF Pro, usada con intención.

La tipografía del sistema (SF Pro) mantiene el sitio rápido y nativo en los dispositivos Apple. Los pesos de display son ajustados y seguros; las cifras usan siempre numerales tabulares para que las métricas queden alineadas.

Display · 600 · -4%Rendimiento que mueve los ingresos.
Section · 600 · -3%Diseñado para socios que escalan.
Body · 400Informes transparentes en tiempo real y managers dedicados.
Data · tabular€48,250 · 50% · 1,406
Label · 600 · capsModelos de comisión
Uso

Mantenlo sobrio, deja que lidere el acento.

✓ Do

  • Usa una sola acción azul principal por pantalla.
  • Da a la marca espacio libre y mucho blanco.
  • Usa numerales tabulares para cada cifra.
  • Mantén los neutros fríos y consistentes.

✕ Don’t

  • Recolorear la marca o añadirle efectos.
  • Introducir un segundo acento que compita.
  • Estirar, rotar o apretar el logo.
  • Poner el texto de cuerpo más claro que Slate sobre blanco.