# Sistema de diseño ONS ## Sistema de diseño ONS Vista previa de la interfaz Prueba varios medios de transporte, la respuesta opuesta, la validación de campos vacíos, la revisión local y la conservación de las ediciones. ## Sistema de diseño ONS Referencia de diseño ONS Design System 73.13.1 compilado CSS, JavaScript y variables de Sass, contrastados con el manual de servicio público. El ejemplo utiliza el comportamiento nativo de Checkbox y Mutually Exclusive. En el ejemplo independiente, Arial sustituye a OpenSans; la receta de copia para producción incluye las fuentes empaquetadas. La pregunta sobre viajes y la revisión local son contenido de demostración original. ### Matriz tipográfica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Primary family | OpenSans, Helvetica Neue, Arial, sans-serif | Las directrices oficiales de tipografía especifican Open Sans con el conjunto estilístico 1; la demostración utiliza Arial intencionadamente. | | ons-u-fs-3xl | 32/44px → 48/56px | De pequeño a grande en el punto de ruptura medio; peso 700. | | ons-u-fs-2xl | 28/40px → 36/48px | Peso 700; jerarquía de tamaño de encabezado. | | ons-u-fs-xl / ons-u-fs-l | 26/36 → 30/40px; 24/32 → 26/36px | Tamaños adaptables y altura de línea nativos, no un valor fluido con clamp. | | ons-u-fs-m | 20/28px → 22/32px | Peso 700. | | ons-u-fs-r / ons-u-fs-s | 18/28px / 14/20px | Normal 400; las variantes --b usan 700. | ### Funciones de color semánticas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ons-color-text | #222 | Se asigna a --ons-color-black. | | --ons-color-text-link | #206095 | Azul océano; azul noche #003c57 al pasar el cursor o al activar. | | --ons-color-focus | #fbc900 | Indicador de foco amarillo sol. | | --ons-color-button | #0f8243 | Verde hoja; distinto del color de los enlaces. | | --ons-color-errors | #d0021b | Errores en rojo rubí acompañados de una explicación escrita. | | --ons-color-info-tint | #e9eff4 | Fondo del panel informativo; no sustituye a una casilla seleccionada. | ### Utilidades de espaciado reales | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | ons-u-mb-xs / s / m | 12px /16px /20px | Valores de utilidades de margen inferior con una raíz de 16 px. Incluyen incrementos fuera de la cuadrícula de referencia documentada de 8 px. | | ons-u-mb-l / xl | 24px /32px | Usa las utilidades de la versión publicada; no deduzcas todos los valores a partir de una declaración sobre la línea de base. | ### Modelo de diseño y adaptación a distintos tamaños de pantalla | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Grid | 12 percentage-width columns | ons-grid > ons-grid__col con clases de columna adaptables. | | Medium column | ons-col-8@m | Ocho columnas a partir de740px; ancho completo por debajo. | | Breakpoints | 300,400,500,740,980,1300,1600px | 2xs,xs,s,m,l,xl,2xl. | | Baseline | Multiples of8px | Ritmo de la documentación de cuadrícula; no des por sentado que todos los bordes y fuentes se ajustan a él. | | Documented gutters | 16px below600;24px at600+ | Comprueba la versión CSS si sustituyes las clases de cuadrícula. | | Default container | 64.6256rem maximum;1rem horizontal padding | Verificado en73.13.1 CSS, aproximadamente1034px con una raíz de16px. | ### Mecanismos de exclusión mutua | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Group root | ons-js-mutually-exclusive | El script nativo localiza este contenedor cuando el DOM está listo. | | Regular options | ons-js-exclusive-group-item | Se pueden combinar; al seleccionar una opción, se borra la opción excluyente opuesta. | | Opposing choice | ons-js-exclusive-option | Al seleccionarla, se borran los valores del grupo habitual. | | Explanation | data-deselect-message | Texto de advertencia para la opción opuesta. | | Announcement | ons-js-exclusive-alert | Región dinámica con data-group-adjective y data-option-adjective. | | State updates | click for checkbox/radio;input for text | El controlador almacena en caché hasValue; la aplicación debe usar eventos nativos para restablecerlo. | ## Sistema de diseño ONS Guía completa Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño ONS Diseño específico para cuestionarios ### Protege el significado de las respuestas > ONS se dedica tanto a recopilar datos estadísticos como a publicar información. En un cuestionario, las respuestas mutuamente excluyentes son una cuestión de calidad de los datos: el usuario no debe poder enviar a la vez un medio de transporte y una respuesta que indique que no hizo ningún viaje. El componente nativo de exclusión mutua vincula esas opciones y explica a las tecnologías de asistencia que se anula la selección. El ejemplo plantea una pregunta original sobre los desplazamientos a una biblioteca y muestra una vista previa local de la respuesta. Evita deliberadamente los elementos gráficos de identidad de ONS y no afirma que las respuestas se recopilen. Una encuesta de producción necesitaría su propio consentimiento, política de conservación de datos, lógica de navegación y validación en el servidor. Consulta la especificación complementaria ## Sistema de diseño ONS Jerarquía clara de la pregunta ### La leyenda puede ser el encabezado de la página La familia tipográfica principal es Open Sans, con el conjunto estilístico 1 para aportar formas de letra distintivas. La matriz tipográfica nativa de Sass tiene valores fijos para tamaños pequeños y grandes, no una escala continua inventada. El texto del cuerpo se mantiene en 18px con un interlineado de 28px. La clase principal de tamaño grande pasa de 32/44 a 48/56 en el punto de ruptura medio. En una página con una sola pregunta, el h 1 puede ir dentro de la leyenda del grupo de campos para que el nombre accesible del grupo coincida con el título visible. No añadas encima otro h 1 sin relación. En el ejemplo, el contexto del servicio aparece en un párrafo más pequeño y la instrucción para elegir va debajo de la leyenda. La demostración independiente usa Arial explícitamente para evitar solicitudes de fuentes inexistentes. La guía de instalación copia las fuentes junto a CSS; esto es necesario si quien lo adopta quiere usar la tipografía OpenSans publicada en lugar de una fuente alternativa. Consulta la especificación complementaria ## Sistema de diseño ONS Funciones de la interfaz de encuesta ### El foco es independiente del estado ONS asigna variables semánticas a colores primitivos. El texto es negro, los enlaces habituales son Ocean Blue y el botón principal es Leaf Green. Sun Yellow es el color de foco. Ruby Red comunica errores, pero el mensaje de error debe indicar qué acción se necesita. Un botón Continuar verde no garantiza que la respuesta ya haya superado la validación. El cuestionario local utiliza el borde y el estilo de selección nativos de la casilla. No convierte cada respuesta en una tarjeta de marketing independiente. Una línea superior neutra y breve separa el ejemplo independiente de la pregunta sin reproducir la cabecera de ONS. - Mantén el indicador de foco visible nativo tanto en la entrada de la casilla como en el botón de acción. - Antes de las opciones habituales, incluye la instrucción escrita «Selecciona todas las opciones que correspondan». - Separa la respuesta opuesta con «O bien» para que la diferencia sea visible antes de interactuar. Consulta la especificación complementaria ## Sistema de diseño ONS Columnas y ancho de las respuestas ### Usa el ancho propio del cuestionario La cuadrícula de doce columnas expresa los anchos mediante clases como ons-col-8@m. A partir de740px, esa clase ocupa ocho columnas; por debajo, el mismo elemento ocupa todo el ancho disponible del contenido. El ejemplo local utiliza esa columna nativa para que la pregunta larga se ajuste a un ancho de lectura cómodo, en lugar de extenderse por todo el escritorio. En la versión inspeccionada, el contenedor estándar tiene un ancho máximo de 64.6256rem y un relleno horizontal de 1rem. La guía pública de la cuadrícula también describe una línea de base de 8px y márgenes interiores de 16/24px en torno a su límite de espaciado de 600px. Distingue esos conceptos del punto de ruptura medio de 740px para las columnas; no constituyen un único cambio universal para móviles. La revisión de respuestas sustituye la pregunta dentro de la misma columna, y Cambiar respuestas vuelve a los controles existentes. Los valores permanecen en memoria, sin cambio de ruta ni solicitud de red. Las utilidades de espaciado ejecutables tienen más incrementos que la línea de base de 8px: los márgenes inferiores xs, s, m, l y xl son de 12,16,20,24 y 32px, respectivamente, con una raíz de 16px. Por eso, la referencia enumera los valores reales de las utilidades por separado de las pautas de la cuadrícula. Consulta la especificación complementaria ## Sistema de diseño ONS Crea el grupo de respuestas ### Estructura nativa de una casilla Una casilla usa ons-checkbox__input y un ons-checkbox__label asociado dentro de ons-checkbox. La entrada conserva sus atributos name y value habituales para mantener la semántica nativa del formulario. La estructura más amplia ons-checkboxes__item proporciona el espaciado y el área interactiva que espera la hoja de estilos. Las opciones habituales comparten ons-js-exclusive-group-item. En cambio, la opción final usa ons-js-exclusive-option, con data-deselect-message para explicar el efecto. El elemento span de la región dinámica debe incluir los dos atributos de adjetivo: no es marcado decorativo sobrante. Si se elimina, se incumplen las suposiciones del controlador nativo. Este ejemplo de código es completo para tres opciones habituales y una respuesta opuesta. Adapta los sustantivos y los valores a una pregunta real; no te limites a cambiar el nombre de un control de validación no relacionado y llamarlo «exclusivo». ```

