Guía visual y de contenido

Cómo usar esta guía

Tres capas de lineamientos: qué se ve, cómo se implementa y qué se dice. Las tres son obligatorias para publicar.

Índice

Qué se puede adaptar en la plataforma

Capacitaciones vive en el universo Achs Seguro Laboral

La arquitectura de marca Achs asigna una paleta a cada universo. Capacitaciones se comunica en verde, con negro, beige y verde neón como colores transversales.

Qué hacer y qué no con el universo de color

Paleta y tokens

Cada color tiene un nombre en el Design System. Usa el token, no el hexadecimal suelto: así el portal hereda los cambios futuros.

Universo Achs Seguro Laboral

Transversales de marca

Uso funcional en la plataforma

Colores semánticos

Los colores semánticos son de uso funcional y no rompen la arquitectura de marca. Ojo: el verde de éxito #27933E coincide con el primary del universo, así que un mensaje de éxito necesita ícono o texto para distinguirse de un elemento de marca. Contrastes en las páginas 05 y 06.

Contraste: los pares aprobados

Una plataforma de capacitación es de uso obligatorio para muchos trabajadores. Si no se lee, no se capacita. El estándar es WCAG 2.1 nivel AA.

Combinaciones verificadas

Ajustes pendientes y cómo verificar

Tres ajustes que hay que resolver con la célula UX

El verde #27933E es el token primary del universo, pero con texto blanco de 16 px queda en 3,94:1 y no alcanza el mínimo AA. Mientras se resuelve en el sistema, aplica estas equivalencias:

Los valores originales de los tokens se mantienen para rellenos, íconos grandes y gráficos. La propuesta de reemplazo está en revisión: no la propaguen a otros productos todavía.

Reglas que van más allá del color

Cómo verificar antes de publicar

Dos familias, una jerarquía

Achs Nueva Serif para titular. Achs Nueva Sans para leer y para operar. La combinación es lo que hace que una pantalla se vea Achs.

Jerarquía según el manual de marca

Los valores exactos de cada token, en escritorio y móvil, están en la página siguiente.

Tipografías de sistema

El manual define reemplazos oficiales para cuando no se puede cargar la fuente de marca: Arial sustituye a Achs Nueva Sans y Times New Roman sustituye a Achs Nueva Serif. Declararlos en el font-family evita que el navegador elija por su cuenta.

Escala tipográfica y espaciado

Valores exactos del Design System Achs. No se inventan tamaños intermedios: si un texto no calza en un nivel, se revisa la jerarquía, no el número.

Escala de texto

Fuente: escala de texto Achs, Guidelines Digital pp. 6-7. Los niveles h1 a h3 usan ACHSNuevaSerif (font-heading); h4 a h6 y el cuerpo usan ACHSNuevaSans (font-body).

Escala de espaciado

Tokens disponibles como custom properties --spacing-N, donde N es el valor en píxeles. Todo margen, relleno y separación sale de esta escala.

Cómo se aplica el espaciado

Principio de fondo: los elementos relacionados se agrupan con menos espacio que los no relacionados. Si algo se ve desordenado, casi siempre es un problema de espaciado, no de color.

Fuentes y variables

Un solo archivo CSS, variables al inicio, componentes después. Si el equipo necesita cambiar el verde el próximo año, debe ser una línea.

1. Cargar las tipografías

Subir los archivos al gestor de archivos de la plataforma y declararlos una vez. Usar woff2 con respaldo woff, y font-display:swap para que el texto sea legible mientras carga.

