Color
Azul y blanco son la base. Los degradés introducen profundidad y movimiento sin romper la sobriedad de la marca.
Paleta principal
- HEX
- #002858
- RGB
- 0, 40, 88
- Pantone
- 289 C
- A11Y · Blanco
- 14.54:1 AA
- A11Y · Negro
- 1.44:1 —
- HEX
- #0084D0
- RGB
- 0, 132, 208
- Pantone
- 2925 C
- A11Y · Blanco
- 4.03:1 AA Lg
- A11Y · Negro
- 5.21:1 AA
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
- A11Y · Blanco
- 1:1 —
- A11Y · Negro
- 21:1 AA
Tonos derivados de los pétalos
- HEX
- #002E5E
- RGB
- 0, 46, 94
- A11Y · Blanco
- 13.53:1 AA
- A11Y · Negro
- 1.55:1 —
- HEX
- #0040B9
- RGB
- 0, 64, 185
- A11Y · Blanco
- 8.63:1 AA
- A11Y · Negro
- 2.43:1 —
- HEX
- #1465FF
- RGB
- 20, 101, 255
- A11Y · Blanco
- 4.84:1 AA
- A11Y · Negro
- 4.34:1 AA Lg
Sistema de transiciones cromáticas
linear-gradient(135deg, #002858 0%, #0084D0 100%)linear-gradient(135deg, #002E5E 0%, #0040B9 50%, #1465FF 100%)radial-gradient(circle at 30% 30%, #0084D0 0%, #002858 70%)linear-gradient(180deg, #FFFFFF 0%, #0084D0 100%)Distribución cromática recomendada
Predomina el blanco como respiración. El azul profundo estructura. El azul brillante puntúa, nunca domina.
Gradientes de fondo
Composiciones listas para hero, banners y secciones completas. Construidas sobre la paleta azul: profundidad, transición y mesh radiales.
radial-gradient(ellipse at 20% 0%, #0084D0 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, #1465FF 0%, transparent 50%), linear-gradient(180deg, #001a3d 0%, #002858 100%)linear-gradient(120deg, #002858 0%, #0040B9 45%, #0084D0 100%)radial-gradient(at 15% 20%, #1465FF 0px, transparent 50%), radial-gradient(at 85% 10%, #0084D0 0px, transparent 50%), radial-gradient(at 75% 85%, #0040B9 0px, transparent 50%), radial-gradient(at 10% 90%, #002E5E 0px, transparent 50%), #002858linear-gradient(180deg, #FFFFFF 0%, #E8F2FB 55%, #B6DBF2 100%)radial-gradient(circle at 50% 0%, #0084D0 0%, #002858 60%, #001530 100%)linear-gradient(135deg, #001530 0%, #002858 40%, #0040B9 100%)Escala tonal por color primario
Cada azul primario se expande en una rampa de 10 pasos (50–900) para construir superficies, bordes, hovers y estados sin salir del sistema.
Escala neutra
Grises azulados que sostienen tipografía, bordes y fondos. Nunca usar gris puro: todos los neutros tienen una pizca del azul de marca.
Color con significado funcional
Reservados para feedback de sistema. Nunca decoran: comunican estado.
Confirmación, stock disponible
Avisos no críticos, próximos a vencer
Advertencias intermedias, acción requerida
Errores, agotado, eliminar
Mensajes neutros, tooltips
Cada color funcional se expande en una rampa de 10 pasos pastel (50–900) para fondos suaves, bordes, iconos y estados activos.
Combinaciones recomendadas
Pares de fondo y texto verificados para legibilidad WCAG AA o superior.
Reglas de aplicación
Variables CSS de la paleta
:root {
/* Primarios */
--ft-deep: #002858;
--ft-bright: #0084D0;
/* Pétalos */
--ft-petal-1: #002E5E;
--ft-petal-2: #0040B9;
--ft-petal-3: #1465FF;
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #002858 0%, #0084D0 100%);
--gradient-petals: linear-gradient(135deg, #002E5E 0%, #0040B9 50%, #1465FF 100%);
/* Semánticos (pastel) */
--color-success: #A8E0C3;
--color-warning: #FBE0B0;
--color-danger: #F5B8B8;
--color-info: #BCE0F4;
}