# Sistema de design Scottish Government

## Sistema de design Scottish Government Prévia da interface

Experimente uma nota longa, reduza o texto para ficar abaixo do limite de caracteres, visualize-a localmente, edite e redefina.

## Referência de design sistema de design Scottish Government

Scottish Government Design System 4.3.0 publicado CSS e JavaScript, com orientações oficiais atualizadas sobre tipografia, cores e grade. O CharacterCount nativo e os estilos são executados na prévia. Arial é uma alternativa explícita para este exemplo independente; as diretorias do Governo Escocês devem usar Roboto. Os recursos do pacote atual diferem dos exemplos de instalação mais antigos.

### Tipografia responsiva

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular 400; os estilos grandes nativos começam em 48rem. |
| H1 | 30/40px →44/56px | Negrito 700. |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Use níveis semânticos de título; ds_h3 pode alterar a aparência sem mudar o nível. |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Negrito 700. |
| Lead | 19/32px →24/40px | Light 300; uma introdução concisa por página. |
| Font | Roboto | Obrigatória para diretorias/áreas de políticas do Governo Escocês; a demonstração independente usa Arial explicitamente. |
### Papéis de cores do Sass

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | Azul primário; passar o cursor sobre o link: #00437e. |
| $ds_colour__text | #1a1a1a | Texto secundário #5e5e5e. |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | Mantenha estes papéis de foco mesmo em um tema de marca adaptado. |
| $ds_colour__state--negative | #d32205 | Mensagens de campo acima do limite/erro. |
| $ds_colour__state--positive | #1a7032 | Mensagens positivas; não indicam que o texto local foi enviado. |
| $ds_colour__border | #b3b3b3 | Alternativas forte #1a1a1a e suave #ebebeb. |
### Utilitários de espaçamento responsivo

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | Sem alteração em 48rem. |
| ds_!_margin-bottom--4 | 24px →32px | Pequeno → grande em 48rem. |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Responsivo, em vez de um único valor fixo de espaçamento. |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | Use para aumentar a separação; evite aplicar o maior espaçamento em todos os lugares. |
### Grade e larguras internas úteis

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | As colunas aumentam de 2→6→12 e permanecem em 12. |
| Content width at medium/large/xl | 736 /928 /1120px | Largura interna publicada da grade; difere da largura da caixa do contêiner. |
| Native ds_wrapper box | 768 /960 /1152px | Inclui preenchimento de 16px em cada lado na versão CSS. |
| Gutter / side padding | 32px /16px | Abaixo de 768px, o contêiner é fluido. |
| Reading width in specimen | 42rem maximum | Escolha da aplicação dentro do contêiner nativo, não um token universal oficial. |
### Contrato do CharacterCount

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Root | data-module="ds-character-count" | Contém um campo input ou textarea nativo. |
| Limit | maxlength="200" | Lido e removido durante a inicialização; o texto acima do limite continua editável. |
| Alternative | data-maxlength on root | Sem alternativa nativa de maxlength se JavaScript não estiver disponível. |
| Threshold | data-threshold="80" | Arredonda o limite×.8; para 200, aparece aos 160 caracteres. |
| Error state | ds_input--error;aria-invalid="true" | Aplicado quando a contagem é negativa; acompanhado por uma contagem visível do excesso. |
| Announcements | Separate hidden message;1000ms delay | aria-describedby preserva a orientação existente e adiciona os IDs das mensagens geradas. |
| Counting unit | JavaScript value.length | Unidades de código UTF-16; não prometa contagem de emojis por grafemas. |
## Guia completo de sistema de design Scottish Government

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.

## Sistema de design Scottish Government Uma referência prática para entrada de texto

### Permita que o trabalho da pessoa seja recuperado

> A interação central aqui é a orientação não destrutiva sobre o tamanho do texto. A pessoa pode colar uma nota longa sobre necessidades de acesso, ver quanto precisa editar e manter todo o texto enquanto o reduz. O contador de caracteres nativo exibe a contagem restante, o estilo de excesso do limite e a mensagem atrasada para tecnologias assistivas. A aplicação decide separadamente se a nota é válida o bastante para ser pré-visualizada.

