InnvoiceBrand Identity
Guía completa de identidad visual para mantener consistencia en todas las aplicaciones de la marca Innvoice.
Logo
El logo de Innvoice utiliza la tipografía Montserrat en peso Regular (400). Disponible en múltiples variantes para diferentes contextos.
Logo Principal
Isotipo (Favicon)
Para espacios reducidos, iconos y favicons
Logotipo (Solo texto)
Tipografía Montserrat Regular
Tipografía
Montserrat
Regular (400)
Color Principal
#0044d7
Electric Blue
Área de respeto
1x altura
Mínimo alrededor
Tamaño mínimo
80px
Ancho mínimo digital
Mascota
Personaje de marca para comunicaciones amigables y CTAs
Facturin
La mascota de Innvoice representa cercanía y confianza. Se usa principalmente en secciones de llamada a la acción y comunicaciones directas con el usuario.
- Usar en CTAs y mensajes de bienvenida
- Versión "Error" para páginas de error (404, 500, etc.)
- Mantener proporciones originales
Uso correcto vs incorrecto
Colores
Paleta de colores diseñada para transmitir confianza, profesionalismo y modernidad. Haz clic en cualquier color para copiar su valor.
Colores Primarios
El azul eléctrico es el color principal de la marca. El negro se usa para el logotipo.
--color-primary--color-primary-light--color-primary-dark--color-blackEscala de Grises
Usados para textos, fondos y elementos de UI. Mantienen legibilidad y jerarquía visual.
--color-white--color-gray-100--color-gray-400--color-gray-800Colores Semánticos
Usados para feedback de estados: éxito, advertencia y error.
--color-success--color-warning--color-errorGradientes
linear-gradient(180deg, #fff 0%, #eef1fa 50%, #e8ecf8 100%)linear-gradient(135deg, #0044d7 0%, #1a5ce8 50%, #3a7bff 100%)Tipografía
Sistema tipográfico con dos familias: Montserrat para todo el contenido y JetBrains Mono para código y datos.
Montserrat
Tipografía geométrica sans-serif usada para el logotipo y todo el contenido web. Su forma limpia y moderna transmite profesionalismo y confianza.
JetBrains Mono
Tipografía monoespaciada para código, precios, números y datos técnicos. Diseñada para máxima legibilidad en pantalla.
const invoice = new Invoice()RUC: 20123456789F001-00001234Escala Tipográfica
Espaciado, Radios y Sombras
Sistema de espaciado consistente basado en múltiplos de 4px para mantener ritmo visual y armonía en todos los componentes.
Espaciado
--space-xs0.25rem4px--space-sm0.5rem8px--space-md1rem16px--space-lg1.5rem24px--space-xl2rem32px--space-2xl3rem48px--space-3xl4rem64px--space-4xl6rem96px--space-5xl8rem128pxBorder Radius
--radius-sm6px--radius-md10px--radius-lg16px--radius-xl24px--radius-full9999pxSombras
--shadow-sm0 1px 3px rgba(0, 0, 0, 0.06)--shadow-md0 4px 16px rgba(0, 0, 0, 0.08)--shadow-lg0 8px 32px rgba(0, 0, 0, 0.1)--shadow-card0 2px 12px rgba(0, 68, 215, 0.06)--shadow-card-hover0 8px 30px rgba(0, 68, 215, 0.12)Componentes UI
Ejemplos de componentes de interfaz que siguen las guías de marca. Estos son referencias visuales, no código de producción.
