# Sistema de design NHS

## Prévia da interface do sistema de design NHS

Selecione um método, consulte a ajuda opcional, recupere-se de uma pergunta sem resposta e altere sua preferência.

## Referência de design do sistema de design NHS

Frontend NHS.UK 10.6.1 e manual de serviços digitais do NHS. A prévia usa CSS/JS oficial local com Arial, não a Frutiger licenciada nem o logotipo do NHS. Os valores responsivos são verificados em relação ao pacote selecionado; nenhum conteúdo clínico é fornecido.

### Tipografia e identidade

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | A Frutiger exige a licença correspondente; este estudo usa Arial. |
| nhsuk-body | 16px small / 19px large | Texto de leitura padrão. |
| nhsuk-body-l | 26px desktop | Parágrafo de destaque, não em todas as frases introdutórias. |
| nhsuk-body-s | 14px small / 16px large | Informações secundárias usadas com moderação. |
| nhsuk-heading-l | Transactional h1 | Use heading-m para o h2 seguinte. |
### Variáveis de cores semânticas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Conteúdo do corpo |
| $nhsuk-secondary-text-colour | #4c6272 | Dicas |
| $nhsuk-link-colour | #005eb8 | Destinos dos links |
| $nhsuk-focus-colour | #ffeb3b | Foco do teclado |
| $nhsuk-border-colour | #d8dde0 | Limites estruturais |
| $nhsuk-input-border-colour | #4c6272 | Limites dos campos de entrada |
| $nhsuk-error-colour | #d5281b | Feedback de validação |
| $nhsuk-button-colour | #007f3b | Ação principal |
### Espaçamento responsivo

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Tela pequena → acima de 768px; use a classe em vez de criar uma duplicata local. |
### Composição da página

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Contêiner externo de largura fixa. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | Recomendado para serviços transacionais. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | As larguras da grade se aplicam a partir de 769px. |
| Breakpoints | 320 / 641 / 769 / 990px | Celular, tablet, desktop e desktop grande. |
| nhsuk-u-reading-width | Readable content measure | Use quando o contêiner ao redor for largo. |
## Guia completo do sistema de design NHS

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Contexto e fontes do NHS do sistema de design NHS

### Uma interface de saúde sem falsa identidade

> O frontend NHS.UK fornece a base visual e de interação; não agenda uma consulta nem determina quais métodos de comparecimento uma clínica oferece. O estudo mostra uma consulta fictícia e permite que o visitante escolha uma preferência. O resultado é uma revisão local, não um agendamento.

A Frutiger é um recurso da marca NHS sujeito a condições de licenciamento. Este recurso independente usa Arial, a alternativa documentada, e não inclui o logotipo do NHS. O CSS oficial é mantido intacto; uma substituição explícita da fonte local impede solicitações de Frutiger.

Consulte a especificação de apoio

## Tipografia transacional do sistema de design NHS

### Deixe a pergunta definir a hierarquia

Use nhsuk-heading-l para a pergunta da página e nhsuk-heading-m para uma seção subordinada. Isso difere de uma página editorial longa, em que as orientações começam com heading-xl. O fieldset de opções pode usar uma legenda com tamanho de título sem perder a semântica de grupo.

As classes de parágrafo regular distinguem o texto do corpo, o texto de destaque e o texto auxiliar pequeno. Um texto de destaque de 26px é útil uma vez no início da página, enquanto as instruções da consulta permanecem como texto comum do corpo. A prévia mantém largura de linha suficiente para acomodar datas e nomes de locais sem cortes.

Consulte a especificação de apoio

## Espaçamento e contêiner do sistema de design NHS

### O espaçamento do NHS não segue a escala de espaçamento do GOV.UK

As unidades responsivas do NHS seguem uma sequência diferente e mudam acima de 768px. Por exemplo, a unidade 6 passa de 32px para 40px. Não transfira o valor da unidade 6 do GOV.UK para o NHS só porque os nomes dos auxiliares são semelhantes.

A demonstração usa o contêiner de 960px e uma coluna de leitura com dois terços da largura. O comportamento nativo da grade produz uma única coluna abaixo da largura de desktop. As mudanças de layout são controladas pela biblioteca, enquanto a pequena faixa de identidade independente usa estilos da aplicação.

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

