Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño GOV.UK.
Crea un recorrido de preguntas y comprobación de respuestas al estilo GOV.UK con la escala tipográfica v6 actual, espaciado adaptable, colores funcionales, validación vinculada e integración concreta con Frontend.
Guía de OpenDesign8 capítulos37 entradas de referenciaGuía de aplicación original
01
Vista previa de la interfaz sistema de diseño GOV.UK
Envía campos vacíos, sigue los enlaces de error, corrige las respuestas y modifica un valor desde la pantalla de revisión. No se envía información fuera de la página.
Consulta sobre un evento: pregunta, validación y revisión de respuestasAbrir ejemplo completo
GOV.UK Frontend 6.5.1 nativo CSS, Button y ErrorSummary JavaScript, servido localmente. Fuente alternativa Helvetica; validación de formulario y navegación de revisión originales y solo locales. · Referencia de implementación
02
Referencia de diseño sistema de diseño GOV.UK
GOV.UK Frontend 6.5.1 y documentación actual de v6, consultados el 3 de octubre de 2026. Los valores hexadecimales corresponden a una captura de referencia; en producción, es preferible usar las funciones Sass con nombre. La vista previa carga localmente CSS y JavaScript oficiales con una fuente alternativa e identidad independiente.
Esta referencia utiliza la documentación de v6, que incluye texto de mayor tamaño en pantallas pequeñas y colores funcionales revisados. Por eso, una captura antigua puede mostrar valores diferentes. La tabla anterior recoge los valores predeterminados documentados actualmente, en lugar de mezclar versiones sin indicarlo.
El estudio interactivo presenta una consulta ficticia sobre un evento comunitario. No utiliza la corona, el logotipo de GOV.UK, la fuente Transport ni un punto de envío real. El contenido de la tarea y las reglas de validación local son decisiones de la aplicación; la estructura de los componentes se basa en los ejemplos oficiales enlazados.
Para los servicios elegibles en service.gov.uk, GDS Transport forma parte de la implementación oficial. Los servicios públicos de otros dominios deben usar otra tipografía. Este estudio independiente sigue la alternativa recomendada de Helvetica Neue, Helvetica, Arial, sans-serif; cambiar la fuente no exige descartar la jerarquía del sistema.
Tipografía y ritmo de lectura de sistema de diseño GOV.UK
Usa el par completo de tamaño y altura de línea
Usa govuk-heading-l para la pregunta de consulta y govuk-body para el texto complementario. En pantallas pequeñas, el encabezado mide 27/30px; en pantallas más grandes, pasa a 36/40px. En v6, el texto del cuerpo permanece en 19/25px. Un tamaño de 16px para el texto del cuerpo en pantallas pequeñas reproduciría el comportamiento anterior, no el de esta referencia.
La tabla de escala incluye ambos tamaños porque una captura de un solo tamaño de pantalla no permite establecer la regla de adaptación. El CSS de producción usa unidades relativas. Una clase como govuk-heading-l controla la apariencia, pero no determina si el elemento semántico debe ser h1 o h2.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Espaciado y ancho de página de sistema de diseño GOV.UK
Las unidades adaptables no son píxeles fijos
La unidad 6 es útil entre grupos de preguntas: equivale a 20px en una pantalla estrecha y a 30px por encima del límite de tableta. El ayudante estático govuk-spacing(6) devuelve 30px en todos los anchos. Elegir el ayudante, por tanto, cambia el comportamiento, aunque ambas versiones se vean idénticas en escritorio.
Coloca una columna de lectura dentro del contenedor
El contenedor de ancho estándar tiene un máximo de 1020px. Dentro de él, una columna de cuadrícula de dos tercios limita el flujo de preguntas y, a la vez, permite que la estructura general de la página mantenga la alineación. En pantallas pequeñas, el contenido se apila de forma natural. Nuestra vista previa conserva esta jerarquía de lectura en lugar de distribuir cada campo en una tarjeta de panel.
HTML
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Usa roles en lugar de imitar capturas de pantalla antiguas
En la versión 6, el color funcional de los enlaces es #1a65a6 y el de los errores es #ca3535. En una compilación Sass real, usa govuk-functional-colour("link") y govuk-functional-colour("error") para que una actualización pueda incorporar la paleta original. Estos roles funcionales no son lo mismo que elegir un color rojo o azul genérico para una ilustración.
El amarillo se reserva para el foco. No debe convertirse en el color predeterminado de selección ni en un acento promocional. La vista previa combina el amarillo con texto oscuro y un borde oscuro visible; los errores se identifican mediante el texto y la ubicación, no solo con el color rojo.
El ejemplo de entrada combina govuk-form-group, govuk-label, govuk-hint y govuk-input. La etiqueta apunta al ID del campo; aria-describedby apunta a la indicación. Cuando el campo no es válido, añade también el ID del mensaje de error, además de las clases de error. Un borde rojo sin esa relación es una reproducción incompleta.
Esta consulta mantiene juntos el nombre del evento y el correo electrónico de contacto. Son dos valores con etiquetas independientes dentro de una tarea breve; no significa que haya que poner cada campo en una página distinta. La vista previa exige ambos valores solo para mostrar la validación; no establece ningún requisito real para obtener un permiso.
Etiqueta persistente: Nombre del evento.
Indicación persistente: Usa el nombre que aparece en la información del evento.
Error recuperable: Introduce el nombre de un evento.
El marcado nativo y el comportamiento de la aplicación cumplen funciones distintas
GOV.UK Frontend aplica estilos y mejoras a los componentes. No decide qué dirección de correo electrónico es válida para este servicio, no guarda borradores ni recibe consultas. En la vista previa, JavaScript valida los dos campos y almacena sus valores solo en la página actual. Al recargarla, se borra el contenido del estudio.
Sistema de diseño GOV.UK Recuperación mediante errores enlazados
Haz que el resumen lleve al campo que hay que corregir
Tras una acción Continuar con errores, muestra el resumen de errores antes del formulario y mueve el foco hasta él. Cada enlace de la lista apunta a la respuesta correspondiente. Si se trata de un único campo de texto, el enlace apunta al ID del campo; en el caso de una opción agrupada, debe apuntar al primer control adecuado, tal como se explica en la guía oficial.
El resumen nativo usa data-module="govuk-error-summary" para la mejora progresiva. La vista previa inserta el resumen solo cuando falla la validación y, a continuación, crea ErrorSummary a partir del módulo local 6.5.1. La biblioteca gestiona el foco y la navegación mediante enlaces; la aplicación proporciona los mensajes, conserva los valores y elimina los errores obsoletos.
Pulsa Continuar sin rellenar ninguno de los dos campos. Sigue el enlace del error del nombre del evento, introduce un título ficticio y luego una dirección de correo electrónico no válida. Vuelve a pulsar Continuar: solo debe aparecer el error pendiente y el título debe conservarse. Corrige la dirección para llegar a la revisión. Así se hace visible el comportamiento del estado, en lugar de mostrar un error de ejemplo permanente.
Sistema de diseño GOV.UK Revisar y cambiar respuestas
Usa una lista de definiciones, no una tabla de datos
La pantalla de revisión de respuestas contiene un govuk-summary-list. Cada fila tiene un término dt, un valor dd y una región de acciones dd. Una etiqueta oculta después de Cambiar identifica la respuesta concreta. Los nombres de evento largos se ajustan en el valor sin ocultar el enlace para editarlo.
La acción de cambio restaura el formulario y pone el foco en el campo seleccionado. Al continuar, se vuelve a validar y se regresa a la revisión actualizada. La ruta de retorno forma parte del código de la aplicación; el sistema de diseño proporciona la estructura de presentación.
Este estudio termina en la revisión porque ningún servicio recibe los datos. Una página real de revisión de respuestas debe preceder a la acción de envío y mostrar la información que se enviará. Una aplicación con declaraciones o una confirmación del servidor necesita lógica de servicio adicional; un panel verde no puede generar ese resultado.
Completa las dos respuestas ficticias y sigue revisando.
Elige Cambiar nombre del evento y edita solo esa respuesta.
Continúa y comprueba que se conserven tanto el título corregido como el correo electrónico.
La configuración siguiente usa govuk-frontend@6 y Dart Sass con el importador de paquetes de Node. Compila la configuración de fuentes sin marca documentada y copia la distribución del navegador JavaScript. Guarda en el repositorio el archivo de bloqueo resuelto para que el proyecto real registre la versión exacta.
El ejemplo no carga Transport ni usa recursos gráficos del Gobierno. Además, los servicios que cumplan los requisitos para usar una marca deben servir los recursos oficiales mediante la ruta de recursos documentada. Las aplicaciones que utilicen otra herramienta de compilación pueden conservar el mismo módulo Sass y la entrada initAll, adaptando el empaquetado.
Inicializa después de que exista el marcado del componente
La vista previa independiente ejecuta la versión oficial CSS y JavaScript, copiadas localmente en la versión 6.5.1. Una sobrescritura de fuentes de alcance limitado sustituye Transport en todo el estudio. La validación del formulario y la pantalla de revisión forman parte del código de la aplicación, mientras que la mejora de Button y ErrorSummary procede de la biblioteca. La receta de compilación Sass independiente documenta la configuración configurable recomendada; no se ejecutó esa compilación.
Sistema de diseño GOV.UK Ejemplos de componentes del sistema de diseño
Campo de texto: etiqueta, indicación y error integrado
El estado de ejemplo añade el modificador de error al grupo y al campo. La descripción del campo combina, mediante sus ID, la indicación persistente y el error actual.
HTML
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="event-name">Event name</label>
<div id="event-name-hint" class="govuk-hint">Use the name shown on your event information.</div>
<p id="event-name-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter an event name
</p>
<input class="govuk-input govuk-input--error" id="event-name"
name="eventName" type="text"
aria-describedby="event-name-hint event-name-error">
</div>
En el estado válido, elimina el párrafo de error, los modificadores de error y el ID del error de aria-describedby.
Conserva el valor real cuando falle la validación; usa una salida del servidor con escape o asigna el texto/valor del DOM.
Resumen de errores: navegación hasta la respuesta
Coloca el resumen antes del contenido de la pregunta. Su mensaje coincide con el error en línea y el enlace apunta al campo de entrada, no a un contenedor no relacionado.
HTML
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">There is a problem</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li><a href="#event-name">Enter an event name</a></li>
</ul>
</div>
</div>
</div>
La inicialización de Frontend proporciona el comportamiento de foco del resumen en una implementación nativa.
El ejemplo interactivo crea un nuevo ErrorSummary después de insertar cada resumen de validación fallida; la validación de la aplicación se gestiona por separado.
Comprueba las respuestas: una lista de resumen semántica
Una lista de definiciones vincula la etiqueta de respuesta con su valor y con un destino de edición específico. El sufijo oculto permite distinguir los enlaces «Cambiar» repetidos.
El parámetro returnTo es una convención de la aplicación que se usa aquí, no forma parte de Frontend API.
Vuelve de la edición a la revisión y conserva intactas las demás respuestas.
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.
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
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.
04
Configuración del agente de IA sistema de diseño GOV.UK
Punto de partida para la implementación
Coloca los comandos de shell, el contenido de app.scss y los fragmentos HTML en las ubicaciones indicadas. La vista previa se ejecuta con copias locales de los recursos oficiales 6.5.1 y una fuente alternativa; esta receta de compilación de Sass está documentada, pero no se ha compilado en este espacio de trabajo. El archivo ZIP completo del ejemplo funcional, incluido en Fuentes, también contiene 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/gov-uk.html. No abras ejemplos basados en módulos mediante file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Una instrucción para tu proyecto
Instrucción para el agente
Implementa la consulta sobre un evento con dos campos usando GOV.UK Frontend v6 y la configuración de fuente Helvetica sin marca de esta guía. Usa las estructuras reales de form-group/input/error-summary y summary-list, errores en línea vinculados, respuestas conservadas, enlaces «Cambiar» dirigidos a cada respuesta y una finalización que solo muestra la revisión. Aplica la tipografía adaptable y el espaciado documentados mediante las clases de Frontend. Conserva la identidad real del proyecto y no crees un envío oficial ni un resultado de backend inventado. Comprueba los estados de campos vacíos, correo electrónico no válido, datos corregidos, revisión y cambio de respuesta.
05
Fuentes y alcance de sistema de diseño GOV.UK
Estudio independiente de una aplicación de OpenDesign que usa el componente CSS y JavaScript de GOV.UK Frontend 6.5.1. No implica la presencia de un logotipo gubernamental, la fuente Transport, un servicio oficial, un envío real ni una certificación de conformidad. Las reglas del formulario y la navegación de revisión son código original de la aplicación.
