Logo Danuaz

DANUAZ

Design System & Brand Guidelines

Asesoría Financiera • Contabilidad • Auditoría

Empresa Dinámica, Innovadora y Confiable

Diciembre 2025

Tabla de Contenidos

  1. Identidad Visual
  2. Paleta de Colores
  3. Contrastes y Accesibilidad
  4. Tipografía
  5. Sistema de Espaciado
  6. Botones y Estados
  7. Variantes Light/Dark Mode
  8. Componentes de Interfaz
  9. Ejemplos de Uso Aplicado

1. Identidad Visual

Logo Principal

El logo de Danuaz representa la conexión, el movimiento y el profesionalismo a través de formas circulares entrelazadas. La combinación de colores púrpura y marrón rosado refleja una marca femenina, dinámica e innovadora, transmitiendo confiabilidad en servicios de asesoría financiera.

Características Clave:

Usos Recomendados

2. Paleta de Colores

Paleta Primaria

Púrpura Profundo
Púrpura Profundo
HEX: #8B2F6B
RGB: (139, 47, 107)
Color primario, botones principales
Púrpura Medio
Púrpura Medio
HEX: #B565A7
RGB: (181, 101, 167)
Elementos interactivos secundarios
Rosa Claro
Rosa Claro
HEX: #E8A4D5
RGB: (232, 164, 213)
Fondos, acentos suaves, hover states
Gris Oscuro
Gris Oscuro
HEX: #666666
RGB: (102, 102, 102)
Texto secundario, bordes

Paleta Extendida - Tonos Neutros

Negro Pro
Negro Pro
HEX: #1A1A1A
RGB: (26, 26, 26)
Texto principal, énfasis
Gris Carbón
Gris Carbón
HEX: #2D2D2D
RGB: (45, 45, 45)
Dark mode background, contraste fuerte
Gris Claro
Gris Claro
HEX: #F5F5F5
RGB: (245, 245, 245)
Fondos secundarios, inputs
Blanco
Blanco
HEX: #FFFFFF
RGB: (255, 255, 255)
Fondos principales, text backgrounds

Colores Funcionales

Éxito
Verde - Éxito
HEX: #4CAF50
RGB: (76, 175, 80)
Confirmaciones, validaciones positivas
Advertencia
Naranja - Advertencia
HEX: #FF9800
RGB: (255, 152, 0)
Alertas, precaución, cambios
Error
Rojo - Error
HEX: #F44336
RGB: (244, 67, 54)
Errores, validaciones negativas
Información
Azul - Información
HEX: #2196F3
RGB: (33, 150, 243)
Información, tips, help buttons

3. Contrastes y Accesibilidad (WCAG AA)

Todos los colores han sido seleccionados siguiendo los estándares WCAG AA para garantizar accesibilidad y legibilidad para todos los usuarios.

Combinación de Colores Ratio de Contraste Nivel WCAG Estado
Púrpura Profundo + Blanco 8.2:1 AAA ✓ Excelente
Púrpura Medio + Blanco 6.5:1 AAA ✓ Excelente
Gris Oscuro + Blanco 5.1:1 AA ✓ Bueno
Negro Pro + Blanco 20.5:1 AAA ✓ Perfecto
Blanco + Negro Pro 20.5:1 AAA ✓ Perfecto

Demostración de Contrastes

Púrpura sobre Blanco 8.2:1 AAA
Texto con contraste excelente. Perfectamente legible para todos los usuarios.
Gris sobre Blanco 5.1:1 AA
Texto con contraste bueno. Adecuado para textos secundarios.
Rosa sobre Blanco 4.2:1 AA
Texto con contraste bueno. Usar para fondos y acentos.
Blanco sobre Púrpura (Dark) 8.2:1 AAA
Excelente contraste en modo oscuro. Perfectamente legible.

4. Tipografía

Familia Tipográfica

Escala Tipográfica

H1 - Hero / Main Title
Asesoría Financiera Inteligente
H2 - Section Title
Nuestros Servicios
H3 - Subsection
Contabilidad Integral
H4 - Card Title
Gestión de Registros
Body Large - 18px
Texto destacado con información importante para el usuario
Body Regular - 16px (Estándar)
Párrafos normales y contenido principal del sitio web
Body Small - 14px
Subtítulos pequeños y descripciones adicionales
Label - 12px
LABELS, BADGES, INPUTS

5. Sistema de Espaciado (Grid 8px)

El sistema utiliza un múltiplo de base 8px para mantener consistencia en todos los espacios del diseño.

Nombre Píxeles Visual Uso
XS 4px
XS
Espacios muy pequeños, bordes internos
S 8px
S
Espaciado interior de botones
M 16px
M
Padding estándar de componentes
L 24px
L
Espaciado entre secciones
XL 32px
XL
Espaciado entre bloques principales
XXL 48px
XXL
Espaciado entre secciones de página