How did you travel to your local library last week?

Select all that apply




``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño ONS Validación y comportamiento al cambiar ### Estado de la biblioteca y estado de la aplicación La biblioteca se encarga de borrar las opciones excluyentes opuestas. El pequeño controlador de la aplicación del ejemplo solo comprueba si existe al menos una respuesta antes de mostrar una revisión local. Si no hay ninguna selección, muestra un mensaje de error y enfoca el mensaje asociado. El enlace del error lleva directamente a la primera opción, donde el usuario puede actuar. El controlador realiza un seguimiento del estado almacenado en caché de hasValue, además del valor de la casilla de verificación en el DOM. Restablecer con checked=false por sí solo podría dejar obsoleta esa caché. Por eso, la acción de restablecimiento hace clic en cada campo marcado, lo que permite que los detectores de eventos nativos actualicen su modelo, y luego devuelve el foco a la pregunta. Se trata de un aspecto concreto de la integración que no se puede comprobar examinando solo la hoja de estilos. La revisión muestra una lista de las etiquetas seleccionadas. Cambiar las respuestas conserva los controles y su selección. No se muestra ningún panel de confirmación que afirme haber recibido una respuesta a la encuesta, porque este ejemplo no tiene un servidor asociado. Consulta la especificación complementaria ## Sistema de diseño ONS Incorporación de recursos y plantillas ### Dos opciones compatibles El paquete npm incluye recursos compilados, archivos fuente Sass, macros Nunjucks y una plantilla de página base. Esta vista previa utiliza la opción HTML compilada: copia el CSS oficial y main.js, reproduce el marcado documentado y carga el script después del contenido del cuerpo. El script inicializa los enlaces de componentes correspondientes cuando el DOM está listo. Un proyecto renderizado en el servidor puede usar en su lugar los archivos de macros de Nunjucks de components. La macro Checkbox acepta su matriz de casillas, etiquetas, descripciones, configuración de errores y configuración de mutuallyExclusive. Al establecer dontWrap, la responsabilidad del fieldset pasa al componente de pregunta contenedor; no es una forma de omitir el nombre accesible del grupo. Si seleccionas archivos Sass individuales, importa primero las variables del sistema, los helpers, las utilidades, la base y los objetos; después, las reglas de los componentes y las dependencias que necesiten. El CSS completo y compilado evita tener que seleccionar esas dependencias para este pequeño ejemplo independiente. 1. Fija la versión del paquete y sirve CSS, scripts y fuentes desde un único directorio local de recursos estable. 2. Elige HTML compilado para una página estática o configura las rutas de las macros Nunjucks para una aplicación renderizada en el servidor. 3. Mantén CSS, JavaScript y el marcado en la misma versión, y vuelve a comprobar la exclusión mutua después de actualizar. Consulta la especificación complementaria ## Sistema de diseño ONS Prueba de respuestas contradictorias ### Verifica el significado de los datos Selecciona «A pie» y «Autobús»; después, selecciona «No fui». Ambas opciones anteriores deberían desmarcarse. A continuación, selecciona «Bicicleta»: la respuesta opuesta debe desmarcarse y «Bicicleta» debe permanecer marcada. Repite la prueba con la barra espaciadora en los campos enfocados y examina la región de anuncios; no des por hecho que una marca visual demuestra que todo el comportamiento funciona. Continúa sin seleccionar ninguna opción para probar el error; después, revisa una respuesta válida y vuelve atrás con «Cambiar respuestas». Por último, restablece el formulario después de una secuencia de respuestas contradictorias y haz otra selección; así se detecta si el estado del controlador nativo quedó obsoleto. A 390 px, la pregunta y todas las etiquetas deben seguir siendo legibles sin desplazamiento horizontal de la página. Estas pruebas verifican la interacción local, no el envío de datos de una encuesta en producción, la certificación de accesibilidad ni la calidad estadística de la pregunta. Un servicio real aún necesita validar en el servidor los valores contradictorios e investigar si las categorías de respuesta están completas. Consulta la especificación complementaria ## Sistema de diseño ONS Ejemplos de componentes del sistema de diseño ### Una pregunta completa con opciones mutuamente excluyentes Opciones de respuesta habituales y una respuesta opuesta con los enlaces nativos a la región dinámica. ```

