Hanova Consulting

Design System

La fuente única de verdad para todas las decisiones de marca, UI y comunicación visual de Hanova. Tokens, componentes y guías de uso para equipos internos y proyectos de cliente.

Fuente: Poppins Stack: React + TypeScript Tokens: CSS Custom Properties Iconos: Streamline Ultimate

01 — Fundamentos

Paleta de colores

Cuatro colores con nombre propio. Cada uno representa un valor de marca. No usar variantes o combinaciones fuera de esta paleta.

Conexión

#1D53A4

RGB 29, 83, 164
HSB 216° 82% 64% · CMYK 97, 74, 0, 0

--color-conexion

Compromiso

#192B57

RGB 25, 43, 87
HSB 223° 71% 34% · CMYK 100, 90, 36, 30

--color-compromiso

Claridad

#EEEEF5

RGB 238, 238, 245
HSB 240° 3% 96% · CMYK 5, 4, 0, 0

--color-claridad

Impulso

#DC7549

RGB 220, 117, 73
HSB 18° 67% 86% · CMYK 3, 71, 85, 0

--color-impulso

02 — Fundamentos

Tipografía

Poppins en todos los pesos. La jerarquía se construye a través de tamaño y peso, no decoración.

Poppins

Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700

google.com/fonts/specimen/Poppins

Display

72px · Bold 700

Hanova

60px · Bold 700

Transformación digital

48px · SemiBold 600

Consultoría estratégica

36px · SemiBold 600

Nuestros servicios

28px · SemiBold 600

Implementación Odoo

Subtitle

22px · Medium 500

Estrategia de datos empresariales

Body LG

18px · Regular 400

Diseñamos el futuro digital de las empresas creando estrategias y soluciones para la transformación.

Body

16px · Regular 400

Para 2030, ser referente en la creación de estrategias digitales, reconocidos por liderar la transformación y eficiencia de nuestros clientes.

Small

14px · Light 300

Servicios de consultoría en transformación digital

Caption

12px · Light 300

hanova.mx · México · Agencia consultora

Label

12px · SemiBold · Caps

Transformación digital

03 — Marca

Logotipos

Variantes oficiales del isologotipo. No modificar colores, proporciones ni posición relativa del isotipo y wordmark.

Isologo principal

Uso preferente · fondos blancos y Claridad

↓ SVG

Versión blanca

Fondos oscuros · Compromiso · fotografía

↓ SVG

Sin "Consulting"

Uso interno · espacios reducidos

↓ SVG

Isotipo

Avatar · favicon · app icon

↓ SVG

Usos incorrectos

No usar otros colores No reacomodar el isologo No cambiar proporciones No reacomodar el isotipo

Exportar combinaciones — PNG

04 — Marca

Elementos gráficos

Degradados y texturas oficiales de la marca. Archivos SVG originales en assets/gradients/ y assets/textures/.

Degradados

Degradado azul

assets/gradients/degradado-azul.svg

Degradado naranja

assets/gradients/degradado-naranja.svg

Texturas

Trama Azul Compromiso

assets/textures/trama-compromiso.svg

Trama Azul Conexión

assets/textures/trama-conexion.svg

Trama Blanco Claridad

assets/textures/trama-claridad.svg

05 — Marca

Iconografía

Iconos de Streamline Ultimate (stroke, color Conexión). +79 iconos en assets/icons/.

06 — Componentes

Botones

Cinco variantes de botón. Primary para la acción principal, Accent como CTA secundario de alto impacto.

Variantes

Tamaños

Con iconos

Estado deshabilitado

07 — Componentes

Badges

Etiquetas de estado y categoría. Siempre con radio full (pill). Usar dot para indicadores de estado activo.

Marca

Primary Dark Accent Surface

Estado

Activo Pendiente Error

Sin dot

Consultoría Transformación digital Odoo v1.0

08 — Componentes

Tarjetas

Tres variantes principales: default, gradient azul y gradient naranja. Las variantes degradado son para CTAs y destacados.

Implementación ERP

Desplegamos y personalizamos Odoo para optimizar los procesos operativos de tu empresa.

6-12 semanas Ver servicio

Estrategia de datos

Arquitectura de datos y KPIs para impulsar decisiones basadas en información real.

Desde 2 semanas Conocer más

Programa de innovación

Acelera la adopción tecnológica con metodologías probadas y acompañamiento continuo.

3-6 meses Ver programa

09 — Guías

Reglas de uso

Principios que garantizan coherencia visual en todos los materiales de Hanova.

Correcto

+Usar solo los 4 colores de la paleta oficial

+Poppins como única familia tipográfica

+Jerarquía clara: un heading principal por vista

+Conexión (#1D53A4) como color primario de UI

+Impulso solo para CTAs y acentos selectivos

+Espaciado consistente en múltiplos de 4px

+Iconos Streamline Ultimate en azul Conexión

Incorrecto

×Colores fuera de la paleta (cyan, verde, etc.)

×Cambiar pesos del logo o texto del isotipo

×Usar gradiente en texto (background-clip: text)

×Negro puro (#000000) en fondos o texto

×Más de dos fuentes en una misma pieza

×Abusar de Impulso como color principal de UI

×Iconos de otras librerías (Heroicons, Lucide, etc.)