Guía de Marca
Todo lo que necesitas para representar Fideloo correctamente. Recursos de marca, colores, tipografía y directrices de uso.
Logo
Nuestro logo es la representación visual principal de Fideloo. Úsalo de forma consistente en todos los materiales.
Logo Principal
Para fondos claros. Opción predeterminada para la mayoría de aplicaciones.
Logo Monocromático
Para aplicaciones de un solo color o cuando se necesita contraste.
Solo Icono
Para espacios pequeños, iconos de app y favicon.
No hacer
- No estires ni distorsiones el logo
- No uses colores no aprobados
- No añadas sombras ni efectos
- No lo coloques sobre fondos complejos
Paleta de Colores
Nuestros colores están cuidadosamente elegidos para representar calidez, confianza y profesionalidad. Úsalos de forma consistente.
Colores de Marca
Naranja Fideloo
HEX: #FF5722
RGB: 255, 87, 34
HSL: 16, 100%, 57%
Color principal de marca, CTAs, enlaces
Negro Fideloo
HEX: #000000
RGB: 0, 0, 0
HSL: 0, 0%, 0%
Texto, logo, títulos
Blanco Fideloo
HEX: #FFFFFF
RGB: 255, 255, 255
HSL: 0, 0%, 100%
Fondos, contraste
Fidelización
Para recompensas, puntos y programas de fidelización
Haz clic para copiar código hex
Suscripciones
Para planes, membresías y servicios recurrentes
Haz clic para copiar código hex
Colores Semánticos
Éxito
#22C55E / #DCFCE7
Estados activos, confirmaciones
Advertencia
#F59E0B / #FEF3C7
Estados pausados, alertas
Error
#EF4444 / #FEE2E2
Errores, acciones destructivas
Información
#3B82F6 / #DBEAFE
Informativo, ayuda
Tipografía
Nuestro sistema tipográfico usa dos fuentes complementarias: Outfit para títulos y Mulish para texto de cuerpo.
Outfit
Fuente principal para títulos y texto de display. Negrita y moderna.
Regular 400
Medium 500
Semibold 600
Bold 700
Extrabold 800
Mulish
Fuente de cuerpo para párrafos y elementos de UI. Limpia y legible.
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Escala Tipográfica
| Nombre | Fuente | Tamaño / Peso | Vista previa |
|---|---|---|---|
| Display Large .text-display-large | Outfit | 57px / 700 | Aa |
| Display Medium .text-display-medium | Outfit | 45px / 700 | Aa |
| Display Small .text-display-small | Outfit | 36px / 700 | Aa |
| Headline Large .text-headline-large | Outfit | 32px / 700 | Aa |
| Headline Medium .text-headline-medium | Outfit | 28px / 700 | Aa |
| Headline Small .text-headline-small | Outfit | 24px / 700 | Aa |
| Title Large .text-title-large | Outfit | 22px / 700 | Aa |
| Title Medium .text-title-medium | Outfit | 16px / 700 | Aa |
| Body Large .text-body-large | Mulish | 16px / 400 | Aa |
| Body Medium .text-body-medium | Mulish | 14px / 400 | Aa |
| Label Large .text-label-large | Mulish | 14px / 500 | Aa |
| Label Medium .text-label-medium | Mulish | 12px / 500 | Aa |
Identidad de Funciones
Cada función tiene su propia identidad visual manteniendo la consistencia de marca. Usa estos colores para distinguir entre funciones de Fidelización y Suscripciones.
Programa de Fidelización
Recompensas que hacen volver a los clientes
El naranja representa calidez, emoción y recompensas. Usa este color para todas las funciones relacionadas con fidelización incluyendo puntos, recompensas y tarjetas de programa.
Cuándo usar
- Tarjetas de recompensa y visualización de puntos
- Insignias y etiquetas del programa de fidelización
- Notificaciones de puntos ganados
Suscripciones
Valor premium recurrente
El púrpura profundo transmite valor premium y exclusividad. Usa este color para planes de suscripción, membresías y servicios recurrentes.
Cuándo usar
- Tarjetas de planes de suscripción
- Insignias y niveles de membresía
- Interfaces de renovación y facturación