/* Achs — tipografías de marca */
@font-face{
  font-family:"ACHS Nueva Sans";
  src:url("/fonts/ACHSNuevaSans-Regular.woff2") format("woff2"),
      url("/fonts/ACHSNuevaSans-Regular.woff")  format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Repetir para 300, 500, 600 y para "ACHS Nueva Serif" 300 y 500 */

2. Declarar los tokens

Los tokens vienen del Design System Achs. Conviene declararlos en :root para que estén disponibles en toda la plataforma, incluidos los bloques HTML de las páginas.

/* Achs Servicios — Capacitaciones */
:root{
  --achs-primary:#27933E;      /* acción principal */
  --achs-secondary:#13C045;    /* acción secundaria, texto negro */
  --achs-text-brand:#004C14;   /* títulos y navegación */
  --achs-light:#CCF1DC;
  --achs-surface:#E6F7E4;
  --achs-beige:#EAEADE;
  --achs-neon:#7EFF45;
  --achs-text:#1F2937;
  --achs-text-soft:#4E4E4E;
  --achs-font-title:"ACHS Nueva Serif", "Times New Roman", serif;
  --achs-font-body:"ACHS Nueva Sans", Arial, sans-serif;
  --achs-radius-card:16px;
  --achs-radius-pill:9999px;
  --achs-space-2:16px;  --achs-space-3:24px;  --achs-space-4:32px;
}

3. Reglas de convivencia con la plataforma

Botones

El botón es donde se juntan lo visual, lo técnico y el tono. Forma de píldora, texto en sentence case, verbo específico.

Especificación

.achs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 24px; border:0;
  border-radius:var(--achs-radius-pill);
  font-family:var(--achs-font-body); font-size:1rem; font-weight:600;
  text-transform:none; cursor:pointer; transition:background .2s ease;
}
.achs-btn--primary{ background:var(--achs-text-brand); color:#fff; }   /* #004C14 */
.achs-btn--primary:hover{ background:#1F6F2E; }
.achs-btn--secondary{ background:var(--achs-light); color:var(--achs-text-brand); }
.achs-btn--outline{ background:transparent; box-shadow:inset 0 0 0 2px var(--achs-primary);
  color:var(--achs-text-brand); }
.achs-btn:focus-visible{ outline:2px solid var(--achs-text-brand); outline-offset:2px; }
.achs-btn[disabled]{ background:#66D495; color:var(--achs-text-brand); cursor:not-allowed; }

Tarjetas, tabs, formularios y tablas

Tabs

Pestaña activa: texto y borde inferior de 3 px en #27933E. Inactivas en #5F5F5F. Borde base de 2 px en gris claro. Navegables con teclado y con aria-selected en la activa: el estado no puede quedar solo en el color.

Campos de formulario

Tablas de datos

Encabezado con fondo #E6F7E4 y texto #004C14 en SemiBold. Filas separadas por línea de 1 px. Alineación: texto a la izquierda, números a la derecha. En móvil, convertir a lista de tarjetas en vez de forzar el desplazamiento horizontal.

Badges de estado

Radio 16 px, 12 px de relleno horizontal, texto de 12 px en SemiBold. Cuando el estado es activo se agrega un punto de 6 px antes del texto, como en Achs Virtual. El texto del badge ya dice el estado: no depende del color para entenderse.

Logotipo y elementos gráficos

Uso del logotipo

Elementos gráficos de la marca

Jerarquía visual de una página del portal

De arriba hacia abajo: encabezado con logotipo y navegación, un título en serif que dice de qué se trata la página, un texto de apoyo en sans, el contenido en tarjetas o listas, y una sola acción principal visible. Los elementos gráficos entran después, si sobra respiro; nunca antes de que la jerarquía esté resuelta.

Íconos, fotografía y miniaturas

Íconos

Los íconos Achs se construyen con formas simples derivadas de la identidad, con cantos rectos y solo con líneas, sin relleno de color. La esquina néon aparece como elemento constructivo dentro de la forma. Sus colores se adaptan a la paleta de la submarca: en Capacitaciones, verde.

Fotografía

Las personas son el elemento principal de la fotografía Achs: gente real en contextos reales de trabajo, mirando a la cámara o concentrada en su labor, con los elementos de protección personal correctamente puestos. Una foto donde alguien usa mal su equipo de seguridad no puede publicarse en un portal de capacitación en prevención.

Ilustraciones

Cuando hay ilustraciones, respetan la paleta de la marca y usan la gama de colores de piel definida en el manual, representando diversidad real. No mezclar ilustración y fotografía en la misma pieza.

Miniaturas de curso

Cómo escribe Achs

La voz es constante en todos los canales. El tono se ajusta al contexto. En una plataforma de capacitación el tono es instructivo, directo y breve.

Los cuatro atributos de la voz

Si una frase no cumple al menos tres de los cuatro atributos, conviene reescribirla.

Reglas que aplican a todo el portal

Lenguaje inclusivo

Fórmulas naturales del español: «personas trabajadoras», «quienes participan», «el equipo». Se admite «las y los trabajadores». No se usan recursos como «e», «@» ni «x». En el registro, si se pide género, ofrecer al menos femenino, masculino, no binario y prefiero no decirlo.

Antipatrones frecuentes en plataformas de capacitación

CTAs: el texto que decide si alguien se capacita

Un botón mal escrito cuesta inscripciones y cursos sin terminar. Tres reglas: verbo, específico, corto.

Reemplazos directos para el portal

Biblioteca de CTAs aprobados

Fundamento técnico del CTA

Microcopy de plataforma

Los textos pequeños son los que definen si la plataforma se siente Achs o se siente genérica.

Estados vacíos

Estructura: título corto, descripción y acción sugerida.

Mensajes de error

Tres principios: no culpar a la persona, explicar qué pasó sin lenguaje técnico y ofrecer una salida.

Los errores se escriben en plural institucional: «No pudimos…», nunca «No pude…». Achs es una institución, no una persona.

Confirmaciones y progreso

Correos y notificaciones

Asunto bajo 45 caracteres para que no se corte en el teléfono. Un solo CTA por correo. Sin mayúsculas sostenidas ni signos de exclamación en el asunto.

Checklist antes de publicar

Qué pasa por revisión antes de publicarse

Gobernanza de esta guía