How did you travel to your local library last week?

Select all that apply




``` Referencia de código ### Usa recursos de una misma versión Opción de recursos compilados, incluidas las rutas relativas a las fuentes de un proyecto completo. ``` npm install --save-exact @ons/design-system@73.13.1 mkdir -p public/vendor/ons cp -R node_modules/@ons/design-system/css public/vendor/ons/ cp -R node_modules/@ons/design-system/scripts public/vendor/ons/ cp -R node_modules/@ons/design-system/fonts public/vendor/ons/ ``` Referencia de código ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP. ``` ONS survey question specimen

Independent specimen · Original library survey

Travel · Question 1 of 1

How did you travel to your local library last week?

Select all that apply




Practice only. Your selection stays in this page and is not submitted.

``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Sistema de diseño ONS Configuración del agente ### Punto de partida para la implementación Los archivos CSS y JavaScript compilados de Native 73.13.1 se ejecutan en el ejemplo local. Arial es una alternativa local explícita; las instrucciones de copia para producción incluyen las fuentes OpenSans del paquete. El ZIP completo del ejemplo funcional, disponible en Sources, también proporciona las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/ons.html. No abras con file:// los ejemplos que usan módulos. ``` npm install --save-exact @ons/design-system@73.13.1 mkdir -p public/vendor/ons cp -R node_modules/@ons/design-system/css public/vendor/ons/ cp -R node_modules/@ons/design-system/scripts public/vendor/ons/ cp -R node_modules/@ons/design-system/fonts public/vendor/ons/ ``` ### Una instrucción para tu proyecto ``` Crea un ejemplo independiente de encuesta ONS73.13.1 con los enlaces nativos Checkbox y Mutually Exclusive, un fieldset/legend asociado, un grupo de respuestas habituales y una respuesta opuesta. Incluye la región dinámica obligatoria y los atributos para desmarcar. Sirve el CSS nativo correspondiente y main.js; no escribas un controlador sustituto para la exclusividad. Añade validación local de campos vacíos y revisión de respuestas que permita conservar los cambios, sin afirmar que se recibieron en un servidor. Restablece mediante eventos nativos para mantener sincronizado el estado en caché. Usa ons-col-8@m y las reglas verificadas de tipografía y color semántico, sin marcas de identidad oficial. ``` ## Sistema de diseño ONS Fuentes y alcance Ejemplo de implementación independiente con texto original para la encuesta. El código nativo tiene licencia MIT; la identidad de ONS y las licencias del contenido se gestionan por separado. Las respuestas no se transmiten, almacenan ni presentan como estadísticas oficiales. - Tipo Jerarquía tipográfica y adaptación de fuentes. - Color Guía de colores semánticos. - Cuadrícula Clases de cuadrícula, espaciado y puntos de interrupción. - Comprobaciones Anatomía de las casillas de verificación y opciones de las macros. - Exclusión mutua Respuestas opuestas y comportamiento de desmarcado. - Recursos Rutas de recursos y dependencias de Sass. - npm Contenido e instalación del paquete. - Plantilla Integración de plantillas en el servidor. - Error Ubicación del error e indicaciones para corregirlo. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Sistema de diseño ONS Recursos relacionados ### Ontario sistema de diseño Crea una guía extensa al estilo de Ontario con tipografía real, valores publicados de espaciado y color, comportamiento nativo de acordeón y el código fuente completo de la versión correspondiente. ### Poncho Examina la cuadrícula Bootstrap 3 de Poncho, sus colores semánticos de acción y sus paneles de servicio totalmente interactivos mediante un directorio de actividades funcional. ### Queensland Government sistema de diseño Explora la implementación de Bootstrap de Queensland mediante un selector ilustrado de recursos completo, con roles de tema reales, estilo nativo para casillas y un diálogo accesible de revisión. - [Referencia de implementación](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Fuente](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_typography.scss) - [Fuente](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_colors.scss) - [Fuente](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/css/main.css) - [Fuente](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Fuente](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/foundations/typography) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/foundations/colours) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Referencia de código](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js) - [Consulta la especificación complementaria](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [Referencia de código](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [Referencia de código](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Tipo Jerarquía tipográfica y adaptación de fuentes.](https://service-manual.ons.gov.uk/design-system/foundations/typography) - [Color Guía de colores semánticos.](https://service-manual.ons.gov.uk/design-system/foundations/colours) - [Cuadrícula Clases de cuadrícula, espaciado y puntos de interrupción.](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Comprobaciones Anatomía de las casillas de verificación y opciones de las macros.](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Exclusión mutua Respuestas opuestas y comportamiento de desmarcado.](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Recursos Rutas de recursos y dependencias de Sass.](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [npm Contenido e instalación del paquete.](https://service-manual.ons.gov.uk/design-system/guidance/install-with-npm) - [Plantilla Integración de plantillas en el servidor.](https://service-manual.ons.gov.uk/design-system/guidance/templating-in-nunjucks) - [Error Ubicación del error e indicaciones para corregirlo.](https://service-manual.ons.gov.uk/design-system/components/error-summary)