GUÍA DE MARCA / 2025

Nuestra marca
Identidad

Una guía integral de nuestra identidad visual, que garantiza consistencia, reconocimiento y impacto en todos los puntos de contacto.

Guía viva

Versión 2.0

ELEMENTOS CLAVE

Sistema de identidad visual

Logo • Colores • Tipografía • Composición

PRINCIPIOS

ConsistenciaReconocimientoClaridadImpactoFlexibilidad

Guía del logo

BASE DE LA IDENTIDAD

Aplicaciones

Prioriza siempre el uso del logo en nuestro color de marca principal. Esto garantiza el máximo reconocimiento e impacto en todas las aplicaciones.

Principal

Espacio de seguridad

Mantén un área de respiro adecuada alrededor del logo para garantizar una visibilidad e impacto óptimos. El espacio mínimo de seguridad equivale a la altura de nuestro logotipo tipográfico.

No hacer

Crímenes del logo

Protege la integridad de nuestra marca evitando estos usos indebidos comunes del logo.

Excepto para avatares de plataformas digitales, no usar el ícono sin texto.

No usar el logo verde en fondos oscuros sin contraste adecuado.

No usar el logo sin su espacio de seguridad requerido.

Evitar usar el logo en negro sólido, mantener colores originales.

No aplicar el ícono en posición vertical o rotada.

No usar el ícono como textura o patrón repetitivo.

No aplicar dentro de formas geométricas como círculos u óvalos.

Nunca distorsionar las proporciones o estirar el logo.

Nunca rotar el logo en ángulos no estándar.

Nunca usar la versión de contorno o outline del logo.

talo

Nunca reposicionar o separar los elementos del logo.

No aplicar efectos como sombras, brillos, biseles o relieves.

Paleta de colores

SISTEMA CROMÁTICO

Colores principales

Base de la identidad

Cuando otros dicen no, el verde dice sí. Es energético y vibrante, como el mundo en el que vivimos. Es nuestro color principal, respaldado por una paleta secundaria viva.

#9FE870

Verde brillante

HEX #9FE870

RGB 159, 232, 112

CMYK 47, 0, 72, 0

PANTONE 7487

Color de marca principal para elementos interactivos y acentos

#163300

Verde bosque

HEX #163300

RGB 22, 51, 0

CMYK 54, 0, 100, 80

PANTONE 2411

Color secundario para textos y elementos de contraste

#FAFAFA

Blanco con tinte

HEX #FAFAFA

RGB 255, 255, 255

Base neutra con sutil calidez de marca

Colores secundarios

Paleta global

Siendo el negocio ágil que somos, nuestra paleta secundaria está inspirada en los colores vibrantes y energéticos que trasmiten flexibilidad y agilidad.

Naranja brillante

#FFC091

Amarillo brillante

#FFEB69

Azul brillante

#A0E1E1

Rosa brillante

#FFD7EF

Púrpura oscuro

#260A2F

Oro oscuro

#3A341C

Carbón oscuro

#21231D

Granate oscuro

#320707

Uso de colores secundarios

Siempre comienza y termina con verde. Es nuestra primera impresión y nuestro hasta luego. Introduce la paleta secundaria cuando el verde esté bien establecido.

Colores de producto

Sistema funcional

Colores de contenido

Basados en grises neutros con un pequeño porcentaje de verde. Esto crea una jerarquía visual clara y accesible, y nos hace distintivos añadiendo toques de nuestros colores de marca.

Contenido primario

#0E0F0C

Enfatizar contenido principal

Contenido secundario

#454745

Texto de cuerpo y elementos de apoyo

Contenido terciario

#6A6C6A

Placeholders y etiquetas opcionales

Enlaces

#163300

Enlaces e íconos de enlace externo

Colores interactivos

Usados en componentes interactivos e íconos. Los colores primarios y de acento usan los colores principales de marca para destacar.

Interactivo primario

#163300

Elementos interactivos neutros

Interactivo acento

#9FE870

Botones primarios

Interactivo secundario

#868685

Bordes de inputs

Control interactivo

#163300

Texto en superficies verdes

Contraste interactivo

#9FE870

Visibilidad en modo oscuro

Colores de sentimiento

Usados para indicar estados positivos, negativos o de advertencia en componentes como alertas y mensajes de error.

Negativo

#A8200D

Estados de error o acciones destructivas

Positivo

#2F5711

Alertas positivas y confirmaciones

Advertencia

#EDC843

Solo como color de fondo

Balance cromático

No tenemos miedo al espacio en blanco. El blanco es el color más prominente en nuestra UI y lo usamos para que las pantallas respiren.

Blanco (dominante)

Neutros

Verde bosque

Verde brillante (acento)

Tipografía

SISTEMA TIPOGRÁFICO

Enfoque

Legibilidad y accesibilidad

Nuestro sistema tipográfico está construido sobre la legibilidad y accesibilidad. Utilizamos Inter como nuestra tipografía principal para garantizar claridad y funcionalidad en todas las aplicaciones.

Inter

Usa Inter para todas las aplicaciones. Es limpia, legible y funcional tanto en títulos como en texto de cuerpo. Su versatilidad la convierte en la elección perfecta para mantener consistencia tipográfica.

Estilos de texto

Jerarquía tipográfica Inter

Estilos de Título

Título de Pantalla

Inter

Semi bold 30px

Línea 34px

Espaciado -2.5%

Título Principal

Usado para el título principal de pantalla, debe usarse solo una vez por pantalla. Se empareja con cuerpo grande.

Título de Sección

Inter

Semi bold 26px

Línea 32px

Espaciado -1.5%

Título de Sección

Útil para dividir tu pantalla en secciones. Se empareja perfectamente con cuerpo grande.

Título de Subsección

Inter

Semi bold 22px

Línea 28px

Espaciado -1.5%

Título de Subsección

Diseñado para secciones dentro de secciones para aumentar la jerarquía de información.

Título de Cuerpo

Inter

Semi bold 18px

Línea 24px

Espaciado -1%

Título de Cuerpo

Perfecto para grandes cantidades de contenido. Se empareja con cuerpo grande y cuerpo por defecto.

Título de Grupo

Inter

Medium 14px

Línea 20px

Espaciado 1.5%

Título de Grupo

Para agrupar elementos relacionados.