Referência de código

Consulte a especificação de apoio

### Pontos de interrupção responsivos

A documentação define 641px como tablet e 769px como desktop. As larguras das colunas da grade começam no breakpoint de desktop; isso não significa que todas as regras tipográficas dependam do mesmo limite. Use as classes nativas em vez de implementar um único breakpoint global para todas as propriedades.

Consulte a especificação de apoio

## Opções agrupadas de comparecimento do sistema de design NHS

### Um fieldset, uma resposta

O exemplo usa nhsuk-fieldset com uma legenda visível e um atributo name compartilhado entre as opções de rádio. Cada opção tem seu próprio id e rótulo. A dica é associada ao grupo por meio de aria-describedby. Essas relações permitem que o navegador apresente uma única opção entre alternativas mutuamente exclusivas.

A estrutura do item de rádio coloca a entrada e o rótulo dentro de nhsuk-radios__item. Os rádios padrão são adequados para uma pergunta principal; a variante pequena foi criada para contextos de filtros mais compactos. As opções fictícias de comparecimento continuam mutuamente exclusivas quando operadas pelas teclas de seta.

- A legenda identifica a decisão.

- O nome compartilhado para comparecimento cria o grupo de seleção.

- Cada rótulo aponta para um ID de entrada diferente.

Consulte a especificação de apoio

## Sistema de design NHS Ajuda sem ocultar informações essenciais

### Use um elemento details nativo

O exemplo de details contém nhsuk-details__summary e um span summary-text, seguidos de nhsuk-details__text. Ele é aberto pelo comportamento nativo do navegador. Mantenha a identificação do agendamento e a informação de que nenhuma reserva é feita fora do conteúdo expansível, pois todos precisam delas.

Na versão 10.6, o API do Nunjucks usa summary.text ou summary.html; a opção antiga summaryText está obsoleta. Se usar macros, prefira o novo formato do objeto. O exemplo HTML não depende de um sistema de templates e mantém a mesma estrutura.

Consulte a especificação de apoio

## Sistema de design NHS Erros de seleção e revisão

### Valide o grupo sem pré-selecionar uma opção

Nenhuma opção é selecionada inicialmente. Ao continuar sem responder, é exibido um erro em linha, e o grupo é associado a essa mensagem. Em seguida, a prévia direciona o foco para o erro. A seleção permanece visível ao voltar da revisão. Essas decisões de estado da aplicação são complementares aos controles nativos.

A revisão repete o método escolhido e a identificação do agendamento fictício. A ação diz Alterar preferência. Não há nenhuma confirmação que sugira que um serviço clínico aceitou a preferência, e não são inventados conselhos de saúde nem requisitos de preparação.

1. Continue sem selecionar um método de comparecimento.

2. Selecione Telefone e abra a revisão local.

3. Altere a preferência para Presencial e confira a revisão atualizada.

Consulte a especificação de apoio

## Sistema de design NHS Recursos locais do frontend

### Use o pacote e o módulo selecionados

A configuração copia o CSS 10.6.1 e o módulo do navegador para um diretório de recursos estáticos. O módulo exporta initAll; chame essa função depois que a marcação do componente existir. O exemplo independente usa a mesma distribuição servida localmente e uma substituição de Arial no nível da página.

Os estilos incluem regras de componentes e bases responsivas. O pequeno script que altera o painel de revisão é um código separado da aplicação. Em um serviço de produção, o registro fictício do agendamento seria substituído por dados mantidos e uma solicitação real de preferência seria processada pelo backend próprio.

Consulte a especificação de apoio

## Sistema de design NHS Revisão da composição

### Verifique o contexto do serviço de saúde

Os principais critérios são que a pessoa consiga identificar o agendamento, entender que a preferência de comparecimento ainda não foi confirmada e alterar o método selecionado sem perder o contexto. Uma notificação genérica de sucesso ocultaria essa distinção.

Teste a operação do grupo de opções de rádio e do resumo de details pelo teclado; depois, confira a visualização estreita com um nome longo de clínica. O erro por falta de seleção deve levar de volta ao grupo. A biblioteca fornece comportamento reutilizável, enquanto a organização continua responsável pelas regras reais de agendamento e pelas informações clínicas.

Consulte a especificação de apoio

