# Sistema de diseño NHS

## Vista previa de la interfaz de sistema de diseño NHS

Selecciona un método, consulta la ayuda opcional, corrige una pregunta sin responder y modifica la preferencia.

## Referencia de diseño de sistema de diseño NHS

NHS.UK frontend 10.6.1 y manual de servicios digitales del NHS. La vista previa usa CSS/JS local oficial con Arial, no Frutiger con licencia ni el logotipo del NHS. Los valores adaptables se han comprobado con el paquete seleccionado; no se proporciona contenido clínico.

### Tipografía e identidad

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger requiere la licencia correspondiente; este estudio usa Arial. |
| nhsuk-body | 16px small / 19px large | Texto de lectura predeterminado. |
| nhsuk-body-l | 26px desktop | Párrafo destacado, no todas las frases introductorias. |
| nhsuk-body-s | 14px small / 16px large | Información secundaria de uso moderado. |
| nhsuk-heading-l | Transactional h1 | Usa heading-m para el h2 que le sigue. |
### Variables de color semánticas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Contenido principal |
| $nhsuk-secondary-text-colour | #4c6272 | Indicaciones |
| $nhsuk-link-colour | #005eb8 | Destinos de los enlaces |
| $nhsuk-focus-colour | #ffeb3b | Foco del teclado |
| $nhsuk-border-colour | #d8dde0 | Límites estructurales |
| $nhsuk-input-border-colour | #4c6272 | Límites de los campos de entrada |
| $nhsuk-error-colour | #d5281b | Mensajes de validación |
| $nhsuk-button-colour | #007f3b | Acción principal |
### Espaciado adaptable

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Pantalla pequeña → más de 768px; usa la clase en lugar de crear un duplicado local. |
### Composición de la página

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Contenedor exterior de ancho fijo. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | Recomendado para servicios transaccionales. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | Los anchos de la cuadrícula se aplican a partir de 769px. |
| Breakpoints | 320 / 641 / 769 / 990px | Móvil, tableta, escritorio y escritorio grande. |
| nhsuk-u-reading-width | Readable content measure | Úsalo cuando el contenedor que lo rodea sea ancho. |
## Guía completa de sistema de diseño NHS

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.

## Contexto y tipografía del NHS de sistema de diseño NHS

### Una interfaz sanitaria sin falsa identidad

> NHS.UK frontend proporciona la base visual y de interacción; no programa una consulta ni decide qué métodos de asistencia ofrece una clínica. El estudio muestra una cita ficticia y permite al visitante elegir una preferencia. El resultado es una revisión local, no una reserva.

Frutiger es un recurso de marca del NHS sujeto a condiciones de licencia. Este recurso independiente usa Arial, la fuente alternativa documentada, y excluye el logotipo del NHS. Se mantiene intacto el CSS oficial; una sobrescritura local explícita de la fuente evita las solicitudes de Frutiger.

Consulta la especificación complementaria

## Tipografía para transacciones de sistema de diseño NHS

### Deja que la pregunta marque la jerarquía

Usa nhsuk-heading-l para la pregunta de la página y nhsuk-heading-m para una sección subordinada. Esto difiere de una página editorial extensa, donde la guía empieza con heading-xl. El grupo de botones de opción puede usar una leyenda del tamaño de un encabezado sin perder su semántica de grupo.

Las clases de párrafo distinguen entre texto principal, destacado y complementario pequeño. Un texto destacado de 26px resulta útil una vez al inicio de la página, mientras que las instrucciones de la cita deben conservar el tamaño normal del texto principal. La vista previa mantiene suficiente ancho de línea para que las fechas y los nombres de ubicaciones se ajusten.

Consulta la especificación complementaria

## Espaciado y contenedor de sistema de diseño NHS

### La escala de espaciado del NHS no es la de GOV.UK

Las unidades adaptables del NHS siguen una secuencia distinta y cambian por encima de 768px. Por ejemplo, la unidad 6 pasa de 32px a 40px. No transfieras al NHS el valor de la unidad 6 de GOV.UK solo porque los nombres de las utilidades parezcan relacionados.

La demostración usa el contenedor de 960px y una columna de lectura de dos tercios. La cuadrícula nativa crea una sola columna por debajo del escritorio. La biblioteca controla los cambios de disposición, mientras que la pequeña franja de identidad independiente se define mediante estilos de la aplicación.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

Referencia de código