Este é um exemplo original de nota de oficina, não um serviço do Governo Escocês nem uma solicitação de informações médicas. Não inclui elementos gráficos de identidade, armazenamento ou envio. A orientação do campo pede uma necessidade prática de acesso e desencoraja o compartilhamento de detalhes privados, para que a tarefa seja compreensível sem reproduzir uma transação oficial.

Consulte a especificação de apoio

## Sistema de design Scottish Government Roboto e hierarquia responsiva

### Preserve as métricas publicadas

O sistema exige Roboto para as diretorias e áreas de políticas do Governo Escocês. Outras organizações que adotarem o sistema podem usar outra fonte legível, preservando as regras de tamanho e altura de linha e testando o resultado. O exemplo independente declara explicitamente sua alternativa Arial; não afirma que uma fonte da web indisponível seja Roboto.

O corpo do texto passa de 16/24px para 19/32px, e o título principal, de 30/40px para 44/56px. Ambas as alterações ocorrem na folha de estilos nativa para telas maiores. A classe ds_h 3 altera o tamanho visual sem exigir um título semântico de terceiro nível. Essa distinção é importante quando um formulário curto precisa de um título de seção menor, mas não de uma lacuna artificial na estrutura do documento.

Consulte a especificação de apoio

## Sistema de design Scottish Government Um tratamento de foco distinto

### Diferencie foco, erro e conclusão

O azul representa a marca principal e os links, o preto representa o texto e o amarelo destaca o foco. Essas são configurações nomeadas do Sass, não uma coleção inventada de propriedades personalizadas CSS. A adaptação da marca ocorre antes de carregar o sistema, por meio do módulo de configurações. As orientações oficiais mantêm a paleta de foco mesmo quando outras cores da marca mudam.

O contador de caracteres introduz o vermelho negativo somente quando o limite permitido é excedido. Um segundo erro da aplicação, para um campo vazio, pode usar o mesmo papel negativo, mas a mensagem deve indicar que falta uma resposta, não que há um problema com a contagem de caracteres. A prévia nunca usa verde positivo para sugerir que um envio remoto foi concluído com sucesso.

- Mantenha um contorno de foco visível no teclado para a textarea e os botões de ação.

- Descreva o excesso de caracteres em texto, não apenas com uma borda vermelha.

- Associe os resumos de erro e as orientações dos campos a um ID estável do campo.

Consulte a especificação de apoio

## Sistema de design Scottish Government Largura do contêiner e espaçamento

### Não confunda as larguras externa e interna

A tabela oficial da grade descreve larguras internas de conteúdo de 736, 928 e 1120px nos pontos de interrupção médio, grande e extragrande. As caixas correspondentes do contêiner nativo medem 768, 960 e 1152px, pois cada uma inclui 16px de preenchimento lateral. Essa distinção evita que quem adota o sistema aninhe as duas larguras e acabe estreitando o layout duas vezes.

A prévia coloca uma coluna de leitura de 42rem dentro do contêiner nativo. Esse limite máximo é uma escolha da aplicação, adequada para um formulário curto, não uma nova configuração do sistema. Abaixo de 768px, o contêiner se torna fluido, e o mesmo espaçamento lateral de 16px mantém a textarea afastada da borda da tela.

Os utilitários de espaçamento são responsivos. Por exemplo, ds_!_margin-bottom--4 passa de 24 para 32px em 48rem; os níveis maiores também aumentam. A referência fornece os dois valores para que uma captura de tela em desktop não seja confundida com um espaçamento fixo e universal.

Consulte a especificação de apoio

## Sistema de design Scottish Government Campo nativo com contagem de caracteres

### Comece com uma textarea real

A raiz ds_question contém data-module e o limite percentual opcional. O rótulo associado e a orientação são elementos HTML comuns e acessíveis. Uma textarea com maxlength oferece uma alternativa útil sem JavaScript. Após o aprimoramento, o componente lê esse valor e remove o limite rígido para que um texto colado não seja truncado silenciosamente.

Em um campo de 200 caracteres com limite de 80%, a contagem aparece aos 160 caracteres. O texto de exemplo da página pública do componente e o exemplo de código de 250 caracteres não usam os mesmos números; por isso, este modelo mantém um único limite coerente em todo o exemplo. Sem JavaScript, a orientação visível ainda informa o limite e o maxlength nativo é aplicado.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Referência de código

Consulte a especificação de apoio

## Sistema de design Scottish Government O que o componente nativo controla