6. Botones y Estados

Botón Primario

Uso: Llamadas a acción principales, acciones críticas, confirmaciones

Default

BG: #8B2F6B | Texto: #FFFFFF

Hover

BG: #6B2250 | Shadow

Disabled

BG: #D9D9D9 | Texto: #999999

Botón Secundario

Uso: Acciones complementarias, opciones alternas

Default

Border: #8B2F6B | Texto: #8B2F6B

Hover

BG: Rosa 20% | Border: #B565A7

Disabled

Border: #D9D9D9 | Texto: #999999

Botón Ghost/Acento

Uso: Acciones terciarias, enlaces dentro de contenido

Default

Texto: #666666 | Transparent

Hover

Texto: #8B2F6B | Subrayado

Disabled

Texto: #999999 | Deshabilitado

Botón Peligro

Uso: Acciones destructivas, eliminación, cancelación crítica

Default

BG: #F44336 | Texto: #FFFFFF

Hover

BG: #D32F2F | Shadow

Disabled

BG: #D9D9D9 | Texto: #999999

7. Variantes Light/Dark Mode

Light Mode (Predeterminado)

El Light Mode es la variante principal, diseñada para la mayoría de aplicaciones y horarios de uso diurno.

Light Mode - Colores
Background Principal
#FFFFFF
Texto Principal
Negro Pro #1A1A1A
Acento Primario
#8B2F6B
Dark Mode - Colores
Background Principal
#2D2D2D
Texto Principal
#FFFFFF
Acento Primario
#E8A4D5

Tabla Comparativa Light/Dark

Elemento Light Mode Dark Mode
Background Principal #FFFFFF #2D2D2D
Background Secundario #FAFAFA #1A1A1A
Texto Principal #1A1A1A #FFFFFF
Texto Secundario #666666 #D9D9D9
Acento Primario #8B2F6B (Púrpura) #E8A4D5 (Rosa)
Border/Divider #E0E0E0 #444444
Inputs Background #F5F5F5 #1A1A1A

Ejemplo: Sección Hero Light vs Dark

Light Mode Hero

Soluciones Financieras Innovadoras

Asesoría de confianza para empresas dinámicas

Dark Mode Hero

Soluciones Financieras Innovadoras

Asesoría de confianza para empresas dinámicas

8. Componentes de Interfaz

Header/Navegación

Light Mode Header
DANUAZ
Inicio Servicios Contacto
Dark Mode Header
DANUAZ
Inicio Servicios Contacto

Tarjetas (Cards)

Light Mode Card

Contabilidad Integral

Gestión completa de registros contables con reportes en tiempo real

Dark Mode Card

Contabilidad Integral

Gestión completa de registros contables con reportes en tiempo real

Inputs y Formularios

Light Mode Input
Usaremos tu email para enviarte información
Dark Mode Input
Usaremos tu email para enviarte información

9. Ejemplos de Uso Aplicado

Ejemplo 1: Página de Servicios (Light Mode)

Nuestros Servicios

Soluciones integrales de asesoría financiera para tu empresa

📊

Contabilidad

Gestión integral de registros y balances contables

Auditoría

Cumplimiento normativo y gestión de riesgos

💡

Asesoría

Estrategias financieras personalizadas

Ejemplo 2: Sección CTA (Dark Mode)

¿Listo para transformar tu gestión financiera?

Solicita una consultoría gratuita y descubre cómo Danuaz puede ayudarte

Ejemplo 3: Tabla de Precios

Plan Características Precio Acción
Básico Contabilidad básica, reportes mensuales $299/mes
Profesional ⭐ Contabilidad completa, auditoría, asesoría $599/mes
Enterprise Solución personalizada, soporte 24/7 Personalizado

10. Recursos y Recomendaciones de Implementación

CSS Variables (Recomendado)

:root {
  /* Colores Primarios */
  --color-purple-dark: #8B2F6B;
  --color-purple-medium: #B565A7;
  --color-pink-light: #E8A4D5;
  --color-gray-dark: #666666;
  
  /* Colores Neutros */
  --color-black-pro: #1A1A1A;
  --color-gray-carbon: #2D2D2D;
  --color-gray-light: #F5F5F5;
  --color-gray-ultra-light: #FAFAFA;
  --color-white: #FFFFFF;
  
  /* Colores Funcionales */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-info: #2196F3;
  
  /* Espaciado */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
}

Framework Recomendados

Transiciones y Animaciones

Accesibilidad (A11y)

Testing de Color

Usa estas herramientas para verificar contrastes y accesibilidad: