Cuatro marcas, un solo sistema.
La referencia rápida para producir cualquier pieza del grupo: isologotipos, paletas, tipografía, íconos, componentes y medidas, con los archivos oficiales a un clic. Esta página es la fuente única: si un valor no está acá, no está aprobado.
Las marcas y qué hace cada una
Cómo conviven
Quién firma qué
Si la pieza habla de operar en el mercado de capitales, la marca operativa que figura es IOL invertironline, aunque la comunicación salga desde IOL Inversiones.
Una sola protagonista
Una marca manda por pieza. Las demás aparecen como firma, en tamaño menor y separadas por un espacio claro o una línea de 1 px.
Positivo y negativo
Las versiones en blanco son para fondos oscuros o fotos con velo. Las de color necesitan fondo blanco o muy claro: sobre color saturado pierden contraste.
Nada de mezclas
Los isologotipos no se combinan entre sí, y el isotipo de una marca jamás se pinta con el color de otra.
Tipografías
Barlow es la única familia del sistema. La jerarquía la hacen el tamaño y el peso, nunca un segundo tipo de letra.
Barlow WEB
Grotesca ligeramente condensada, de curvas redondeadas y baja altura de x. Nueve pesos con itálicas, licencia SIL Open Font.
Escala de uso
Números
Cifras tabulares en tablas, carteras y cotizaciones. Miles con punto, decimales con coma.
US$ 12.480,00
+4,72 %
Reglas rápidas
- Títulos en sentence case, sin punto final.
- Pesos 100 y 200 solo en display grande, nunca en cuerpo.
- Máximo 80 caracteres por línea en texto corrido.
- Legales en 11–12 px, nunca por debajo.
- Itálica solo para citas y notas al pie.
Iconos
El set oficial de la marca, tal como está publicado en el toolkit.
Set oficial de íconos de IOL. Este archivo es la referencia de estilo; para producción pedí los vectores a Marketing.
Íconos de interfaz
Set de trabajo para producto y landings, dibujado con las mismas reglas: 24 px, trazo 1,6, puntas redondeadas y sin relleno. Tocá cualquiera para copiar su SVG con currentColor.
Cómo se construyen
Lienzo de 24 px con 2 px de margen. El dibujo vive en los 20 px centrales y se apoya en la grilla y el círculo para que todos pesen ópticamente igual.
Tamaños
El trazo se compensa al achicar: 2 px en 16, 1,6 px en 24, 1,4 px en 32. Nunca escales un SVG sin ajustarlo.
Prohibido
- Rellenarlos o darles color de acento sin motivo funcional.
- Mezclarlos con íconos de otra librería en la misma pieza.
- Usarlos como ilustración en tamaños mayores a 48 px.
Fundamentos
grilla · espacio · motionLas decisiones invisibles: cómo se reparte el espacio, cuánto se redondea, cuánto pesa una sombra y cuánto dura una transición. Si esto es consistente, la marca se siente igual en cualquier pantalla.
Grilla
12 columnas, gutter de 24 px, ancho máximo de contenido 1200 px. En mobile baja a 4 columnas con márgenes de 16 px. Breakpoints: 480 · 768 · 1024 · 1280.
Espaciado
Base de 4 px. Todo padding, margen y gap sale de esta escala; si necesitás un valor intermedio, el problema está en otro lado.
Radios y sombras
Radios
6 en controles chicos, 10 en tarjetas, 16 en módulos grandes, 999 solo en chips y avatares.
Sombras
Siempre con tinte azulado, nunca negro puro. Nivel 3 reservado para modales y overlays.
Motion
La animación responde a una acción de la persona: abrir, confirmar, expandir. Nada se mueve solo. Si alguien tiene activado “reducir movimiento”, todo se resuelve sin transición.
Componentes
Los patrones que más se repiten en piezas y landings. Toman los tokens de IOL Inversiones, así que se actualizan solos cuando cambiás un color.
Botones
Una sola acción primaria por pantalla. El texto dice lo que pasa al tocarlo: “Abrir cuenta”, no “Enviar”.
Campos
El error explica qué pasó y cómo se arregla. Nunca “campo inválido”.
Variación de precio
La menta necesita fondo oscuro: sobre blanco no llega ni a 1,5 de contraste. Estos chips van siempre sobre superficie de marca. Suba y baja nunca se usan decorativamente: si aparecen, comunican una variación real.
Fila de cotización
| Especie | Último | Var. día | Volumen |
|---|---|---|---|
| GGAL | 7.412,00 | +2,41 % | 1.204.880 |
| AAPL (CEDEAR) | 28.950,50 | −1,07 % | 486.210 |
| AL30D | 72,35 | +0,18 % | 9.845.002 |
Avisos
Firma legal
Los rendimientos pasados no garantizan rendimientos futuros. Toda inversión implica riesgos, incluida la pérdida del capital invertido. IOL Inversiones es una marca de Portal Integral de Inversiones S.A.U.; las operaciones en el mercado de capitales se cursan a través de IOL invertironline, agente registrado ante la Comisión Nacional de Valores.
Ninguna pieza que mencione tasas, rendimientos o precios sale sin el bloque legal o sin la firma de arriba.
Fotografía
Gente real en situaciones cotidianas, luz natural, nada de sonrisas de banco de imágenes frente a gráficos verdes. La foto muestra a la persona, no al dinero. Cuando el logo va encima, siempre en blanco y sobre un velo oscuro: sin velo, el isotipo se pierde contra cualquier fondo claro.
Sí
- Luz natural y color cálido, sin sobresaturar.
- Encuadres con aire para que entre el texto.
- Diversidad real de edades y contextos argentinos.
- Velo oscuro al 45 % como mínimo cuando va el logo en blanco encima.
No
- Toros, osos, flechas verdes, lluvias de billetes.
- Pantallas con velas y gráficos genéricos de trading.
- Stock con marca de agua o rostros ya usados por competidores.
- Filtros fuertes que rompan el color de piel.
Plantillas y medidas
clic para copiarLos formatos que más se producen, a escala. Tocá cualquiera para copiar sus medidas en píxeles.
Zonas seguras
En historias, dejá 250 px libres arriba y 320 px abajo: ahí van el avatar, el nombre y la barra de respuesta. El logo va en el tercio superior, nunca pegado al borde.
Peso y formato
SVG para el logo en web, PNG cuando el sistema no acepta vectores, JPG al 80 % para fotos. Máximo 300 KB por pieza en web, 1 MB en redes.
Tono de voz
rioplatenseHablamos de vos, en presente, sin jerga innecesaria y sin prometer resultados. Explicamos el riesgo con la misma claridad con la que explicamos el beneficio.
No negociable
- Nunca garantizamos un rendimiento.
- Si mostramos una tasa o un retorno, aclaramos período, moneda y fecha del dato.
- No comparamos contra competidores por nombre.
- “Invertí” es una invitación, no una orden: no presionamos con urgencia falsa.
Antes de publicar
0 de 11Once preguntas que evitan el 90 % de las correcciones de último momento.
Archivos
Todos los assets de las cuatro marcas en una sola grilla, con su formato y su URL. El SVG es la opción por defecto: es vectorial, escala sin perder calidad y sirve tanto para pantalla como para imprenta. Cuando el sistema no acepta vectores, elegí el PNG según el destino: RGB para pantalla, CMYK para imprenta.
Enlaces
Todos los tokens
¿Falta algo o hay un valor desactualizado? Avisá a Marketing antes de improvisar una solución en la pieza.