Consulta la especificación complementaria

### Puntos de ruptura adaptables

La documentación define 641px como tableta y 769px como escritorio. Los anchos de columna de la cuadrícula empiezan en el punto de escritorio; eso no significa que todas las reglas tipográficas esperen al mismo límite. Usa las clases nativas en lugar de implementar un único punto de interrupción global para todas las propiedades.

Consulta la especificación complementaria

## Opciones de asistencia agrupadas de sistema de diseño NHS

### Un grupo de campos, una respuesta

El ejemplo utiliza nhsuk-fieldset con una leyenda visible y el mismo atributo name en sus botones de opción. Cada botón tiene su propio id y una etiqueta. La ayuda se asocia al grupo mediante aria-describedby. Estas relaciones permiten que el navegador presente una única opción excluyente.

La estructura de cada opción coloca el control y la etiqueta dentro de nhsuk-radios__item. Los botones de opción estándar son adecuados para una pregunta principal; la variante pequeña está pensada para contextos de filtros más densos. Las opciones ficticias de asistencia siguen siendo excluyentes al recorrerlas con las teclas de flecha.

- La leyenda indica qué decisión hay que tomar.

- El nombre attendance compartido crea el grupo de selección.

- Cada etiqueta apunta a un ID de control distinto.

Consulta la especificación complementaria

## Sistema de diseño NHS Ayuda sin ocultar información esencial

### Usa un elemento details nativo

El ejemplo de details incluye nhsuk-details__summary y un span summary-text, seguido de nhsuk-details__text. Se abre con el comportamiento nativo del navegador. Mantén visibles fuera del elemento desplegable la identidad de la cita y el hecho de que no se realiza ninguna reserva, ya que todos necesitan esa información.

En 10.6, Nunjucks API utiliza summary.text o summary.html; la opción antigua summaryText está obsoleta. Si utilizas macros, prefiere la nueva estructura del objeto. El ejemplo de HTML evita depender de un sistema de plantillas y conserva la misma estructura.

Consulta la especificación complementaria

## Sistema de diseño NHS Errores de selección y revisión

### Valida el grupo sin seleccionar una opción de antemano

Al inicio no hay ninguna opción seleccionada. Si se continúa sin responder, aparece un error en línea y se asocia el grupo con ese mensaje. A continuación, la vista previa enfoca el error. La selección sigue visible al volver desde la revisión. Estas decisiones sobre el estado de la aplicación se superponen a los controles nativos.

La revisión muestra el método elegido y la identidad de la cita ficticia. La acción indica «Cambiar preferencia». No hay ningún mensaje de confirmación que sugiera que un servicio clínico haya aceptado la preferencia, ni se inventan consejos de salud o requisitos de preparación.

1. Continúa sin seleccionar un método de asistencia.

2. Selecciona «Por teléfono» y abre la revisión local.

3. Cambia la preferencia a «En persona» y comprueba la revisión actualizada.

Consulta la especificación complementaria

## Sistema de diseño NHS Recursos locales de frontend

### Utiliza el paquete y el módulo seleccionados

La configuración copia CSS 10.6.1 y el módulo de navegador a un directorio de recursos estáticos. El módulo exporta initAll; llámalo cuando exista el marcado del componente. El ejemplo independiente utiliza la misma distribución servida localmente y una sobrescritura de Arial aplicada a la página.

Los estilos incluyen reglas de componentes y bases adaptables. El pequeño script que cambia el panel de revisión es código independiente de la aplicación. En un servicio de producción, los datos ficticios de la cita se sustituirían por datos mantenidos y la solicitud de preferencia real se gestionaría mediante su propio backend.

Consulta la especificación complementaria

## Sistema de diseño NHS Revisión de la composición

### Comprueba el contexto del servicio de salud

Las comprobaciones clave son que la persona pueda identificar la cita, entender que todavía no se ha confirmado una preferencia de asistencia y cambiar el método elegido sin perder el contexto. Un aviso genérico de éxito ocultaría esta diferencia.

Prueba el uso del grupo de botones de opción y del resumen de details con el teclado; después, comprueba la vista estrecha con un nombre de clínica largo. El error por falta de selección debe llevar de vuelta al grupo. La biblioteca aporta comportamientos reutilizables, mientras que la organización sigue siendo responsable de las normas reales sobre citas y de la información clínica.

Consulta la especificación complementaria

## Sistema de diseño NHS Ejemplos de componentes del sistema de diseño