### Mensagens, temporização e contagem

A implementação versionada cria uma mensagem visível com aria-hidden e outra mensagem oculta para tecnologias assistivas. Ela adiciona os IDs pertinentes ao aria-describedby existente, em vez de descartar a orientação escrita. Aguarda 1000ms antes de atualizar o aviso oculto, permitindo que o feedback da digitação seja concluído primeiro.

O comprimento real vem de JavaScript string.value.length: ele conta unidades de código UTF-16. Um símbolo fora do Plano Multilíngue Básico pode ocupar duas unidades, e um emoji combinado pode ocupar mais. Um serviço que precise de outra política de contagem deve alinhar seu contador e a validação no servidor, em vez de prometer que este componente conta caracteres conforme a percepção humana.

O componente escuta eventos de input. Se uma aplicação preencher um exemplo ou limpar o campo por programação, também deve disparar input. As ações de exemplo e redefinição da demonstração fazem isso. Um comentário no código-fonte menciona a consulta periódica do reconhecimento de fala, mas a implementação analisada não configura um intervalo de consulta; por isso, este guia não afirma que esse comportamento está disponível.

Consulte a especificação de apoio

## Sistema de design Scottish Government Use os caminhos da versão atual

### Carregamento de módulos e inicialização com escopo definido

O pacote atual é @scottish-government/design-system. A versão 4.3.0 disponibiliza a folha de estilos compilada em dist/css/design-system.min.css, enquanto um parágrafo de instalação mais antigo ainda menciona dist/styles/main.css. Esta receita usa o recurso publicado de fato. O script exporta um módulo ES, portanto importe-o com type="module" em vez de usar uma tag de script clássica.

Crie uma instância de CharacterCount para este campo e chame init. DS.initAll também está disponível para páginas com vários componentes, mas este exemplo inicializa apenas o contador necessário. Nenhum serviço adicional de análise está configurado. A validação no servidor é independente da biblioteca: um contador é um recurso útil para editar, não um mecanismo de aplicação de limites.

1. Instale o pacote fixado na versão 4.3.0 e copie a CSS compilada e o módulo para um diretório local de recursos.

2. Inclua na página toda a estrutura do rótulo, da instrução e da área de texto antes de importar o módulo.

3. Inicialize o contador uma vez e, em seguida, conecte as ações de pré-visualização e redefinição da aplicação usando eventos input comuns.

Consulte a especificação de apoio

## Sistema de design Scottish Government Teste a recuperação após exceder o limite

### Não teste apenas um campo vazio

Comece abaixo do limite, ultrapasse 160 caracteres e cole mais de 200. O valor completo deve permanecer na área de texto enquanto uma mensagem de limite excedido aparece e aria-invalid passa a true. Reduza o valor para menos que o limite e confirme que tanto a classe de erro quanto o estado inválido são removidos.

A ação Pré-visualizar da aplicação bloqueia notas vazias ou acima do limite e mostra um erro associado. Uma nota válida aparece em uma pré-visualização local usando textContent, portanto a marcação digitada é exibida como texto, em vez de ser interpretada. A opção Editar nota retorna à mesma área de texto com o valor intacto. Redefinir limpa o campo por meio de um evento input, para que a contagem nativa também seja redefinida.

Em 390px, confira a quebra do título, a área de texto em largura total, a disposição dos botões e o resumo de erros. Em telas maiores, a coluna de leitura não deve virar um parágrafo muito largo. Essas verificações avaliam este exemplo; um serviço real ainda precisa de pesquisa com usuários, testes de fontes e análise com tecnologias assistivas em seu contexto final.

Consulte a especificação de apoio

## Sistema de design Scottish Government Exemplos de componentes do sistema de design

### Um limite de caracteres não destrutivo

Um rótulo, uma instrução, uma área de texto e um limite de 80% com aprimoramento progressivo.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Referência de código

### Recursos compilados da versão atual 4.3.0

Caminho de CSS verificado para a versão e inicialização de módulo ES.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

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"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></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 Scottish Government Configuração do agente

### Ponto de partida para implementação

A demonstração local executa o componente real da versão 4.3.0 de CSS e o módulo CharacterCount. A fonte alternativa está especificada claramente; o caminho antigo dist/styles da página de instalação não é usado. O ZIP do exemplo completo funcional em Sources também inclui as dependências exatas da pré-visualização e o documento completo. Extraia-o, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/scottish-government.html. Não abra exemplos baseados em módulos usando file://.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