## Sistema de design NHS Exemplos de componentes do sistema de design

### Grupo de opções de comparecimento

Um fieldset com rótulo, entradas nativas mutuamente exclusivas e classes de componentes do 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>
```

Referência de código

### Ajuda contextual opcional

O elemento details nativo revela informações adicionais sem ocultar a tarefa.

```
<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>
```

Referência de código

### Exemplo completo independente

O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por 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>
```

Referência de código

- Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.

- Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.

## Sistema de design NHS Configuração do agente

### Ponto de partida para implementação

Coloque os comandos de shell e HTML nos respectivos arquivos. Arial é uma substituição explícita para a prévia independente; as organizações do NHS devem seguir as licenças de fontes e os requisitos de marca aplicáveis. O ZIP completo do exemplo funcional, disponível em Sources, também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/nhs.html. Não abra exemplos baseados em módulos usando 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>
```

### Um prompt para seu projeto

```
Crie uma pergunta independente sobre preferência de agendamento usando NHS.UK Frontend 10.6.1. Use um fieldset e uma legenda para os métodos de comparecimento mutuamente exclusivos, dicas associadas aos botões de opção e o elemento Details nativo para ajuda opcional. Mantenha a pergunta e as instruções essenciais visíveis. Na revisão sem resposta, mostre um resumo de erro vinculado e um erro em linha; preserve o método selecionado ao voltar da revisão local. Carregue o CSS correspondente e initAll do módulo, com a substituição de Arial documentada explicitamente para o estudo. Não adicione busca de agendamentos, alterações reais de reservas, orientação clínica nem alegações de identidade do NHS.
```

## Sistema de design NHS Fontes e escopo

Estudo independente de preferência de agendamento com o frontend NHS.UK 10.6.1. Sem logotipo do NHS, Frutiger licenciada, reservas reais, instruções clínicas ou endosso implícito.

- Tipografia Elegibilidade da fonte e hierarquia tipográfica para transações.

- Cor Variáveis semânticas nomeadas.

- Espaçamento Escala de classes responsivas.

- Layout Contêiner e grade para desktop.

- Botões de opção Estrutura e estados do grupo.

- Details Estrutura do conteúdo expansível e o formato atual de macro API.

- Código-fonte do frontend Implementação e distribuição oficiais.

- Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação.

## Sistema de design NHS Recursos relacionados

### NL sistema de design

Crie uma interface de serviço público com componentes reais de colaboradores e um tema explícito. Esta referência usa Utrecht CSS para demonstrar o mapeamento de tokens, a estrutura de uma lista de dados e dois temas originais com o mesmo fluxo de edição.

### NSW sistema de design

Explore os tokens de design da NSW, a tipografia Public Sans e as guias nativas acessíveis por teclado em um guia completo de workshop, com uma lista de leitura local independente.

### ONS sistema de design

Crie uma resposta de pesquisa que não possa se contradizer: caixas de seleção nativas do ONS, respostas mutuamente exclusivas, referências exatas de tipografia e cores e um fluxo local completo de revisão.


- [Referência de implementação](https://service-manual.nhs.uk/design-system/components/radios)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/typography)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/colour)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Fonte](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consulte a especificação de apoio](https://service-manual.nhs.uk/design-system/styles/typography)
- [Referência de código](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consulte a especificação de apoio](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consulte a especificação de apoio](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consulte a especificação de apoio](https://service-manual.nhs.uk/design-system/components/radios)
- [Consulte a especificação de apoio](https://service-manual.nhs.uk/design-system/components/details)
- [Consulte a especificação de apoio](https://github.com/nhsuk/nhsuk-frontend)
- [Referência de código](https://service-manual.nhs.uk/design-system/components/radios)
- [Referência de código](https://service-manual.nhs.uk/design-system/components/details)
- [Tipografia Elegibilidade da fonte e hierarquia tipográfica para transações.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Cor Variáveis semânticas nomeadas.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Espaçamento Escala de classes responsivas.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Layout Contêiner e grade para desktop.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Botões de opção Estrutura e estados do grupo.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Estrutura do conteúdo expansível e o formato atual de macro API.](https://service-manual.nhs.uk/design-system/components/details)
- [Código-fonte do frontend Implementação e distribuição oficiais.](https://github.com/nhsuk/nhsuk-frontend)