### Grupo de botones de opción para la asistencia

Un fieldset con etiqueta, controles nativos excluyentes y clases de componentes NHS.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

Referencia de código

### Ayuda contextual opcional

El elemento details nativo muestra información adicional sin ocultar la tarea.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

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.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

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 NHS Configuración del agente

### Punto de partida para la implementación

Coloca los comandos de shell y HTML en sus respectivos archivos. Arial es una sobrescritura explícita para la vista previa independiente; las organizaciones del NHS deben seguir los requisitos reales de licencia tipográfica y marca. El ZIP completo del ejemplo funcional, incluido en Sources, también proporciona las dependencias exactas para la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/nhs.html. No abras ejemplos basados en módulos mediante file://.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### Una instrucción para tu proyecto

```
Crea una pregunta independiente sobre preferencias de asistencia a citas con NHS.UK Frontend 10.6.1. Utiliza un fieldset y una leyenda para los métodos de asistencia excluyentes, indicaciones asociadas a los botones de opción y un elemento Details nativo para la ayuda opcional. Mantén visibles la pregunta y las instrucciones esenciales. Si se intenta revisar sin responder, muestra un resumen del error enlazado y un error en línea; conserva el método seleccionado al volver de la revisión local. Carga el CSS correspondiente y ejecuta initAll del módulo, con la sobrescritura de Arial para este estudio, documentada explícitamente. No añadas búsquedas de citas, cambios reales de reservas, consejos clínicos ni afirmaciones de identidad del NHS.
```

## Sistema de diseño NHS Fuentes y alcance

Estudio independiente sobre preferencias de asistencia a citas, basado en NHS.UK frontend 10.6.1. Sin logotipo del NHS, Frutiger con licencia, reservas reales, instrucciones clínicas ni respaldo implícito.

- Tipografía Elegibilidad tipográfica y jerarquía tipográfica transaccional.

- Color Variables semánticas con nombre.

- Espaciado Escala de clases adaptable.

- Diseño Contenedor y cuadrícula de escritorio.

- Botones de opción Estructura y estados del grupo.

- Details Estructura del elemento desplegable y macro actual API.

- Código fuente de Frontend Implementación y distribución oficiales.

- 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 NHS Recursos relacionados

### NL sistema de diseño

Crea una interfaz de servicio público con componentes reales de colaboradores y un tema explícito. Esta referencia usa Utrecht CSS para mostrar la correspondencia entre tokens, la estructura de una lista de datos y dos temas originales con el mismo flujo de edición.

### NSW sistema de diseño

Explora los tokens de diseño de NSW, la tipografía Public Sans y pestañas nativas accesibles mediante el teclado con una guía completa del taller y una lista de lectura local independiente.

### ONS sistema de diseño

Crea una respuesta a una encuesta que no pueda contradecirse: casillas nativas de ONS, respuestas mutuamente excluyentes, referencias exactas a tipos y colores, y un flujo local completo de revisión.


- [Referencia de implementación](https://service-manual.nhs.uk/design-system/components/radios)
- [Fuente](https://service-manual.nhs.uk/design-system/styles/typography)
- [Fuente](https://service-manual.nhs.uk/design-system/styles/colour)
- [Fuente](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Fuente](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consulta la especificación complementaria](https://service-manual.nhs.uk/design-system/styles/typography)
- [Referencia de código](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consulta la especificación complementaria](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consulta la especificación complementaria](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consulta la especificación complementaria](https://service-manual.nhs.uk/design-system/components/radios)
- [Consulta la especificación complementaria](https://service-manual.nhs.uk/design-system/components/details)
- [Consulta la especificación complementaria](https://github.com/nhsuk/nhsuk-frontend)
- [Referencia de código](https://service-manual.nhs.uk/design-system/components/radios)
- [Referencia de código](https://service-manual.nhs.uk/design-system/components/details)
- [Tipografía Elegibilidad tipográfica y jerarquía tipográfica transaccional.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Color Variables semánticas con nombre.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Espaciado Escala de clases adaptable.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Diseño Contenedor y cuadrícula de escritorio.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Botones de opción Estructura y estados del grupo.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Estructura del elemento desplegable y macro actual API.](https://service-manual.nhs.uk/design-system/components/details)
- [Código fuente de Frontend Implementación y distribución oficiales.](https://github.com/nhsuk/nhsuk-frontend)