### Um prompt para seu projeto

```
Use o componente CharacterCount real da versão 4.3.0 do Scottish Government Design System em um formulário independente para notas de acessibilidade. Fixe os caminhos verificados dist/css/design-system.min.css e dist/scripts/design-system.js, que é um módulo ES. Inclua uma área de texto com limite de 200 caracteres e limiar de 80%, uma instrução associada e a inicialização do componente com escopo definido. Preserve o texto colado que exceder o limite, deixe as atualizações da contagem nativa e de ARIA a cargo da biblioteca e acrescente validação local independente e uma pré-visualização, edição e redefinição seguras, somente com texto. As ações programáticas de exemplo e redefinição devem disparar eventos input. Use a tipografia e o espaçamento responsivos publicados, defina explicitamente a fonte e não simule uma identidade oficial nem o envio do formulário.
```

## Sistema de design Scottish Government Fontes e escopo

Referência de implementação independente. As diretorias do governo escocês devem usar Roboto; este exemplo sem marca usa explicitamente Arial como fonte alternativa. Texto original, sem armazenamento ou envio e sem afiliação oficial. A licença do código e as permissões para recursos gráficos do governo são independentes.

- Tipo Regras de tipografia e adoção de fontes.

- Cor Funções da paleta Sass e limites dos temas.

- Grade Larguras da grade interna, colunas e margens internas.

- Contagem Limites não destrutivos e comportamento do limiar.

- Js APIs de inicialização e aprimoramento.

- Instalação Instalação do pacote; compare com os caminhos publicados atuais.

- Foco Orientações para foco visível do teclado.

- Pergunta Estrutura para agrupar perguntas.

- Erro Orientações para recuperação e resumo de erros.

- 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 Scottish Government Recursos relacionados

### Singapore Government sistema de design

Use os Web Components atuais do SGDS com tokens responsivos reais, temas diurno e noturno e quantidades nativas com limites que mantêm um plano local sincronizado.

### Decanter

Crie páginas editoriais acadêmicas com a predefinição Tailwind de Decanter, uma escala tipográfica responsiva e bordas de tela fluidas. Explore cartões originais de eventos com filtros de tema funcionais e resumos expansíveis.

### Suomi.fi sistema de design

Crie formulários legíveis para serviços públicos finlandeses com Source Sans 3, tokens de espaçamento explícitos e um padrão recuperável de seleção de documentos.


- [Referência de implementação](https://designsystem.gov.scot/components/character-count)
- [Fonte](https://designsystem.gov.scot/styles/typography)
- [Fonte](https://designsystem.gov.scot/styles/colour)
- [Fonte](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [Fonte](https://designsystem.gov.scot/styles/column-grid)
- [Fonte](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/components/character-count)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/styles/typography)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/styles/colour)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/styles/column-grid)
- [Referência de código](https://designsystem.gov.scot/components/character-count)
- [Consulte a especificação de apoio](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/get-started/javascript)
- [Consulte a especificação de apoio](https://designsystem.gov.scot/components/error-summary)
- [Referência de código](https://designsystem.gov.scot/get-started/javascript)
- [Tipo Regras de tipografia e adoção de fontes.](https://designsystem.gov.scot/styles/typography)
- [Cor Funções da paleta Sass e limites dos temas.](https://designsystem.gov.scot/styles/colour)
- [Grade Larguras da grade interna, colunas e margens internas.](https://designsystem.gov.scot/styles/column-grid)
- [Contagem Limites não destrutivos e comportamento do limiar.](https://designsystem.gov.scot/components/character-count)
- [Js APIs de inicialização e aprimoramento.](https://designsystem.gov.scot/get-started/javascript)
- [Instalação Instalação do pacote; compare com os caminhos publicados atuais.](https://designsystem.gov.scot/get-started/installation)
- [Foco Orientações para foco visível do teclado.](https://designsystem.gov.scot/styles/focus-states)
- [Pergunta Estrutura para agrupar perguntas.](https://designsystem.gov.scot/components/question)
- [Erro Orientações para recuperação e resumo de erros.](https://designsystem.gov.scot/components/error-summary)