top of page

Botones

Construcción y lineamientos

Los botones son una herramienta dentro de un contenido que invita a colaboradores a realizar una acción.

 

Los botones deben:

  • Tener una altura de 92 px y el texto en 30 pt.

  • Ser breves (idealmente de 1 a 3 palabras; menos de 30 caracteres).

  • Hablar en imperativo positivo (invitan a actuar).

  • Consistentes con nuestros tonos de voz. Su fórmula de construcción es: verbo + complemento directo o contextual (opcional, pero no obligatorio).

 

Evita:

  • Frases largas como “Conoce las herramientas que tienes disponibles”.

  • Frases vagas como “Más información”. Siempre que se pueda, sé más específico.

RGE_Manual-Botones-ejemplos-02.jpg
RGE_Manual-Botones-ejemplos-03.jpg
Dimensiones para uso en Zeus

El botón principal está diseñado para ofrecer una experiencia táctil cómoda y clara en dispositivos móviles.

Dimensiones

  • Altura fija: 92 px. Este tamaño garantiza una zona táctil amplia y accesible.

  • Ancho mínimo de botón: 360 px.

  • Ancho máximo: 608 px.

Alineación centrada

En todas sus aplicaciones, el botón debe colocarse centrado horizontalmente dentro de la pantalla o contenedor principal. Esta alineación refuerza su jerarquía visual y facilita su identificación como acción principal.

Puntaje (fijo): 30 pt

Para garantizar buena lectura.

RGE_Manual-Botones_Dimensiones-03.jpg
RGE_Manual-Botones_Dimensiones-02.jpg
Usos sobre fondos de color

Contamos con versiones específicas por color de fondo para nuestros botones, logrando mantener legibilidad y jerarquía visual:

  • Fondo blanco: botón rojo —para comunicados transversales— y amarillo verde o azul —dependiendo de la Unidad de Negocio—.

  • Fondo gris claro: botón rojo con texto y símbolo en blanco.

  • Fondo de color de la Empresa con alta saturación: botón blanco con texto y símbolo en el color de la Unidad de Negocio correspondiente.

  • Fondo de color de la Empresa con baja saturación: botón del color de la Unidad de Negocio con texto y símbolo blanco.

Mesa de trabajo 1GEKT_WIX.jpg
Mesa de trabajo 5GEKT_WIX.jpg
Mesa de trabajo 9GEKT_WIX.jpg
Mesa de trabajo 3GEKT_WIX.jpg
Mesa de trabajo 7GEKT_WIX.jpg
Mesa de trabajo 11GEKT_WIX.jpg
Mesa de trabajo 2GEKT_WIX.jpg
Mesa de trabajo 6GEKT_WIX.jpg
Mesa de trabajo 10GEKT_WIX.jpg
Mesa de trabajo 4GEKT_WIX.jpg
Mesa de trabajo 8GEKT_WIX.jpg
Mesa de trabajo 12GEKT_WIX.jpg
bottom of page