Fondos Negros
Encabezado 1
Encabezado 2
Fondos Azul Oscuro
Encabezado 3
Encabezado 4
Encabezado 5
Fondos Blancos
Encabezado 6
Encabezado 7
Encabezado 8
Encabezado 9
Fondos Gris Azulado
Encabezado 10
Encabezado 11
Fondos Gris claro
Encabezado 12
Encabezado 13
Fondo Azul Medio
En caso de mantener el diseño actual Ă©ste serĂa el color que mantiene la coherencia de marca dinámica y comunicaciĂłn ligera.
Encabezado 14
Encabezado 15
Encabezado 16
Fichas TĂ©cnicas
MenĂşs Fondo negro
Fichas de estilos de los Encabezados 1 y 2 . Fondo negro: #383838
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffffff) / Color hover: gris claro azulado (#d3e2ed) / color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #0b1f3d / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 18 px / separación letras: 0.8px / Separación letras en hover: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 18 px / Separación letras: 0.8px / Separación letras en hover: 1px Color: blanco ( #ffff)/ Color hover: gris claro azulado (#d3e2ed ) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffffff) / Color hover: gris claro azulado (#d3e2ed) / color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #0b1f3d / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 18 px / separación letras: 0.8px / Separación letras en hover: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 18 px / Separación letras: 0.8px / Separación letras en hover: 1px Color: blanco ( #ffff)/ Color hover: gris claro azulado (#d3e2ed ) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
MenĂşs Fondo Azul Oscuro
Fichas de estilos de los Encabezado 3, 4 y 5 . Fondo azul oscuro: #0b1f3d
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: #ffff blanco / Color hover: #d3e2ed ( gris claro azulado) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: blanco (#ffff) / Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
MenĂşs Fondo Blanco
Fichas de estilos de los Encabezado 6, 7, 8 y 9 . Fondo blanco: #ffffff
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: #ffff blanco / Color hover: #d3e2ed ( gris claro azulado) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: blanco (#ffff) / Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
MenĂşs Fondo Gris Azulado
Fichas de estilos de los Encabezado 10 y 11 . Fondo gris azulado: rgba(172,184,193,0.29)
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: #ffff blanco / Color hover: #d3e2ed ( gris claro azulado) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: blanco (#ffff) / Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
MenĂşs Fondo Gris Claro
Fichas de estilos de los Encabezado 12 y 13 . Fondo azul oscuro: #f5f5f5
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: #ffff blanco / Color hover: #d3e2ed ( gris claro azulado) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: blanco (#ffff) / Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
MenĂşs Fondo Azul Medio
Fichas de estilos de los Encabezado 14, 15 y 16. Fondo azul medio: rgba(26,109,191,0.77)
En PC
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 3px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: 19 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 3px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: #ffff blanco / Color hover: #d3e2ed ( gris claro azulado) / Icono flecha en hover: →
Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
En Tablet y MĂłvil
- MenĂş estilos: Estilo de letra: Roboto / Tamaño: 18 px / separaciĂłn letras: 1px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed)/ color linea desplegable: #1c69b1 /Â
BOTONES: Encabezado 1: leyenda en dos lĂneas                          Encabezado 2: leyenda en una lĂnea.
- Botón Módulo de dispensación: Radio: 100px / Color de fondo en reposo: #1c69b1 / Color de fondo en hover: #113a68 /Estilo de letra: Roboto / Tamaño: tablet 16 px, móvil 14 px / separación letras: 0.5px / Separación letras en hover: 0.8px / Color: blanco (#ffff )/ Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
- Botón Acceso Veterinarios: Radio: 100px / Color de fondo en reposo: #28af87 / Color de fondo en hover: #5ac48d /Estilo de letra: Roboto / Tamaño: 19 px / Separación letras: 0.5px / Separación letras en hover: 0.8px Color: blanco (#ffff) / Color hover: gris claro azulado (#d3e2ed) / Icono flecha en hover: →
* Accesibilidad mĂnima aplicada: en ambos sombra de letra. Color: rgba(17,17,17,0.51), en hover: #000000 / ExpansiĂłn horizontal: 0.08em, en hover: 0.1em / ExpansiĂłn vertical: 0.8em, en hover: 0.1em
