Colores y tipografía

La configuración de Colores y Tipografía en Document360 te permite controlar el aspecto visual de tu sitio de base de conocimientos, desde el tema del sitio y los colores de la marca hasta las fuentes en los artículos y la navegación. Todos los ajustes se configuran desde la personalización del sitio y se aplican a nivel de proyecto: el color de la marca fluye hacia los CTAs, estados de selección y elementos interactivos; El color del hipervínculo controla cómo aparecen los enlaces en todos los artículos; El emparejamiento de fuentes de los artículos determina las fuentes utilizadas en los títulos y el contenido del cuerpo de los artículos, y las mismas fuentes aparecen en el editor para que los escritores puedan previsualizar cómo se verán los artículos al publicarse; La fuente del sitio controla la navegación, los encabezados, los pies de página y controla por separado el contenido del artículo.
Estos ajustes trabajan juntos para crear una experiencia visual coherente para los lectores en todas las páginas.

Cuándo actualizar los colores y la tipografía

• Al crear una nueva base de conocimiento , establece el color de tu marca, el color de los hipervínculos y las fuentes como parte de la configuración inicial para que el sitio refleje tu identidad desde el principio.
• Después de una actualización de marca , si tu empresa actualiza su color principal, fuente o directrices visuales, actualiza la configuración de la base de conocimientos para mantenerse alineada.
• Cuando los lectores reporten problemas de accesibilidad , utiliza la opción Ajustar contraste de color para cumplir con los estándares WCAG para aplicar automáticamente proporciones de contraste compatibles con WCAG según el color de tu marca.
• Al cambiar entre temas claros y oscuros , los colores que funcionan en modo claro pueden no tener suficiente contraste en modo oscuro. Revisa y ajusta ambos colores de tema al activar el soporte de doble modo.
• Cuando el contenido del artículo es difícil de leer , si los lectores encuentran que la fuente predeterminada es demasiado pequeña, densa o no coincide con tu producto, actualiza el emparejamiento de fuentes del artículo y la fuente del sitio para mejorar la legibilidad.

Tema del sitio

El tema del sitio controla qué modos de color están disponibles para los lectores en tu sitio de base de conocimiento.

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En el campo tema del sitio , selecciona una de las siguientes opciones:
   • Tanto Luz como Oscuridad - Los lectores pueden cambiar entre modos de luz y de oscuridad usando el interruptor de tema en la cabecera del sitio.
   • Solo luz - El sitio siempre se muestra en modo luz. El interruptor del tema está oculto.
   • Solo en Oscuro - El sitio siempre se muestra en modo oscuro. El interruptor del tema está oculto.
4. Haz clic en Guardar.

Colores

Color de la marca

El color de la marca es el color principal aplicado a los CTAs, estados de selección y elementos interactivos en tu sitio de base de conocimiento.

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En la sección de Colores , selecciona un color usando el selector de color o introduce un código HEX en el campo de color de la marca .
4. Haz clic en Guardar.

Color del hipervínculo

Puedes personalizar cómo aparecen los hipervínculos en tu sitio de base de conocimientos. Hay tres opciones disponibles:

Para establecer el color del hipervínculo:

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En la sección de Colores , ve a Enlace de color y selecciona la opción que prefieras.
4. Si seleccionas Usar un color diferente, configura los estados por defecto, el paso del cursor y los visitados.
5. Haz clic en Guardar.

Contraste automático WCAG

Activar el contraste automático de WCAG ajusta automáticamente los elementos de color de tu sitio para cumplir con los estándares de accesibilidad WCAG 2.1 , en función del color de marca que elijas.

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En la sección de Colores , selecciona la casilla Auto ajustado contraste de color para cumplir con los estándares WCAG .
4. Haz clic en Guardar.

Tipografía

Emparejamiento de fuentes de artículos

El emparejamiento de fuentes de artículos controla las fuentes utilizadas para los títulos y el contenido de los artículos en todo tu sitio de base de conocimiento. Las fuentes seleccionadas también aparecen en el editor, para que los autores puedan previsualizar cómo se verán los artículos cuando se publiquen.

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En la sección Fuentes , selecciona un par de fuentes del mosaico de emparejamiento de fuentes Artículo . La primera fuente se aplica a los títulos de los artículos y la segunda al contenido del artículo.
4. Para elegir una combinación específica, haz clic en ¿Tienes una combinación de fuentes específica en mente? para acceder a opciones de fuentes adicionales y seleccionar fuentes para títulos y contenido individualmente.
5. Haz clic en Guardar.

Fuente del sitio

La fuente del sitio se aplica en toda la navegación de la base de conocimiento, incluyendo el panel izquierdo de navegación (categorías, subcategorías, títulos de artículos), cabecera, pie de página, navegación secundaria y controles.

1. Navega a Configuración () en la barra de navegación izquierda del portal de la Base de conocimiento.
2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos } > Personalización del sitio.
3. En la sección de Fuentes , selecciona tu fuente preferida en el desplegable de fuentes del sitio .
4. Haz clic en Guardar.

Fuente personalizada

Si las opciones de fuentes integradas no coinciden con tu marca, puedes configurar una fuente personalizada para tu sitio de base de conocimientos. Para una guía paso a paso, consulta Cómo configurar una fuente personalizada en la base de conocimientos.

Mejores prácticas

• Activa el contraste automático WCAG si el cumplimiento de accesibilidad es importante para tu audiencia; elimina la duda de comprobar manualmente los ratios de contraste para cada combinación de colores.
• Configura primero el color de tu marca antes de configurar los colores de los hipervínculos; si planeas usar el color de marca para los hipervínculos, primero debe guardarse la configuración de color de marca.
• Prueba tanto los modos claro como oscuro después de hacer cambios de color: un color de marca que queda bien en modo claro puede tener bajo contraste en modo oscuro. Usa la vista previa del sitio para comprobar ambos.
• Utiliza el emparejamiento de fuentes de artículos para mayor legibilidad : elige un emparejamiento donde la fuente del título sea distinta de la fuente del cuerpo para crear una jerarquía visual clara.
• Evita cambios frecuentes de fuente : cambiar de fuente después de la publicación del contenido puede afectar cómo se representan los artículos existentes, especialmente si se han aplicado estilos personalizados a nivel de artículo.