Guías de marca
Color
Colores principales y secundarios, balance y usos correctos e incorrectos.
Actualizado 10 ago 2026
Nuestros colores
El color de Leonardo lo lidera el Brand Blue. El teal señala interacción, Ember aporta énfasis raro y los neutros fríos mantienen calmadas las superficies de lectura. Usa solo valores aprobados—no inventes tintes fuera del sistema.
Colores principales
Los colores principales sostienen el reconocimiento de marca. Brand Blue es el valor por defecto para héroes, tinta de navegación y momentos de identidad. Deep Blue apoya campos grandes de marca. El blanco y el inverse suave mantienen el contenido legible.
Brand Blue
Marca primaria · identidad, héroes, tinta
RGB 0, 0, 179 · HEX #0000B3
Deep Blue
Campo de marca de apoyo · rieles, paneles
RGB 0, 0, 153 · HEX #000099
Blanco
Superficie clara primaria · cards, contenido
RGB 255, 255, 255 · HEX #FFFFFF
Ink Inverse
Luz suave · texto sobre oscuro, rellenos
RGB 245, 247, 250 · HEX #F5F7FA
Colores secundarios
Los colores secundarios apoyan la jerarquía y la UI. El teal es el acento interactivo. Ember es un highlight de uso escaso. Los neutros (canvas, muted, tinta secundaria) estructuran layouts sin competir con Brand Blue.
Signal Teal
Acento · enlaces, foco, éxito
RGB 14, 124, 102 · HEX #0E7C66
Teal Strong
Acento fuerte · énfasis / pressed
RGB 11, 95, 80 · HEX #0B5F50
Warm Ember
Highlight · solo énfasis raro
RGB 232, 93, 4 · HEX #E85D04
Canvas
Superficie de página · fondos
RGB 238, 241, 244 · HEX #EEF1F4
Muted
Superficie muted · divisores, chips
RGB 226, 231, 237 · HEX #E2E7ED
Ink Secondary
Texto de apoyo · cuerpo, captions
RGB 61, 79, 99 · HEX #3D4F63
Balance de color
El balance mantiene Leonardo reconocible sin verse ruidoso. Deja que los neutros carguen las superficies de lectura, que Brand Blue lidere los momentos de marca y que los acentos sean escasos.
Neutros
60%
Canvas, blanco y muted para lectura y estructura.
Brand Blue
30%
Héroes, navegación, bloques de identidad y CTAs primarios.
Acentos
10%
Teal para interacción; Ember solo para un highlight raro.
- 01
Lidera con azul
Abre momentos de marca con campos o degradados Brand Blue que sigan sintiéndose blue-first.
- 02
Descansa en neutros
Pasa el contenido largo a blanco o canvas para que la tipografía se mantenga calmada y legible.
- 03
Acentúa con intención
Usa teal para señales interactivas. Reserva Ember para un solo punto de énfasis por vista.
Usos correctos e incorrectos
Sí
Usa Brand Blue sobre blanco/canvas para identidad. Pon tipografía blanca o Ink Inverse sobre Brand Blue. Usa teal para enlaces y foco. Mantén Ember como un highlight pequeño.
No
No pongas texto Ember sobre teal, gris claro sobre blanco, ni degradados arcoíris que diluyan Brand Blue. No transmitas significado solo con color.
Correcto · Azul sobre claro
Tipo o campos Brand Blue sobre blanco/canvas.
Correcto · Blanco sobre azul
Ink Inverse / blanco sobre héroes Brand Blue.
Incorrecto · Ember sobre teal
Baja claridad y pareja fuera de sistema.
Incorrecto · Tipo gris lavado
Falla el contraste sobre superficies claras.
Descargas
Hoja de paleta de color
Valores de color primarios y secundarios para impresión.
Actualizado 12 jul 2026
Tokens de color
Tokens de color legibles por máquina para equipos de producto y web.
Actualizado 12 jul 2026
Categorías de marca